Flutter - 在 CustomScrollView 中如何防止滚动的 Widget 被绘制在固定的 Widget 后面

Question

大家好，我是一名 Android 开发者，我开始将我的应用程序移植到 Flutter。

在 Android 中，当您有一个带有扩展 AppBar 的 CoordinatorLayout 和一个可滚动内容时，滚动内容在 Appbar 后面不可见。

这个gif是Android上的behaivior，也是我想在Flutter上实现的。应用栏和滚动内容背景是透明的，让用户可以看到背景图像，但滚动内容不会穿过应用栏)

在 flutter 中我可以成功地复制这个布局，但问题是滚动内容被绘制在 AppBar 后面。

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

这是我在 flutter 上的代码:

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

我认为你可以尝试将一个新的 Stack 放入你的旧 Stack 中。

旧 Stack 包含背景图像。

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

希望它有用。