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。例如：MediaQuery.of(context).size.height以获取设备的完整高度，然后您可以对其进行操作，除以2、3，然后减去...

嵌套在Column-> Row

1 个答案: