如何在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,
          ))
        ],
      ),
    );
  }

我想在普通背景上有一张类似Container的卡片，如图所示。这是我尝试使用Stack的尝试，但是我无法将其放置在正确的位置。我是新来的...

Answer 1

将Positioned.fill与Align用作其子级，并将对齐方式指定为Alignment.bottomCenter。然后，您可以为边界半径装饰堆叠的Container。