美文网首页
flutter 上拉加载实现的一种方式(不用控制器)

flutter 上拉加载实现的一种方式(不用控制器)

作者: 有一种感动叫做丶只有你懂 | 来源:发表于2019-10-26 14:08 被阅读0次

1.概念
上拉加载可以用 ScrollController实现,在这里不再描述,下面实现一种利用ListView.Builder实现的上拉加载。

2.代码

import 'package:flutter/material.dart';

class CirclePage extends StatefulWidget {
  @override
  _InfiniteListViewState createState() => new _InfiniteListViewState();
}

class _InfiniteListViewState extends State<CirclePage> {
  static const loadingTag = "##loading##"; //表尾标记
  var _words = <String>[loadingTag];
  
  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: _words.length,
      itemBuilder: (context, index) {
         
        //如果到了表尾
        if (_words[index] == loadingTag) {
          //不足100条,继续获取数据
          if (_words.length - 1 < 100) {
            print('走进了');
            //获取数据
            _retrieveData();
            //加载时显示loading
            return Container(
              padding: const EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(strokeWidth: 2.0)
              ),
            );
          } else {
            //已经加载了100条数据,不再获取数据。
            return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16.0),
                child: Text("没有更多了", style: TextStyle(color: Colors.grey),)
            );
          }
        }
      
        return ListTile(title: Text(_words[index]));
      },
      separatorBuilder: (context, index) => Divider(height: .0),
    );
  }

  void _retrieveData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      _words.insertAll(_words.length - 1,
          //每次生成20个单词
          ['a','b','c','d','e','f','i']
      );
      print('这是数据$_words');
      setState(() {
   
      });
    });
  }

}

3.讲解
这个操作利用ListView.Builder的特性(只有这个元素出现在可视区域内,才会被Builder),_words开始的时候添加了一个字符,这个字符就是滑动到底部的标志,也就是说当这个页面初始化的时候,按照我这个高度会执行三次,其次就是每当_words[index] == loadingTag的时候,就意味着滑动到底部了,你就可以开始你自己的业务逻辑,

相关文章

网友评论

      本文标题:flutter 上拉加载实现的一种方式(不用控制器)

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