我正在尝试使用 Flutter/Dart 将一组对象居中放置在一行中。我尝试了各种方法,但都失败了。我希望图标位于屏幕左侧,其余变量(行程、关注者和关注者)位于剩余空间的中心。根据我在 SO 上找到的一些解决方案,我使用 MainAxisAlignment 和 CrossAxisAlignment 类尝试了多种方法,但都没有奏效。我究竟做错了什么?
Column(
children: <Widget>[
ClipOval(
child: Material(
color: Colors.grey, // button color
child: InkWell(
child: SizedBox(
width: 80,
height: 80,
child: Align(
alignment: Alignment.center,
child: Icon(
Icons.person,
size: 65.0,
),
),
),
),
),
)
],
),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
trips, followers, following,
],
),
],
),
图 1:它目前的样子
图 2:颤振检查器视图
您想从三个文本之间的图标中均匀分布空间,对吗?我会通过将 3 个小部件包装在另一行中来解决这个问题,而其余的空间没有图标,然后将文本包装在一个扩展的小部件中,填充其余空间。
我假设旅行、关注者和关注是列。
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
children: <Widget>[
ClipOval(
....(your stuff)
)
]
),
Row(
children: <Widget>[
Expanded(
child: trips
),
Expanded(
child: followers
),
Expanded(
child: following
),
]
)
]
) //Row End
在 Row 文档中,您可以看到扩展如何占用三分之一的可用空间。[ 1 ]
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句