Android Studio Flutter中容器中的间隔图标

des4xlb0  于 2022-11-16  发布在  Android
关注(0)|答案(2)|浏览(132)

我正在尝试寻找一个更好的方法来代替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: () {},
                            ),
                          ],
                        ),
w46czmvw

w46czmvw1#

你可以把所有的图标放在一个列小部件中。列小部件有一个参数MainAxisAlignment,你可以把这个参数设置为MainAxisAlignment.spaceEvenly
有关“列”微件,请参阅https://api.flutter.dev/flutter/widgets/Column-class.html
主轴校准参见https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html
将“列”构件放入“容器”构件中。

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

9rnv2umw2#

你可以试着使用填充。2类似的东西应该可以:

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

相关问题