我正在尝试寻找一个更好的方法来代替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: () {},
),
],
),
2条答案
按热度按时间w46czmvw1#
你可以把所有的图标放在一个列小部件中。列小部件有一个参数MainAxisAlignment,你可以把这个参数设置为
MainAxisAlignment.spaceEvenly
。有关“列”微件,请参阅https://api.flutter.dev/flutter/widgets/Column-class.html
主轴校准参见https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html
将“列”构件放入“容器”构件中。
9rnv2umw2#
你可以试着使用填充。2类似的东西应该可以: