如何在Flutter中将Column的子级对齐？

Question

如何在Flutter中实现以下设计？

我正在尝试在列中放置卡片和按钮。

考虑到按钮的高度，卡片必须在整个列中居中放置。

并且按钮必须位于列的底部。

Answer 1

要回答问题的标题（对齐“ Column”小部件中的项目），您可以使用小部件来完成Align：

Column(
  children: <Widget>[
    Align(
      alignment: Alignment.center,
      child: Container(...),
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: Container(...),
    ),
  ],
)

Answer 2

这是您可以使用的方式 Stack

  Stack(
        children: <Widget>[
          Center(
            child: SizedBox(
              height: 200.0,
              width: 200.0,
              child: Card(
                elevation: 10.0,
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: MaterialButton(
                child: Text("Button"),
                color: Colors.grey,
                minWidth: MediaQuery.of(context).size.width,
                onPressed: () => null,
              ),
            ),
          )
        ],
      )