如何在 Flutter 的不同位置对齐 Column 的 children？

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(...),
    ),
  ],
)

如何在 Flutter 的不同位置对齐 Column 的 children？

How to align Column's children in different positions in Flutter?

flutter

flutter-layout