ListView通过flutter实现

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

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(),
        ),
      ),
    );
  }
 }
posted @   飞航之梦  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示