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

Question

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

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

必须考虑到按钮的高度，将卡片定位在整个列的中心。

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

Answer 1

这是使用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,
              ),
            ),
          )
        ],
      )

Answer 2

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

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