flutter - 如何在 Flutter 中实现这样的 UI？

Question

我想要一张像 Container 这样的卡片，放在一个简单的背景上，如图所示。

这是我尝试使用 Stack 的方法，但我无法将其放置在正确的位置。

我是新来的，很抱歉问了这么愚蠢的问题。

  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.grey,
          ),
          Positioned(
              child: Container(
            color: Colors.white,
            height: 400,
          ))
        ],
      ),
    );
  }

标签： flutterflutter-layout

Answer 1

使用Positioned.fillwithAlign作为它的孩子，并给对齐作为Alignment.bottomCenter。然后，您可以为边界半径装饰堆叠的容器。

Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Container(
          color: Colors.grey,
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30),
                  topLeft: Radius.circular(30),
                ),
                color: Colors.white,
              ),
              height: 400,
            ),
          ),
        )
      ],
    ),
  );
}