简体   繁体   English

Flutter mainaxisAlignment.space甚至无法在多个flex(行和列)上使用

[英]Flutter mainaxisAlignment.spaceEvenly not working on multiple flex(Row & Column)

I am creating a screen like Instagram profile but mainaxisAlignment.spaceEvenly is not working. 我正在创建类似Instagram个人资料的屏幕,但mainaxisAlignment.spaceEvenly无法正常工作。 It works just fine if the row is not inside any other row or column but in this case It didn't. 如果该行不在任何其他行或列内,则工作正常,但在这种情况下则没有。 How can I solve this? 我该如何解决? Please Help. 请帮忙。

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: () {},
                            ),
                          ],
                        )
                      ],
                    )
                  ],
                )),

Expectation: 期望:

Reality: 现实:

Here you go 干得好

在此处输入图片说明

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)")),
            ],
          ),
        ),
      ],
    ),
  );
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM