【问题标题】:flutter: no refresh indicator when using RefreshIndicator颤振:使用 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 没有提供太多信息。

【问题讨论】:

    标签: flutter dart refresh pull-to-refresh indicator


    【解决方案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 的答案
    猜你喜欢
    • 1970-01-01
    • 2021-11-11
    • 2023-04-11
    • 1970-01-01
    • 2021-12-19
    • 1970-01-01
    • 1970-01-01
    • 2020-07-29
    • 2018-10-16
    相关资源
    最近更新 更多