0

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

滚动前 滚动后

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

然而，我真正想做的是谷歌新闻所做的。AppBar 几乎一直向上滑动，但是，它保持在应用程序栏下方，具有一定的不透明度。

谷歌新闻是如何做到的：

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

4

2 回答 2

0

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

然后我用FlutterStatusbarManager包来获取状态栏的高度。FlutterStatusbarManager.getHeight是 afuture所以需要用 a 包裹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.

于 2020-04-01T23:23:13.500 回答
0

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

于 2020-03-29T23:24:56.537 回答