我正在尝试使用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: Flutter检查器视图
您想从图标在三个文本之间均匀地分配空间,对吗?我可以通过以下方式解决此问题:将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
在“行”文档中,您可以看到展开的文件如何占用三分之一的可用空间。 [1]