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

Question

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

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

这个 gif 是 Android 上的行为，也是我想在 Flutter 上实现的。appbar 和滚动内容背景是透明的，让用户可以看到背景图片，但滚动内容不会通过 appbar）

在颤振中，我可以成功地复制这个布局，但问题是滚动内容是在 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

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

旧堆栈包含背景图像。

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

希望它有效。