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

问题描述

在颤振中，是否可以将卡片的一部分放在另一个容器上?在 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 - 容器上的叠加卡片小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！