Flutter - 容器上的叠加卡片小部件

Question

在 flutter 中，是否可以将卡片的一部分放在另一个容器上？在 CSS 中，我们会将 margin-top 设置为负值或使用 translate 属性。由于我们无法为 margin-top 设置负值，所以有其他替代方法吗？

Answer 1

是的，您可以使用 Stack 小部件来实现它。您可以在背景上堆叠卡片并提供顶部或底部填充。

一个简单的例子如下:

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        // The containers in the background
        new Column(
          children: <Widget>[
            new Container(
              height: MediaQuery.of(context).size.height * .65,
              color: Colors.blue,
            ),
            new Container(
              height: MediaQuery.of(context).size.height * .35,
              color: Colors.white,
            )
          ],
        ),
        // The card widget with top padding, 
        // incase if you wanted bottom padding to work, 
        // set the `alignment` of container to Alignment.bottomCenter
        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .58,
              right: 20.0,
              left: 20.0),
          child: new Container(
            height: 200.0,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 4.0,
            ),
          ),
        )
      ],
    );
  }
}

上述代码的输出如下所示:

希望这会有所帮助!