20-flutter下拉刷新与上拉加载

本文介绍如何在Flutter中实现下拉刷新和上拉加载更多功能。使用RefreshIndicator控件实现下拉刷新,通过监听ScrollController实现上拉加载。示例代码展示了具体实现方法及数据更新。
1 RefreshIndicator 下拉刷新控件

下拉刷新的时候会回调 onRefresh 方法

RefreshIndicator(
    onRefresh: _handleRefresh,
    child: ListView(
        children: _buildList(),
    ),
),
2 上拉加载多

上拉加载更多的时候

@override 
    void initState() { 
      super.initState();
      _scrollController.addListener((){
          // 如果滑动到最大的可滚动位置
          if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
            // 加载更多数据
            _loadData();
          }
      });
    }
 
import 'dart:core';

import 'package:flutter/material.dart';

List<String> city_names =  ["北京","上海","广州","深圳","南京","郑州","武汉","长江","黄河","哈尔滨","成都","重庆"];



void main() => runApp(MyApp());
  
class MyApp extends StatefulWidget {
  
  @override
  _MyAppState  createState() => _MyAppState();

}


class _MyAppState extends State<MyApp>
{ 

    // 监听上拉刷新 设置一个控制器
    ScrollController _scrollController = ScrollController();

    @override 
    void initState() { 
      super.initState();
      _scrollController.addListener((){
          // 如果滑动到最大的可滚动位置
          if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
            // 加载更多数据
            _loadData();
          }
      });
    }

    // 加载更多数据
    _loadData() async{
        await Future.delayed(Duration(seconds: 2));
        setState(() {
            List<String> list = List<String>.from(city_names);
            list.addAll(city_names);
            city_names = list;
        });
    }

    // 销毁
    void dispose(){
      _scrollController.dispose();
      super.dispose();      
    }

    Widget _item(String city){
        return Container(
          height: 80,
          margin: EdgeInsets.only(bottom: 5),
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.teal),
          child: Text(city,style: TextStyle(fontSize: 30,color: Colors.white)),
        );
      }

    List<Widget> _buildList(){
        return city_names.map((city) => _item(city)).toList();    
    }

    Future<Null> _handleRefresh() async {
      await Future.delayed(Duration(seconds: 2));
      setState(() {
          city_names = city_names.reversed.toList();
      });

      return null;
    }

    @override     
    Widget build(BuildContext context) {
      return MaterialApp(
        title: "刷新加载",
        home: Scaffold(
          appBar: AppBar(
          title: Text("下拉刷线"),
        ),
        body:RefreshIndicator(          
          onRefresh: _handleRefresh,
          child: ListView(
            // 设置一个监听控制器
            controller: _scrollController,
            children: _buildList(),
          ),
        ),
        )
      );
    }
  
}

在这里插入图片描述

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值