Flutter/Dart 行不在剩余空间内居中

Part_Time_Nerd

我正在尝试使用 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章