颤振/飞镖行不在剩余空间内居中

Question

我正在尝试使用 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 Inspector 视图

Answer 1

您想从三个文本之间的图标中平均分配空间，对吗？ 我将通过将 3 个小部件包装在另一行中的其余空间而不带图标来解决此问题，然后将 Text 包装在一个扩展的小部件中，该小部件填充其余空间。

我假设trips、followers 和following 是列。

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]