侧边栏壁纸
  • 累计撰写 29 篇文章
  • 累计创建 18 个标签
  • 累计收到 2 条评论

目 录CONTENT

文章目录

flutter自带的上拉加载和下拉刷新

bsdlzg
2022-10-20 / 0 评论 / 0 点赞 / 135 阅读 / 665 字

    本篇主要记录的是flutter中的RefreshIndicator组件,它的主要作用是用作列表的上拉加载和下拉刷新。该组件的flutter中自带的组件,所以在交互性上,需要我们自己加一些消息的提示,比如上拉加载是要提示‘正在加载’等信息,但本篇不考虑这个,首先是实现它的主要功能,那就是上拉加载和下拉刷新。
    我们先来看下效果图,从图中我们可以看到,当下拉刷新时,会有新的数据‘7’加载出来,在实践的应用中,可以将数据重载,再用setState方法,即可完成页面数据的刷新。当上拉加载时,将有数字‘8’添加到列表的最后,实现加载数据。

    接下来具体的代码实现:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  //是否正在请求新数据
  bool isLoading = false;

  //加载到listview中的数据list
  List<String> list = new List();  

  //下拉加载的控制器
  ScrollController scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    //数据初始化
    list.add("1");
    list.add("2");
    list.add("3");
    list.add("4");
    list.add("5");
    list.add("6");

    //下拉加载控制器的监听
    scrollController.addListener(() {
      if (scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) {
        print('滑动到了最底部${scrollController.position.pixels}');
        setState(() {
          list.add("8");
        });
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    //手动停止滑动监听
    scrollController.dispose();
  }

   /**
   * 模拟下拉刷新
   */
  Future <void> _onRefresh() async {
    if (isLoading) {
      return;
    }
    setState(() {
       list.add("7");
    });
  }

  @override
  Widget build(BuildContext context) {
    //自适应的第三方引用,详细的自适应,请查阅本人的相关flutter的ScreenUtil自适应,那里会有详细的介绍和应用
    ScreenUtil.instance = ScreenUtil(width: 1080, height: 1920)..init(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RefreshIndicator(
        onRefresh: _onRefresh,
        child: ListView.builder(
          controller: scrollController,
          itemCount: list.length,
          itemBuilder: (BuildContext context,int position){
            return showList(position);
          },
        ),
      ),
    );
  }

  //显示数据的自定义组件
  Widget showList(int position){
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.only(top: ScreenUtil.getInstance().setHeight(50),bottom: ScreenUtil.getInstance().setHeight(50)),
      child: Text(list[position],style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(45)),),
    );
  }
}

    实现上拉加载和下拉刷新,主要靠的时2个方法,一个是在RefreshIndicator组件中onRefresh,另一个是ListView.builder中的controller。onRefresh实现下拉刷新,controller实现上拉加载。

0

评论区