ListView通过flutter实现

ゝ一纸荒年。 2022-02-24 15:00 210阅读 0赞

下面代码中都有详细的注释，我这里就不多写了

import 'package:flutter/material.dart';
     void main()=>runApp(MyApp());
    
     class MyApp extends StatelessWidget{ 
       @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return new MaterialApp(
          title: "listview",
          home: MyHomePage(),
        );
      }
     }
     class MyHomePage extends StatefulWidget{ 
       @override
      _MyHomePageState createState() { 
        // TODO: implement createState
        return _MyHomePageState();
      }
     }
     class _MyHomePageState extends State<MyHomePage>{ 
      //使用list.generate()构造出了一个List列表
      List<int> items = List.generate(10, (i)=>i);
      ScrollController _scrollController = new ScrollController();
      bool isPerformingRequest = false; //是否有请求在进行
    
      /**
       * 当用户滚到最底部的时候我们调用这个方法
       */
      Future<List<int>> fakeRequest(int from, int to) async{ 
        return Future.delayed(Duration(seconds: 2),(){ 
            return List.generate(to-from,(i)=>i+from);
        });
      }
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return new Scaffold(
          appBar: AppBar(
            title: Text("listView"),
          ),
          body: ListView.builder(
            controller: _scrollController,
            itemCount: items.length,
            itemBuilder: (context, it){ 
                print("$it----${items.length}");
            if(it == items.length-1){ 
              print("helloo....");
              return _buildProgressIndicator();
            }else{ 
                return ListTile(
              //主标题
              title: new Text("number$it"),
              //最右边的图标
              trailing: Icon(Icons.forward),
              //做左边的图标
              leading: Icon(Icons.arrow_left),
              //副标题
              subtitle: Text("副标题"),
              
              onLongPress: (){ 
                 print("click.....$it") ;
              },
              
            );
            }
            },
          ),
        );
      }
      _getMoreData() async{ 
        if(!isPerformingRequest){ //这里判断是否有请求
         //调用 setState()会马上调用build这个函数，重新绘制界面
          setState(() { 
           isPerformingRequest = true; 
          });
          List<int> newExtries  = await fakeRequest(items.length,items.length+10);
          //访问网络处理数据的时候我们可能碰到空的数据
          if(newExtries.isEmpty){ 
            double edge = 50.0;
            double offsetFromBottom = _scrollController.position.maxScrollExtent - _scrollController.position.pixels;
            if(offsetFromBottom<edge){ 
              print("${_scrollController.offset}---%edge---$offsetFromBottom");
              _scrollController.animateTo(
                _scrollController.offset-(edge-offsetFromBottom),
                duration: new Duration(milliseconds: 500),
                curve: Curves.easeOut,
              );
            }
          }
          setState(() { 
            
           items.addAll(newExtries);
           isPerformingRequest = false;
          });
        }
      }
    
      //初始化的方法，相当于Android中的onCreate
      @override
      void initState() { 
        // TODO: implement initState
        super.initState();
        _scrollController.addListener((){ 
          if(_scrollController.position.pixels ==_scrollController.position.maxScrollExtent){ 
            _getMoreData();
          }
        });
      }
      //生命周期中的方法  相当于onDestory()方法
      @override
      void dispose() { 
        // TODO: implement dispose
        super.dispose();
        _scrollController.dispose();
      }
    
      Widget _buildProgressIndicator(){ 
        return new Padding(
          padding: const EdgeInsets.all(8.0),
          child: new Center(
            child: new Opacity(
              opacity: isPerformingRequest?1.0:0.0,
              child: new CircularProgressIndicator(),
            ),
          ),
        );
      }
     }