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

你绝对可以使用 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,
          )
        ],
      ),
    );
  }
}