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检查器视图

Answer 1

您想通过图标在三个文本之间均匀地分配空间，对吗？我可以通过以下方式解决此问题：将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]

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

1 个答案: