Flutter：stretch=true时如何结合SliverAppBar使用CupertinoSliverRefreshControl

问题场景 #

我在开发Flutter界面时，需要同时实现两个交互效果：顶部下拉时SliverAppBar可拉伸展开，且刷新指示器显示在AppBar下方、其他内容之前。单独实现任意一个功能都很简单，但同时开启stretch: true的SliverAppBar和CupertinoSliverRefreshControl时，只有AppBar会响应下拉拉伸，刷新指示器完全不显示。

理想状态是下拉距离由两者共享，比如下拉100px时，AppBar拉伸30px、刷新指示器展开70px，最好能精细控制分配比例。

问题复现代码 #

以下代码中，注释掉SliverAppBar的stretch属性或设为false，刷新指示器就能正常工作，但AppBar会失去拉伸能力：

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

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics()),
        slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            stretch: true, // 注释掉或设为false，CupertinoSliverRefreshControl即可正常工作
            expandedHeight: 100,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'Home',
              ),
            ),
          ),
          CupertinoSliverRefreshControl(
            onRefresh: () async {},
          ),
          SliverToBoxAdapter(
            child: Container(
              color: Colors.red,
              height: 100,
            ),
          ),
        ],
      ),
    );
  }
}

2023年8月1日更新 #

我已经写出一段模拟预期行为的代码，其中绿色容器仅在下拉时显示，最大高度100px，且能和SliverAppBar同时展开，证明这种交互逻辑是可行的。但我不想从头编写自定义的CupertinoSliverRefreshControl，希望能有现成方案节省开发时间：

import 'dart:math';

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final ScrollController scrollController;

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController()
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        controller: scrollController,
        physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics()),
        slivers: <Widget>[
          const SliverAppBar(
            expandedHeight: 100,
            pinned: true,
            stretch: true,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'Home',
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              color: Colors.green,
              alignment: Alignment.center,
              height: min(
                  100.0,
                  min(
                          0,
                          scrollController.hasClients
                              ? scrollController.offset
                              : 0)
                      .abs()
                      .toDouble()),
              child: const Text('I will only appear during overscroll'),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              color: Colors.red,
              alignment: Alignment.center,
              height: 100,
              child: const Text('I am visible all the time'),
            ),
          ),
        ],
      ),
    );
  }
}

解决方案：自定义Sliver实现下拉偏移共享 #

核心思路是通过监听ScrollController的下拉偏移量，手动分配偏移给SliverAppBar和刷新指示器，避免原生控件的事件抢占问题。以下是完整可运行代码，支持自定义比例分配，并集成了Cupertino风格的刷新指示器：

import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class StretchyRefreshPage extends StatefulWidget {
  const StretchyRefreshPage({Key? key}) : super(key: key);

  @override
  State<StretchyRefreshPage> createState() => _StretchyRefreshPageState();
}

class _StretchyRefreshPageState extends State<StretchyRefreshPage> {
  late final ScrollController _scrollController;
  // 自定义下拉偏移分配比例：AppBar占30%，刷新指示器占70%
  final double _appBarStretchRatio = 0.3;
  final double _refreshIndicatorRatio = 0.7;
  // 刷新指示器最大展开高度
  final double _maxRefreshHeight = 100;
  // 刷新状态标记
  bool _isRefreshing = false;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()
      ..addListener(_onScroll);
  }

  void _onScroll() {
    // 仅在非刷新状态下更新UI
    if (!_isRefreshing) {
      setState(() {});
    }
  }

  // 模拟刷新操作
  Future<void> _onRefresh() async {
    setState(() => _isRefreshing = true);
    await Future.delayed(const Duration(seconds: 2));
    setState(() => _isRefreshing = false);
    // 刷新完成后回到顶部
    if (_scrollController.hasClients) {
      _scrollController.animateTo(
        0,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 获取下拉overscroll偏移量（负数表示下拉）
    final overscroll = _scrollController.hasClients
        ? _scrollController.offset
        : 0.0;
    final totalOverscroll = max(0.0, -overscroll);

    // 计算AppBar拉伸偏移和刷新指示器高度
    final appBarStretchOffset = totalOverscroll * _appBarStretchRatio;
    final refreshIndicatorHeight = min(
      _maxRefreshHeight,
      totalOverscroll * _refreshIndicatorRatio,
    );

    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        physics: const BouncingScrollPhysics(
          parent: AlwaysScrollableScrollPhysics(),
        ),
        slivers: [
          // 自定义拉伸SliverAppBar
          SliverAppBar(
            pinned: true,
            expandedHeight: 100,
            stretchTriggerOffset: appBarStretchOffset,
            stretch: true,
            onStretchTrigger: _isRefreshing ? null : _onRefresh,
            flexibleSpace: const FlexibleSpaceBar(
              centerTitle: true,
              title: Text('Home'),
            ),
          ),
          // 刷新指示器容器
          if (totalOverscroll > 0 || _isRefreshing)
            SliverToBoxAdapter(
              child: SizedBox(
                height: _isRefreshing ? _maxRefreshHeight : refreshIndicatorHeight,
                child: const CupertinoActivityIndicator(
                  radius: 16,
                ),
              ),
            ),
          // 页面内容列表
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Container(
                height: 100,
                color: index % 2 == 0 ? Colors.red[100] : Colors.blue[100],
                alignment: Alignment.center,
                child: Text('列表项 $index'),
              ),
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

关键实现细节 #

1. 比例分配：通过_appBarStretchRatio和_refreshIndicatorRatio可精确控制下拉距离在两个组件间的分配比例。
2. 状态控制：刷新过程中固定指示器高度为最大值，避免滚动干扰；刷新完成后自动回滚到顶部。
3. 事件兼容：利用SliverAppBar的onStretchTrigger触发刷新，同时通过ScrollController监听偏移量更新UI，解决了原生控件的事件抢占问题。

内容的提问来源于stack exchange，提问作者Red Ninja Cat