如何制作类似于 Google News 的 SliverAppBar？答案

【问题标题】：How can I make a SliverAppBar that is similar to Google News?如何制作类似于 Google News 的 SliverAppBar？
【发布时间】：2020-07-10 07:27:06
【问题描述】：

当应用启动时我想要一个标准的 AppBar，但是，一旦用户开始滚动，我希望应用栏向上滑动并离开屏幕。但是，当这种情况发生时，状态栏（在 iOS 上）没有背景。我不想使用 flutter_statusbarcolor 之类的东西直接为状态栏设置恒定背景，因为这样会留下纯色，而不是小部件。

我现在唯一的解决方案就是让 AppBar 保持固定状态。

但是，我真正想做的是 Google 新闻所做的。 AppBar 几乎一直向上滑动，但是，它停留在应用栏下方，有一些不透明度。

Google 新闻是如何做到的：

有没有什么方法可以用 Flutter 和 SliverAppBar 做到这一点，而不是用 hacky 的方式？我唯一在想的就是用一个堆栈来做，但是，我怎么知道如何将它保存在状态栏下，因为 Android 在状态栏下已经有一些不透明度。

【问题讨论】：

标签： flutter dart sliverappbar

【解决方案1】：

flutter 中的滚动小部件具有通知滚动发生了什么的控制器。您可以获取条子滚动了多少，并相应地更改它的不透明度、内容和大小。虽然这并不简单，但请看一下ScrollController，CustomScrollView 使用的。

【讨论】：

【解决方案2】：

我使用OrientationBuilder 小部件来监听方向的变化，因为当方向发生变化时，状态栏的高度会发生变化。

然后我使用FlutterStatusbarManager 包来获取状态栏的高度。 FlutterStatusbarManager.getHeight 是 future，所以需要用 FutureBuilder 包裹起来

这是完整的示例代码

import 'package:flutter/material.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';

class FixedStatusbarBackground extends StatelessWidget {
  final Widget child;

  const FixedStatusbarBackground({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        OrientationBuilder(
          builder: (context, Orientation orientation) => FutureBuilder<double>(
              future: FlutterStatusbarManager.getHeight,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Container(
                      height: snapshot.data,
                      color: Theme.of(context)
                          .appBarTheme
                          .color
                          .withOpacity(.7) //Colors.white.withOpacity(.7),
                      );
                } else {
                  return Container();
                }
              }),
        ),
      ],
    );
  }
}

传入的child小部件是整个CustomScrollView。

【讨论】：