Flutter 容器中的间距图标

Question

我正在尝试找到一个更好的替代方案来替代 Flutter 中的图标间距，我目前正在使用 SizedBox(...) 小部件。虽然我不确定这是否是最好的使用方法，但当我调整 height/width 时，大小框似乎弄乱了其他图标的间距。是否有任何替代方法可以将图标放置在容器内。我在 post 添加了 UI 的图片，图标在左侧的菜单中。 Login Screen Image

Widget build(BuildContext context) {
    return Container(
        width: 1280,
        height: 800,
        decoration: BoxDecoration(
          color: Color.fromRGBO(227, 227, 227, 1),
        ),
        child: Material(
          child: Stack(
              children: <Widget>[
                Positioned(
                    top: 0,
                    left: 80,
                    child: Container(
                        width: 1200,
                        height: 70,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                              image: AssetImage('assets/images/Topbarbackground.png'),
                              fit: BoxFit.fitWidth
                          ),
                        )
                    )
                ), Positioned(
                    top: 652,
                    left: 0,
                    child: Container(
                        width: 1280,
                        height: 100,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                              image: AssetImage(
                                  'assets/images/Rectangle112.png'),
                              fit: BoxFit.fitWidth
                          ),
                        )
                    )
                ), Positioned(
                    top: 0,
                    left: 0,
                    child: Container(
                        child: ListView(
                          children: [
                            SizedBox(
                              height: 50.0,
                              child: IconButton(
                                padding: EdgeInsets.all(0.0),
                                icon: Image.asset('assets/icons/Back.png'),
                                onPressed: () {},
                              ),
                            ),
                            SizedBox(
                              width: 0.0,
                              height: 150.0,
                              child: IconButton(
                                padding: EdgeInsets.all(0.0),
                                icon: Image.asset('assets/icons/tip_load.png'),
                                onPressed: () {},
                              ),
                            ),
                            SizedBox(
                              width: 0.0,
                              height: 50.0,
                              child: IconButton(
                                padding: EdgeInsets.all(0.0),
                                icon: Image.asset('assets/icons/tip_eject.png'),
                                onPressed: () {

                                },
                              ),
                            ),
                            SizedBox(
                              height: 125.0,
                              child: IconButton(
                                padding: EdgeInsets.all(0.0),
                                icon: Image.asset('assets/icons/Light.png'),
                                onPressed: () {},
                              ),
                            ),
                            IconButton(
                              padding: EdgeInsets.all(0.0),
                              icon: Image.asset('assets/icons/Utility.png'),
                              onPressed: () {},
                            ),
                            SizedBox(
                              height: 125.0,
                              child: IconButton(
                                padding: EdgeInsets.all(0.0),
                                icon: Image.asset('assets/icons/Help.png'),
                                onPressed: () {},
                              ),
                            ),
                            SizedBox(
                              height: 100.0,
                              child: IconButton(
                                padding: EdgeInsets.all(0.0),
                                icon: Image.asset('assets/icons/User.png'),
                                onPressed: () {},
                              ),
                            ),
                            IconButton(
                              padding: EdgeInsets.all(0.0),
                              icon: Image.asset('assets/icons/Power.png'),
                              onPressed: () {},
                            ),
                          ],
                        ),

Answer 1

你可以尝试使用Padding。类似的东西应该可以解决问题：

Padding(
        padding: EdgeInsets.only(left:10),
        child: Icon(Icons.check)
 ),

Answer 2

您可以将所有图标放在一个列小部件中。 column widget有一个参数MainAxisAlignment，你可以设置这个参数为spaceEvenly。

查看“列”小部件https://api.flutter.dev/flutter/widgets/Column-class.html

并查看 MainAxisAlignmenthttps://api.flutter.dev/flutter/rendering/MainAxisAlignment.html

将 Column 小部件放入 Container 小部件中。

Container(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly
        children: [
            Icon()
            Icon()
        ],
    ),
),