Flutter：如何在SliverAppBar中使用RefreshIndicator

Question

我正在尝试向CustomScrollView添加刷新指示器。有可能吗？这是代码示例：

CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        title: Text('POSTAPP'),
        centerTitle: true,
        floating: true,
        pinned: false,
      ),
      SliverList(
          delegate: SliverChildBuilderDelegate(_createPostItem,
              childCount: postRepo.posts.length))
    ],
  );

Answer 1

只有这样：

RefreshIndicator(child: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('POSTAPP'),
            centerTitle: true,
            floating: true,
            pinned: false,
          ),
          SliverList(
              delegate: SliverChildBuilderDelegate(_createPostItem,
                  childCount: postRepo.posts.length))
        ],
      ), onRefresh: () => Future.value(true));

SliverList 不可滚动，因此您无法将其包装在 RefreshIndicator 中

Answer 2

如果您不一定要限制使用CustomScrollView，则可以通过以下方法实现所需的功能NestedScrollView：

@override
Widget build(BuildContext context) {
  return NestedScrollView(
    headerSliverBuilder: (context, innerBoxScrolled) => [
          SliverAppBar(
            title: Text('POSTAPP'),
            centerTitle: true,
            floating: true,
            pinned: false,
          ),
        ],
    body: RefreshIndicator(
      onRefresh: _loadMorePosts,
      child: ListView.builder(
        itemBuilder: _createPostItem,
        itemCount: _postsCount,
      ),
    ),
  );
}

Answer 3

对于任何回到这个问题的人，我找到了一个使用包pull_to_refresh 的解决方案。

final RefreshController _refreshController = RefreshController();

Future<void> _onRefresh() async {
  await Future<void>.delayed(const Duration(milliseconds: 1000));
  _refreshController.refreshCompleted();
}

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      SliverAppBar(
        title: Text('Title'),
        centerTitle: true,
        floating: true,
        pinned: false,
      ),
      SliverFillRemaining(
        child: SmartRefresher(
          controller: _refreshController,
          onRefresh: _onRefresh,
          // ListView, CustomScrollView, etc. here
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: 200,
                  color: Colors.red,
                ),
                Container(
                  height: 200,
                  color: Colors.blue,
                ),
                Container(
                  height: 200,
                  color: Colors.yellow,
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  );
}

Answer 4

您可以CupertinoSliverRefreshControl在条子列表中使用，您需要申请physics: BouncingScrollPhysics()到您的CustomScrollView.

例子：

    return Scaffold(
      body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(),
          CupertinoSliverRefreshControl(
            onRefresh: () => refreshList(),
          ),
          SliverList(delegate: delegate),
        ],
      ),
    );

在上面的示例中，它将显示RefreshIndicator在AppBar和之间ListView。