颤振：使用 RefreshIndicator 时没有刷新指示器

Posted 2023-02-22

【中文标题】颤振：使用 RefreshIndicator 时没有刷新指示器

【英文标题】：flutter: no refresh indicator when using RefreshIndicator

【发布时间】：2019-05-31 17:52:05

【问题描述】：

我将 RefreshIndicator 添加到我的页面，但拉动刷新时没有可见的指示器。代码如下：

class HomePage extends StatefulWidget 
  HomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<HomePage> 

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: LocalGalleryTab(),
    );
  


class LocalGalleryTab extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return _LocalGalleryState();
  


class _LocalGalleryState extends State<LocalGalleryTab> 
  @override
  Widget build(BuildContext context) 
    return new Container(child: new Center(
      child: new RefreshIndicator(
        child: Text("Local Gallery"),
        onRefresh: _refreshLocalGallery,
      ),
    ));
  

  Future<Null> _refreshLocalGallery() async
    print('refreshing stocks...');

  

如何使用刷新指示器？颤振doc 没有提供太多信息。

【参考方案1】：

使用AlwaysScrollableScrollPhysics() 将确保滚动视图始终是可滚动的，因此可以触发RefreshIndicator。

现在我想用BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics) 而不仅仅是AlwaysScrollableScrollPhysics() 滚动物理创建滚动物理。因为 BouncingScrollPhysics 适用于反弹的短列表。现在需要包含 AlwaysScrollableScrollPhysics 才能获得预期的行为。

RefreshIndicator(
    onRefresh: _onRefresh,
    child: ListView(
      padding: EdgeInsets.all(8.0),
      physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
      children: _listData.map((i) 
        return ListTile(
          title: Text("Item $i"),
        );
      ).toList(),
    )
);

【讨论】：

这解决了如果 RefreshIndicator 在短列表上不起作用的问题

你实际上可以使用物理：AlwaysScrollableScrollPhysics()。这将在下拉刷新指​​示器时激活它，无论列表是短还是长都没有关系。还要确保 onRefresh() 回调中的任务是可等待的或 Future void

如果您使用的是SingleChildScrollView，请不要忘记添加clipBehavior: Clip.none，以避免在向下滚动时剪切孩子。

【参考方案2】：

根据设计，RefreshIndicator 与 ListView 一起使用。

但如果您想将RefreshIndicator 与不可滚动小部件一起使用，您可以将小部件包装到Stack 和ListView：

RefreshIndicator(
  onRefresh: () ,
  child: Stack(
    children: <Widget>[ListView(), YOUR_CHILD_WIDGET],
  ),
),

【讨论】：

你的解决方案是最好的。

【参考方案3】：

您需要在RefreshIndicator 中添加滚动子项 见下面的例子

class HomePage extends StatefulWidget 
  HomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<HomePage> 

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: LocalGalleryTab(),
    );
  


class LocalGalleryTab extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return _LocalGalleryState();
  


class _LocalGalleryState extends State<LocalGalleryTab> 
  @override
  Widget build(BuildContext context) 
    return new Container(child: new Center(
      child: new RefreshIndicator(
        child: ListView(
          children: List.generate(50,  (f) => Text("Item $f")),
        ),
        onRefresh: _refreshLocalGallery,
      ),
    ));
  

  Future<Null> _refreshLocalGallery() async
    print('refreshing stocks...');

  

【讨论】：

它在 ListView.builder 上不起作用！有其他选择吗？

只是补充一点：当项目占据的高​​度小于父高度时，刷新指示器可能不起作用。这是因为当项目占用的空间小于父项时不允许滚动，并且刷新指示器仅在子项允许滚动时才允许刷新。检查@Paresh Mangukiya 的答案