flutter - NestedScrollView 中的 CupertinoSliverRefreshControl

Question

在我的应用程序中，我需要复杂的 ScrollView 。作为垂直列表和动画标题中的水平列表。下面的代码是一个极简示例，可以使我的问题在 iOS 设备上重现。

我在 flutter 中遇到嵌套 ScrollView 的问题。如果我使用 SliverOverlapAbsorber 和 SliverOverlapInjector 使用的 CupertinoSliverRefreshControl(进度指示器)不会在下拉时显示。

所以我用一个红色的 Container 代替了它。它接缝就像它被转移到顶部所以它在应用程序栏下方。当我在 SliverAppBar 中将 pinned 设置为 false 时，它​​显示正确，但我需要保留 appbar。我不明白固定参数与此有什么关系。

另外，如果我在我的 SliverFixedExtentList 中放置较少的项目(假设是 5 个而不是 50 个)，CupertinoSliverRefreshControl 根本不可能下拉(没有滚动，也只是不使用重叠观察器/注入(inject)器)。

谁能帮我，为什么会这样，或者有重叠观察器/注入(inject)器的替代方案吗？

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
    
    class TestScrollRefresh extends StatefulWidget {
      const TestScrollRefresh({Key? key}) : super(key: key);
    
      @override
      State<TestScrollRefresh> createState() => _TestScrollRefreshState();
    }
    
    class _TestScrollRefreshState extends State<TestScrollRefresh> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool isBoxScrolled) {
              return [
                SliverOverlapAbsorber(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  sliver: SliverAppBar(
                    title: Text("Title"),
                    forceElevated: isBoxScrolled,
                    pinned: true,
                  ),
                ),
              ];
            },
            body: Builder(
              builder: (BuildContext context) {
                final innerScrollController = PrimaryScrollController.of(context);

            return CustomScrollView(
              controller: innerScrollController,
              slivers: <Widget>[
                _refreshIndicator(),
                SliverOverlapInjector(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                ),
                SliverFixedExtentList(
                  itemExtent: 48.0,
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return ListTile(title: Text('Item $index'));
                    },
                    childCount: 50,
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  Future<bool> refresh() async {
    print('wait for service to refresh dummy');
    await Future<void>.delayed(const Duration(milliseconds: 5000));
    return false;
  }

  _refreshIndicator() {
    return CupertinoSliverRefreshControl(
      onRefresh: () => refresh(),
      builder: (BuildContext context, RefreshIndicatorMode refreshState, double pulledExtent, double refreshTriggerPullDistance, double refreshIndicatorExtent,){
        return Container(color: Colors.red,);
      },
    );
  }
}

Answer 1

我能够通过使用 CupertinoSliverRefreshControl 的构建器属性来解决这个问题:

        CupertinoSliverRefreshControl(
          onRefresh: onRefresh,
          builder: (context, refreshState, pulledExtent, refreshTriggerPullDistance, refreshIndicatorExtent) {
            return Padding(
              padding: const EdgeInsets.only(top: 100),
              child: CupertinoSliverRefreshControl.buildRefreshIndicator(
                context,
                refreshState,
                pulledExtent,
                refreshTriggerPullDistance,
                refreshIndicatorExtent,
              ),
            );
          },
        ),

这GitHub comment也帮助我更好的理解了NestedScrollView的用法。