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

问题描述 投票:0回答:1

我正在尝试使用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:当前外观

enter image description here

图像2: Flutter检查器视图

enter image description here

flutter flutter-layout
1个回答
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]

© www.soinside.com 2019 - 2024. All rights reserved.