pull_to_refresh 下拉刷新组件

330 阅读1分钟
flutter pub add pull_to_refresh

pub.dev/packages/pu…

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';


class ListViewFive extends StatefulWidget {
  const ListViewFive({super.key});

  @override
  State<ListViewFive> createState() => _ListViewFiveState();
}

class _ListViewFiveState extends State<ListViewFive> {
  List list = [];
  RefreshController refreshController = new RefreshController();

  Widget defaultHeader = defaultTargetPlatform == TargetPlatform.iOS ? 
  ClassicHeader(
    idleText: "下拉刷新",
    releaseText: "释放刷新",
    refreshingText: "刷新中",
    failedText: "刷新失败",
    completeText: "刷新成功",
  ):MaterialClassicHeader();

  final LoadIndicator defaultFooter = ClassicFooter(
    failedText: "加载失败",
    idleText: "上拉加载更多",
    canLoadingText: "取消加载",
    loadingText: "加载中",
    noDataText: "暂无等多数据",
  );

  num offserFlag = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(int i = 0;i<30;i++){
      list.add("item $i");
      

    }
    
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text("下拉刷新组件SmartRefresher"),
      ),
      
      // 用来加载 列表式布局
      // 刷新组件
      body:SmartRefresher(
        header: defaultHeader,
        footer: defaultFooter,
        // 是否可以上拉加载
        enablePullUp: true,
        // 是否可以下拉刷新
        enablePullDown: true,
        // 控制器
        controller: refreshController,
        child: buildListView(),
        onRefresh: (){
          print("下拉刷新回调");
          Future.delayed(new Duration(microseconds: 3000),(){
            refreshController.refreshCompleted();
          });
        },
        onLoading: (){
          print("上拉刷新回调");
          Future.delayed(new Duration(microseconds: 3000),(){
            refreshController.loadComplete();
          });
        },
        )
    );
  }

  

  // 用来加载 列表式布局 自带分割线
  Widget buildListView(){
    return ListView.builder(
         // 用来构建条目
        // index 索引
        itemBuilder: (context,index){
          return Container(
            margin: EdgeInsets.all(5),
            padding: EdgeInsets.all(5),
            color: Colors.grey[300],
            height: 88,
            child: Text(list[index]),
          );
        },
        // 个数
        itemCount: list.length ,
      );
  }

}