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

如果不一定要使用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 2

只有这样：

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 3

我设法通过创建一个来自 flutter/lib/src/material/refresh_indicator.dart 的自定义小部件来做到这一点。并修改以下代码（ps我只添加了变量initialDisplacement）

double initialDisplacement = 100.0;
return Stack(
  children: <Widget>[
    child,
    if (_mode != null) Positioned(
      top: _isIndicatorAtTop ? initialDisplacement : null,
      bottom: !_isIndicatorAtTop ? 0.0 : null,
      left: 0.0,
      right: 0.0,
      child: SizeTransition(
        axisAlignment: _isIndicatorAtTop ? 1.0 : -1.0,
        sizeFactor: _positionFactor, // this is what brings it down
        child: Container(
          padding: _isIndicatorAtTop
            ? EdgeInsets.only(top: widget.displacement)
            : EdgeInsets.only(bottom: widget.displacement),
          alignment: _isIndicatorAtTop
            ? Alignment.topCenter
            : Alignment.bottomCenter,
          child: ScaleTransition(
            scale: _scaleFactor,
            child: AnimatedBuilder(
              animation: _positionController,
              builder: (BuildContext context, Widget child) {
                return RefreshProgressIndicator(
                  semanticsLabel: widget.semanticsLabel ?? MaterialLocalizations.of(context).refreshIndicatorSemanticLabel,
                  semanticsValue: widget.semanticsValue,
                  value: showIndeterminateIndicator ? null : _value.value,
                  valueColor: _valueColor,
                  backgroundColor: widget.backgroundColor,
                  strokeWidth: widget.strokeWidth,
                );
              },
            ),
          ),
        ),
      ),
    ),
  ],
);

Flutter：如何在SliverAppBar中使用RefreshIndicator

3 个答案: