Flutter mainaxisAlignment.spaceEvenly 不适用于多个 flex(行和列)

标签 flutter

我正在创建类似 Instagram 个人资料的屏幕,但 ma​​inaxisAlignment.spaceEvenly 无法正常工作。如果该行不在任何其他行或列内,它就可以正常工作,但在这种情况下它没有。 我该如何解决这个问题?请帮忙。

Container(
                margin: EdgeInsets.all(15.0),
                child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Container(
                          width: 100.0,
                          height: 100.0,
                          margin: EdgeInsets.only(
                            right: 10.0,
                          ),
                          decoration: new BoxDecoration(
                            shape: BoxShape.circle,
                            image: new DecorationImage(
                              fit: BoxFit.fill,
                              image: new CachedNetworkImageProvider(
                                profile.dp,
                                scale: 100.0,
                              ),
                            ),
                          ),
                        ),
                        Column(
                          children: <Widget>[
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                Column(
                                  children: <Widget>[
                                    Text(
                                      profile.postcount.toString(),
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Text('posts'),
                                  ],
                                ),
                                Column(
                                  children: <Widget>[
                                    Text(
                                      profile.followers.toString(),
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Text('followers'),
                                  ],
                                ),
                                Column(
                                  children: <Widget>[
                                    Text(
                                      profile.followings.toString(),
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Text('following'),
                                  ],
                                ),
                              ],
                            ),
                            new RaisedButton(
                              child: Text('Edit Profile'),
                              onPressed: () {},
                            ),
                          ],
                        )
                      ],
                    )
                  ],
                )),

期望:

现实:

最佳答案

给你

enter image description here

Widget _buildRow() {
  return Container(
    padding: const EdgeInsets.all(16),
    child: Row(
      children: <Widget>[
        CircleAvatar(
          radius: 40,
          backgroundImage: AssetImage("your_image_asset"),
        ),
        SizedBox(width: 12),
        Expanded(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Text("2", style: TextStyle(fontWeight: FontWeight.bold)),
                      Text("Gold", style: TextStyle(color: Colors.grey)),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Text("22", style: TextStyle(fontWeight: FontWeight.bold)),
                      Text("Silver", style: TextStyle(color: Colors.grey)),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Text("5464", style: TextStyle(fontWeight: FontWeight.bold)),
                      Text("Reputation", style: TextStyle(color: Colors.grey)),
                    ],
                  ),
                ],
              ),
              OutlineButton(onPressed: () {}, child: Text("CopsOnRoad (Edit Profile)")),
            ],
          ),
        ),
      ],
    ),
  );
}

关于Flutter mainaxisAlignment.spaceEvenly 不适用于多个 flex(行和列),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52738610/

相关文章:

flutter - 如何根据 flutter 中屏幕的分数高度在堆栈内定位列?

firebase - 如何获取Firebase通知数据?

ios - flutter tar : Failed to set default locale in android studio IOS

android - Flutter - 任务 ':connectivity:compileDebugJavaWithJavac' 执行失败

android - 从Play商店下载时, flutter 的谷歌登录无法在发布中工作

dart - 如何在 flutter 中更改分页数据表的颜色?

ios - 为什么UploadTaskSnapshot突然变成编译错误

flutter - Dart :为什么本地函数不能互相调用?

firebase - 在 Flutter 中映射 Firestore 中的映射字段对象

ios - Flutter 地理定位器插件 Geolocator().getCurrentPosition 不返回准确的 lng 和 lat 坐标