堆栈按预期工作 | 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

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

example image

此包允许您使用 index 像 CSS 中的 z-index 一样在堆栈中订购项目。

您可以通过更改index 属性轻松更改项目的顺序 这是它如何工作的示例

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

如果您正在使用一些复杂小部件的 bloc，您可以扩展或实现 IndexedInterface 类并覆盖 index getter：

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(
            //...
          )
        ),
    ],
);

在线demo 视频demo

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

您绝对可以使用 Stack。检查以下代码：

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