Flutter-容器上的叠加卡小部件 [英] Flutter - Overlay card widget on a container

问题描述

在扑朔迷离中，可以将卡的一部分放置在另一个容器上吗?在CSS中，我们会将margin-top设置为负值或使用translate属性.在波动中，因为我们无法将负值设置为margin-top，是否有替代方法?

In flutter, is it possible to place a part of a card on another container? In CSS, we would set margin-top to a negative value or use translate property. In flutter as we cannot set negative values to margin-top, is there an alternative to that?

推荐答案

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

Yes, you can acheive it with a Stack widget. You can stack a card over the background and provide a top or bottom padding.

一个简单的示例如下:

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

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

The output of the above code would look something like:

希望这会有所帮助！

这篇关于Flutter-容器上的叠加卡小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！