Flutter-在CustomScrollView中，如何防止滚动的窗口小部件在固定的窗口小部件后面绘制

Question

嗨，我是一名Android开发人员，我开始将我的应用移植到Flutter。

在Android中，当具有滚动的内容的CoordinatorLayout和可扩展的内容时，在Appbar后面不可见。

此gif是Android上的最佳功能，也是我想在Flutter上实现的功能。 应用程序栏和滚动内容的背景是透明的，以使用户可以查看背景图像，但是滚动内容不会通过应用程序栏。

在混乱中，我可以成功复制此Layout，但是问题是滚动内容绘制在AppBar后面。

有没有办法在应用栏后面绘制滚动内容？

这是我拍打的代码：

Stack(
  children: <Widget>[
    Background(image: 'assets/images/fondo_horario.webp'),
    Container(
      color: Colors.black.withOpacity(.3),
    ),
    Scaffold(
      backgroundColor: Colors.transparent,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            elevation: 0,
            floating: true,
            snap: true,
            backgroundColor: Colors.transparent,
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.more_vert),
                onPressed: () {},
              ),
            ],
            title: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                          "HORARIO DE CURSOS DEL CICLO 2019B",
                          style: TextStyle(
                              fontSize: 9, fontWeight: FontWeight.bold),
                        ),
                  Text(
                          "TOTAL DE CRÉDITOS: 52",
                          style: TextStyle(
                              fontSize: 9, fontWeight: FontWeight.bold),
                        ),
                ],
              ),
            ),
          ),
          SliverPersistentHeader(
            pinned: true,
            delegate: BarraHorario(),
          ),
          SliverToBoxAdapter(
            child: CeldasHorario(),
          )
        ],
      ),
    ),
  ],
);

Answer 1

我认为您可以尝试将新的堆栈放入您的旧堆栈中。

旧的堆栈包含背景图像。

新堆栈将设置为Colors.transparent，并包含您的应用栏和可滚动内容。因此，其中两个将对您的背景图片透明，但是应用程序栏对您的内容不透明。

希望它能起作用。