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(),
        ),
      ),
    );
  }
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值