美文网首页Flutter
flutter列表页面模板:支持下拉刷新、分页加载、加载中、数据

flutter列表页面模板:支持下拉刷新、分页加载、加载中、数据

作者: 咪神 | 来源:发表于2020-06-12 14:12 被阅读0次
    import 'package:flutter/material.dart';
    
    class Test1Page extends StatefulWidget {
      @override
      _Test1PageState createState() {
        return _Test1PageState();
      }
    }
    
    class _Test1PageState extends State<Test1Page> {
      ScrollController _scrollController = ScrollController();
      bool isLoading = true;//是否加载中
      bool isLoadOk = false;//是否加载完成
      var list = List<Object>();
    
      @override
      void initState() {
        super.initState();
        _getData(true); //获取数据
        _scrollController.addListener(() {
          if (_scrollController.position.pixels ==
              _scrollController.position.maxScrollExtent) {
            _getMore(); //加载更多数据
          }
        });
      }
    
      @override
      void dispose() {
        super.dispose();
        _scrollController.dispose();
      }
    
      void _getMore() {
        if (isLoading) {
          return;
        } else {
          _getData(false);
        }
      }
    
      void _getData(bool isRefresh) {//是否刷新
        setState(() {
          isLoading = true;
    
          //网络成功后
          if (isRefresh) {
            list.clear();
          }
          //添加list数据
          isLoading = false;
          isLoadOk = true;
        });
      }
    
      Future<Null> _refresh() async {
        await _getData(true);
        return;
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.red,
            title: Text(
              "标题",
            ),
          ),
          body: RefreshIndicator(
            onRefresh: _refresh,
            child: Container(
                color: Color(0xffefefef),
                width: double.infinity,
                alignment: Alignment.center,
                height: double.infinity,
                child: list.length == 0
                    ? (isLoadOk
                    ? Text(
                  "暂无数据",
                  style: TextStyle(color: Color(0xff666666), fontSize: 18),
                )
                    : new CircularProgressIndicator(
                  strokeWidth: 4.0,
                  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                ))
                    : new ListView.builder(
                    itemCount: list.length,
                    controller: _scrollController,
                    itemBuilder: (BuildContext context, int position) {
                      return Text("");
                    })),
          ),
        );
      }
    }
    

    相关文章

      网友评论

        本文标题:flutter列表页面模板:支持下拉刷新、分页加载、加载中、数据

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