Column 的 MainAxisAlignment 嵌套在 Column->Row 中时没有效果

Question

我正在尝试使用 Column 上的 MainAxisAlignment 属性，但效果并不理想。这是我的代码。

Scaffold(
  appBar: AppBar(
    title: Text('Account'),
  ),
  body: Container(
    child: Column(
      children: <Widget>[
        Card(
          margin: EdgeInsets.only(left: 0.0, right: 0.0, top: 0.0, bottom: 20.0),
          child: InkWell(
            onTap: () {},
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: Row(
                children: <Widget>[
                  Image.network(
                    'https://cdn.mydomain.com/Color/PNG/512/profile-512.png',
                    height: 72.0,
                  ),
                  SizedBox(width: 8.0),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceAround, // <<<=== this line
                    children: <Widget>[
                      Text('User\'s display name'),
                      Text('user@company.com'),
                    ],
                  )
                ],
              ),
            ),
          ),
        )
      ],
    ),
  ),
)

我的层次结构是 Container->Column->Card->InkWell->Row->Column。最里面的 Column 小部件有问题。我发现如果我删除第一个 Column 小部件，那么 MainAxisAlignment 就可以正常工作。

但我不能这样做，因为我想构建一个包含各种 Card 的 Column 布局，正如您在代码中看到的那样。

有人可以告诉我这是什么奇怪的行为以及解决方案吗？

问候。

Answer 1

尝试将此列包装在 Container 或 SizedBox 中并为其设置 double.infinity 高度。

发生的问题是因为 Column 或您未设置高度或宽度的任何组件会自动调整到其中的小部件。

            Container(
              height: MediaQuery.of(context).size.height, //Add here
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Text('User\'s display name'),
                  Text('user@company.com'),
                ],
              ),
            ),

OBS：我个人喜欢为此使用MediaQuery。 eg：MediaQuery.of(context).size.height 得到设备的全高，然后，你可以对其进行操作，除以 2、3、减...