美文网首页Flutter圈子FlutterFlutter中文社区
Flutter中ScrollView及其子类(ListView等

Flutter中ScrollView及其子类(ListView等

作者: Brant白叔 | 来源:发表于2018-04-23 18:43 被阅读197次

    先丢一个github的demo代码地址
    移动开发发展到现在,下拉刷新是个必不可少的功能了。

    Flutter里面的ScrollView及其子view都可以添加下拉刷新功能,只要在view的上层再包裹一层RefreshIndicator,这个下拉刷新是MD风格的。

    几个要注意的点(以ListView为例)

    • 如果ListView的内容不足一屏,要设置ListView的physics属性为const AlwaysScrollableScrollPhysics()
    • onRefresh方法是接受一个Future<Null>的参数
    • 通过代码触发下拉 _refreshIndicatorKey.currentState.show();

    声明一个key来保存控件

    final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey<
          RefreshIndicatorState>();
    
    body: new RefreshIndicator(
            key: _refreshIndicatorKey,
            onRefresh: _getData, // onRefresh 参数是一个 Future<Null> 的回调
            child: new ListView.builder(
              // 这句是在list里面的内容不足一屏时,list可能会滑不动,加上就一直都可以滑动
              physics: const AlwaysScrollableScrollPhysics(),
              itemCount: this.list.length,
              itemBuilder: (_, int index) => _createItem(list[index]),
            ),
          ),
    
    Future<Null> _getData() {
        final Completer<Null> completer = new Completer<Null>();
    
        // 启动一下 [Timer] 在3秒后,在list里面添加一条数据,关完成这个刷新
        new Timer(Duration(seconds: 3), () {
          // 添加数据,更新界面
          setState(() {
            list.add("新加数据${list.length}");
          });
    
          // 完成刷新
          completer.complete(null);
        });
    
        return completer.future;
      }
    

    关于学习

    flutter的学习文章都整理在这个github仓库

    相关文章

      网友评论

        本文标题:Flutter中ScrollView及其子类(ListView等

        本文链接:https://www.haomeiwen.com/subject/ornllftx.html