Question

我正在使用软件包incrementally_loading_listview从Firestore中分页数据。我正在custom-scroll-view中使用它。问题是我必须将其包装在SliverFillRemaining小部件中才能显示我的数据。结果，refresh-indicator现在无法正常工作。我正在使用棉条，因为我也会有棉条。

我以前使用SliverListBuilderDelegate通过scroll-controller动态加载数据。问题在于，只要我到达列表的顶部，就会调用_getMoreProducts（这是我不希望的，我只想在到达底部时才加载数据），这会导致滚动滚动（如果我再次立即向下滚动）。 Refresh-indicator使用此解决方案。如果SliverFillRemaining不起作用，我将使用此方法。

这是我的SliverFillRemaining代码。 refresh-indicator不起作用。

      Scaffold(
        backgroundColor: Color(0xFFFAF5F2),
        key: _scaffoldKey,
        body: RefreshIndicator(
          onRefresh: _refresh,
          child: CustomScrollView(
            controller: _scrollController,
            slivers: <Widget>[
              SliverFillRemaining(
          child: IncrementallyLoadingListView(
            hasMore: () => _moreProductsAvailable,
            itemCount: () => _products.length,
            loadMore: () async {
              await _getMoreProducts();
            },
            loadMoreOffsetFromBottom: 2,
            itemBuilder: (context, index) {
              return Post.fromDocument(_products[index]);
                },
               ),
             ) 
            ],
          ),
        ));

这是我先前使用SliverListBuilder的代码。每当我滚动顶部时，都会调用_getMoreProducts。

@override
  void initState() {
    super.initState();
   _getProducts();
    _scrollController.addListener(() {
      double maxScroll = _scrollController.position.maxScrollExtent;
      double currentScroll = _scrollController.position.pixels;
      double delta = MediaQuery.of(context).size.height * 0.25;

      if (maxScroll - currentScroll <= delta) {
        _getMoreProducts();
      }
    });
  }

 @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
        body: RefreshIndicator(
      onRefresh: _refresh,
      child: CustomScrollView(
        slivers: <Widget>[
         SliverList(
          delegate: SliverChildBuilderDelegate((BuildContext context, 
           index) {
            return Dismissible(
                key: ObjectKey(_products[index]),
                background: Container(color: Colors.red),
                onDismissed: (direction) {
                  var item = _products.elementAt(index);
                  setState(() {
                    _products.removeAt(index);
                  });
                  Scaffold.of(context).showSnackBar(
                    SnackBar(
                      content: Text("product removed"),
                      action: SnackBarAction(
                        label: "UNDO",
                        onPressed: (){
                          setState(() {
                            _products.insert(index, item);
                          });
                        },
                      ),
                    ),
                  );
                },
                child: Product.fromDocument(_products[index]));
          }, childCount: _products.length),
        )
        ],
      ),
    ));
  }

所以，我想要一个既可以分页又可以使用刷新指示器进行刷新的小工具。

Answer 1

好吧，我将refresh-indicator添加到SliverFillRemaining的子代中解决了我的问题。

Scaffold(
        backgroundColor: Color(0xFFFAF5F2),
        key: _scaffoldKey,
        body: CustomScrollView(
            controller: _scrollController,
            slivers: <Widget>[
             SliverFillRemaining(
          child: RefreshIndicator(
            onRefresh: _refresh,
            child: IncrementallyLoadingListView(
              hasMore: () => _moreProductsAvailable,
              itemCount: () => _products.length,
              loadMore: () async {
                await _getMoreProducts();
              },
              loadMoreOffsetFromBottom: 2,
              itemBuilder: (context, index) {
                return Product.fromDocument(_products[index]);
              },
            ),
          ),
        )
            ],

        ));

SliverFillRemaining不允许拉动刷新指示器工作。如何解决这个问题？

1 个答案: