堆栈按预期工作| z-index（CSS）等价物

Question

我正在努力实现这一点（Todo图像），但图像却被隐藏了。如何把它放在首位？我以为使用Stack会自动将它带到最顶层。有没有z-index等价？我也分享了下面的代码

的Todo

正在进行中

代码

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

Answer 2

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

library(dplyr)
library(ggplot2)
A = c(24,25,26)
B = c(12,13,14)
C = c(18,19,20)
D = c(29,30,31)

df = data.frame(A,B,C,D)

df %>%
  summarise(across(c(A,C),
                   ~mean(.)/100
  ))

>     A      C
   0.25   0.19