appBar 不会自动展开或折叠 |颤动

Question

我想要实现的是当我滚动时，appBar应该自动展开或折叠，这样就没有中间状态，只有折叠或完全展开。这个功能在联系人或者设置app里都可以看到，所以想重现一下。

这是我的代码：

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

class CustomAppBar extends StatelessWidget {
  final _controller = ScrollController();

  CustomAppBar({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NotificationListener<ScrollNotification>(
        onNotification: (scrollNotification) {
          if (scrollNotification is ScrollEndNotification &&
              scrollNotification.depth == 0) {
            final minExtent = scrollNotification.metrics.minScrollExtent;
            final maxExtent = scrollNotification.metrics.maxScrollExtent;
            final middle = (maxExtent - minExtent) / 2;
            final pos = scrollNotification.metrics.pixels;
            if (kDebugMode) {
              print(
                  "pos : $pos, maxExtent : $maxExtent, minExtent : $minExtent");
            }
            if (pos <= middle) {
              _controller.animateTo(minExtent,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.ease);
            } else if (middle > pos) {
              _controller.animateTo(maxExtent,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.ease);
            }
          }
          return false;
        },
        child: NestedScrollView(
          controller: _controller,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: const SliverAppBar(
                    expandedHeight: 200.0,
                    pinned: true,
                    flexibleSpace:
                        FlexibleSpaceBar(title: Text("Hello world"))),
              ),
            ];
          },
          body: Builder(builder: (BuildContext context) {
            return CustomScrollView(
              slivers: [
                SliverOverlapInjector(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context)),
                const SliverToBoxAdapter(
                    child: SizedBox(
                        height: 200, child: Center(child: Text("Slivers"))))
              ],
            );
          }),
        ),
      ),
    );
  }
}

我改变了条件和动画，但它仍然没有按预期工作。

Answer 1

我有一些解决办法，也许对你有帮助。

1. 创建一个parentScrollController并将其添加到NestedScrollView。
2. 将自定义滚动视图的滚动物理设置为

   ClampingScrollPhysics()

   。
3. 在 onNotification 函数中将条件更改为

   if(notification is OverscrollNotification && notification.overscroll < 0)parentScrollController!.jumpTo(0);}

   。
4. 向父滚动控制器添加事件监听器并测试

   if(_scrollController.position.userScrollDirection == ScrollDirection.reverse){parentScrollController!.jumpTo((MediaQuery.of(context).size.height * MetaScoreDimensions.scrollOffsetGap) + kToolbarHeight);}

希望这有帮助。