堆栈按预期工作 | z-index (CSS) 等效

Question

我正在尝试实现此目标（Todo 图像），但图像已被隐藏。如何把它放在上面？我认为使用 Stack 会自动将其置于首位。是否有任何 z-index 等效项？我也分享了下面的代码

去做

进行中

代码

Widget build(BuildContext context) {
    return new Scaffold(
        body: new CustomScrollView(
      slivers: <Widget>[
        new SliverAppBar(
          expandedHeight: 150.0,
          flexibleSpace: new FlexibleSpaceBar(
            background: new Stack(
              alignment: new Alignment(0.0, 2.5),
              children: [
                new Container(
                  margin: const EdgeInsets.symmetric(vertical: 40.0),
                  decoration: new BoxDecoration(
                      image: new DecorationImage(
                          image: new AssetImage("images/Theme-pattern.png"))),
                  child: new Column(children: <Widget>[
                    new Text("Title", style: new TextStyle(fontSize: 32.0)),
                  ]),
                ),
                new Container(
                  decoration: new BoxDecoration(
                      borderRadius:
                          new BorderRadius.all(const Radius.circular(120.0)),
                      color: Colors.white),
                  width: 100.0,
                  child: new Image.asset("images/photo.png"),
                )
              ],
            ),
          ),
        ),
      ],
    ));
  }

Answer 1

你绝对可以使用堆栈。检查以下代码：

class MyHomePage extends StatelessWidget {

  final double topWidgetHeight = 200.0;
  final double avatarRadius = 50.0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new Column(
            children: <Widget>[
              new Container(
                height: topWidgetHeight,
                color: Colors.yellow,
              ),
              new Container(
                color: Colors.red,
              )
            ],
          ),
          new Positioned(
            child: new CircleAvatar(
              radius: avatarRadius,
              backgroundColor: Colors.green,
            ),
            left: (MediaQuery.of(context).size.width/2) - avatarRadius,
            top: topWidgetHeight - avatarRadius,
          )
        ],
      ),
    );
  }
}

Answer 2

只需将ClipBehavior: Clip.none添加 到 Stack 小部件即可。

Widget build(BuildContext context) {
    return new Scaffold(
        body: new CustomScrollView(
      slivers: <Widget>[
        new SliverAppBar(
          expandedHeight: 150.0,
          flexibleSpace: new FlexibleSpaceBar(
            background: new Stack(
              clipBehavior: Clip.none,
              alignment: new Alignment(0.0, 2.5),
              children: [
                new Container(
                  margin: const EdgeInsets.symmetric(vertical: 40.0),
                  decoration: new BoxDecoration(
                      image: new DecorationImage(
                          image: new AssetImage("images/Theme-pattern.png"))),
                  child: new Column(children: <Widget>[
                    new Text("Title", style: new TextStyle(fontSize: 32.0)),
                  ]),
                ),
                new Container(
                  decoration: new BoxDecoration(
                      borderRadius:
                          new BorderRadius.all(const Radius.circular(120.0)),
                      color: Colors.white),
                  width: 100.0,
                  child: new Image.asset("images/photo.png"),
                )
              ],
            ),
          ),
        ),
      ],
    ));
  }

Answer 3

试试这个包https://pub.dev/packages/indexed

示例图像

index这个包允许你使用 CSS 中的方式对堆栈内的项目进行排序z-index。

您可以轻松地通过更改属性来更改项目的顺序，index这是其工作原理的示例

Indexer(
    children: [
        Indexed(
          index: 100,
          child: Positioned(
            //...
          )
        ),
        Indexed(
          index: 1000,
          child: Positioned(
            //...
          )
        ),
        Indexed(
          index: 3,
          child: Positioned(
            //...
          )
        ),
    ],
);

如果您正在使用某些复杂小部件的块，您可以扩展或实现该类IndexedInterface并覆盖indexgetter：

class IndexedDemo extends IndexedInterface {
    int index = 5;
}

或实施

class IndexedDemo extends AnimatedWidget implements IndexedInterface {
    int index = 1000;
    //...

    //...
}

Indexed然后像类小部件一样使用它：

Indexer(
    children: [
        IndexedDemo(
          index: 100,
          child: Positioned(
            //...
          )
        ),
        IndexedFoo(
          index: 1000,
          child: Positioned(
            //...
          )
        ),
    ],
);

在线演示 视频演示