动画 SliverAppBar 或 AppBar = 滚动时更改背景颜色

Question

滚动时是否可以更改 Appbar 或 SliverAppbar 的背景？我对SliverAppbaror有这些要求Appbar，但我找不到解决它们的方法。

• 在第一页，Appbar 或 SliverAppBar 没有背景色或透明。
• 滚动页面时，Appbar 或 SliverAppBar 从没有背景色变为有背景色。

这是 Appbar 或 SliverAppbar 的第一次出现

这是滚动时 AppBar 或 SliverAppbar 的外观

这是我想要实现的示例

Answer 1

方法一：

如果您想使用，FlexibleSpaceBar可以为其指定背景颜色，当应用栏展开时，您将看到 的FlexibleSpaceBar背景颜色。例如：

      SliverAppBar(
        backgroundColor: Colors.blue,
        expandedHeight: 200,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          background: Container(
            color: Colors.red,
          ),
        ),
      )

方法二：

如果你不想使用FlexibleSpaceBar（或者如果你不想展开/拉伸AppBar），你可以使用SliverLayoutBuilder来检查是否发生了滚动。如果constraints.scrollOffset > 0，则意味着用户至少滚动了一点。例如：

      SliverLayoutBuilder(
        builder: (BuildContext context, constraints) {
          final scrolled = constraints.scrollOffset > 0;
          return SliverAppBar(
            backgroundColor: scrolled ? Colors.blue : Colors.red,
            pinned: true,
          );
        },
      )

使用此方法，如果您想在滚动时进行一些过渡，也很容易 - 只需获取当前值scrollOffset并根据该值生成颜色即可。