flutter 上拉加载和下拉刷新-蒲公英云

flutter 上拉加载和下拉刷新

迷南。 2021-07-24 14:32 598阅读 0赞

上拉加载
    1、定义ScrollController控制器
        ScrollController scroll=new ScrollController();
    2、使用控制器监听滚动事件
        scroll.addListener((){
          if(scroll.position.pixels==scroll.position.maxScrollExtent){
                        ...
                第一个为当前滚动距离
                第二个为组件可滚动的最大距离
          }
        });
   3、在ListView添加controller参数,并赋值控制器
           controller: scroll,
   4、组件销毁的生命周期函数中销毁该方法,避免内存泄漏
           void dispose(){
            scroll.dispose();
        }
下拉刷新:
    1、将容器包裹在RefreshIndicator组件内
        RefreshIndicator(
              onRefresh: xx,   触顶回调
              child: 组件
          );
    2、设置onRefresh参数的回调函数
        返回类型和异步固定,设置后自带加载动图
          Future<void> xx() async{
                    ...
          }
    3、引入异步函数库
        import 'dart:async';

代码示例:
上拉加载:

import 'package:flutter/material.dart';
import 'txl/textItem-wl.dart';
import 'txl/txlHeader.dart';
import 'package:flutter/rendering.dart';
class Txl extends StatefulWidget { 
  @override
  _AppsState createState() => _AppsState();
}
class _AppsState extends State<Txl> { 
  @override
  Widget build(BuildContext context) { 
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: Text('通讯录'),
        actions: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 10),
            child:Icon(Icons.person_add) ,
          )
        ]
      ),
      body: Home(),
    );
  }
}
class Home extends StatefulWidget { 
  Home({ Key key}) : super(key: key);
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> { 
    //定义控制器
  ScrollController scroll=new ScrollController();
  @override
  void initState() { 
    // TODO: implement initState
    super.initState();
     //监听控制器 
    scroll.addListener((){ 
     if(scroll.position.pixels==scroll.position.maxScrollExtent){ 
        print("到底了");
      }
    });
  }
  @override
  Widget build(BuildContext context) { 
    return Container(
       child: Container(
        child: ListView(
        //设置控制器
          controller: scroll,
          children: <Widget>[
            ,,,
         ],
       ),
      ),
    );
  }

下拉刷新：

import 'package:flutter/material.dart';
import 'dart:async';
class Fx extends StatefulWidget { 
  @override
  _AppsState createState() => _AppsState();
}
class _AppsState extends State<Fx> { 
  @override
  Widget build(BuildContext context) { 
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: Text('发现'),
      ),
      body: Home()
    );
  }
}
class Home extends StatefulWidget { 
  Home({ Key key}) : super(key: key);
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> { 
    //下拉刷新回调
  Future<void> refresh() async{ 
    print('下拉刷新');
  }
  @override
  Widget build(BuildContext context) { 
      //触发下拉刷新的组件
    return RefreshIndicator(
      onRefresh: refresh,
      child:  Container(
       child: ListView(
        // controller: scroll,
         children: <Widget>[
          Text('bb',style: TextStyle(fontSize: 80),),
          Text('bb',style: TextStyle(fontSize: 80),),
          Text('bb',style: TextStyle(fontSize: 80),),
          Text('bb',style: TextStyle(fontSize: 80),),
          Text('bb',style: TextStyle(fontSize: 80),),
          Text('bb',style: TextStyle(fontSize: 80),),
          Text('bb',style: TextStyle(fontSize: 80),),
         ],
       ),
    ),
    );
  }
}