MainAxisSize.SpaceEvenly 在小部件中不等于 space

Question

这是代码

body: Center(
          child: Column(
            children: [
              Row(
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://raw.githubusercontent.com/flutter/website/master/examples/layout/sizing/images/pic1.jpg'),
                    radius: 50,
                  ),
                  SizedBox(
                    width: 30,
                  ),
                  Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text('Post'),
                        Text('Followers'),
                        Text('Following')
                      ],
                    ),
                  )
                ],
              ),
            ],
          ),
        ),

Answer 1

试试下面的代码希望它对你有帮助，使用过的 ListTile 小部件也参考 ListTile here, refer my answer 相同的设计

 ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(
          'https://raw.githubusercontent.com/flutter/website/master/examples/layout/sizing/images/pic1.jpg',
        ),
        radius: 50,
      ),
      title: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Post'),
            Text('Followers'),
            Text('Following'),
          ],
        ),
      ),
    ),

你的结果屏幕像->

Answer 2

Container 不会全部扩孔 space（给容器加背景色看看）。这就是您看不到 MainAxisAlignment.spaceEvenly, 的原因。使用 Expanded 小部件，它占用所有剩余的 space。然后你就会看到效果了。

Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.

Column(
        children: [
          Row(
            children: [
              CircleAvatar(
                backgroundImage: NetworkImage(
                    'https://raw.githubusercontent.com/flutter/website/master/examples/layout/sizing/images/pic1.jpg'),
                radius: 50,
              ),
              SizedBox(
                width: 30,
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('Post'),
                    Text('Followers'),
                    Text('Following')
                  ],
                ),
              )
            ],
          ),
        ],
      ),

MainAxisSize.SpaceEvenly 在小部件中不等于 space

MainAxisSize.SpaceEvenly not giving equal space in the widget

flutter

flutter-layout

flutter-layoutbuilder