Flutter 容器中的图标间距答案

【问题标题】：Spacing Icons in a container in FlutterFlutter 容器中的图标间距
【发布时间】：2022-01-17 14:53:46
【问题描述】：

我正在尝试找到一个更好的替代方法来在 Flutter 中分隔我的图标，我目前正在使用 SizedBox(...) 小部件。虽然我不确定这是否是最好的使用方法，但当我调整高度/宽度时，大小的框似乎会弄乱其他图标的间距。是否有任何替代方法可以在容器内分隔图标。我在帖子中添加了 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: () {},
                            ),
                          ],
                        ),

【问题讨论】：

标签： flutter android-studio dart flutter-layout

【解决方案1】：

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

请参阅https://api.flutter.dev/flutter/widgets/Column-class.html 获取 Column 小部件

查看 https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html 以获得 MainAxisAlignment

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

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

【讨论】：

这似乎工作得很好，我不得不在电源按钮上添加一个大小合适的框，因为它似乎在页面底部被截断了。
很高兴听到它有效。您仍然必须使用 SizedBox 作为电源按钮的事实可能是因为您将所有内容都放在了 Stack 小部件中。在这种情况下，我不建议使用 Stack 小部件，因为您并没有真正将任何东西堆叠在一起。尝试使用多个 Column 和 Row 小部件来创建相同的布局。

【解决方案2】：

您可以尝试使用 Padding。像这样的东西应该可以解决问题：

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

【讨论】：