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

Question

在颤动中,是否可以将卡的一部分放在另一个容器上.在CSS中,我们将margin设置为负值或使用translate属性.因为我们无法将负值设置为保证金最高点,是否有替代方案？

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

上面代码的输出类似于:

希望这可以帮助!

Answer 2

为此，您在 Flutter 中Positioned使用Stack小部件实现卡片。

Stack 如果你想以一种简单的方式重叠几个孩子，class 很有用，

Positioned 控制 Stack 的子项所在位置的小部件。

注意：Stack 按顺序绘制其子项，第一个子项位于底部。

所以让我们开始而不浪费时间我们如何做到这一点。

创建一个Stack小部件并将其包裹在Positioned小部件内以为其提供正确的位置并根据需要设置小部件位置。

  @override
  Widget build(BuildContext context) {
    return new Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          top: 0,
          child: Container(
            color: Colors.deepPurple,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * .35,
          ),
        ),
        Positioned(
          top: MediaQuery.of(context).size.height * .25,
          left: 15,
          right: 15,
          child: Card(
            elevation: 8,
            color: Colors.white,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            child: Container(
              width: MediaQuery.of(context).size.height * .90,
              height: 220,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.scanner,
                        color: Colors.deepPurple,
                        size: 45,
                      ),
                      Text("SCAN QR")
                    ],
                  ),
                  Container(
                    height: 100,
                    width: 2,
                    color: Colors.deepPurple,
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                   children: <Widget>[
                     Icon(
                       Icons.bluetooth,
                       color: Colors.deepPurple,
                       size: 45,
                     ),
                     Text("BEACON")
                   ],
                  )

                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

Answer 3

截屏：

Positioned您Container应该使用Align.

代码：

@override
Widget build(BuildContext context) {
  final size = MediaQuery.of(context).size;
  return Scaffold(
    body: Stack(
      children: [
        Column(
          children: [
            Expanded(flex: 2, child: Container(color: Colors.indigo)),
            Expanded(child: Container(color: Colors.white)),
          ],
        ),
        Align(
          alignment: Alignment(0, 0.5),
          child: Container(
            width: size.width * 0.9,
            height: size.height * 0.4,
            child: Card(
              elevation: 12,
              child: Center(child: Text('CARD', style: Theme.of(context).textTheme.headline2)),
            ),
          ),
        ),
      ],
    ),
  );
}