我正在尝试找到一个更好的替代方案来在 Flutter 中间隔图标，我目前正在使用 SizedBox(...) 小部件。虽然我不确定这是否是最好的使用方法，但当我调整高度/宽度时，大小框似乎会弄乱其他图标的间距。有没有其他方法可以在容器内间隔图标。我在帖子中添加了用户界面的图片，图标位于左侧的菜单中。 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: () {},
),
],
),
最佳答案
您可以将所有图标放入“列”小部件中。列小部件有一个参数MainAxisAlignment，您可以将此参数设置为MainAxisAlignment.spaceEvenly。
参见https://api.flutter.dev/flutter/widgets/Column-class.html对于列小部件
并查看https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html对于MainAxisAlignment
将“Column”小部件放入“Container”小部件中。
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly
children: [
Icon()
Icon()
],
),
),
关于flutter - Flutter 容器中的图标间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70743304/