iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter实现下拉刷新和上拉加载更多
  • 322
分享到

Flutter实现下拉刷新和上拉加载更多

2024-04-02 19:04:59 322人浏览 八月长安
摘要

本文实例为大家分享了Flutter实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 效果 下拉刷新 如果实现下拉刷新,必须借助RefreshIndicator,在li

本文实例为大家分享了Flutter实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下

效果

下拉刷新

如果实现下拉刷新,必须借助RefreshIndicator,在listview外面包裹一层RefreshIndicator,然后在RefreshIndicator里面实现onRefresh方法。

body: movieList.length == 0
          ? new Center(child: new CircularProgressIndicator())
          : new RefreshIndicator(
              color: const Color(0xFF4483f6),
              //下拉刷新
              child: ListView.builder(
                itemCount: movieList.length + 1,
                itemBuilder: (context, index) {
                  if (index == movieList.length) {
                    return _buildProgreSSMoreIndicator();
                  } else {
                    return renderRow(index, context);
                  }
                },
                controller: _controller, //指明控制器加载更多使用
              ),
              onRefresh: _pullToRefresh,
            ),

onRefresh方法的实现_pullToRefresh,注意这里必须使用async 不然报错

 
  Future _pullToRefresh() async {
    currentPage = 0;
    movieList.clear();
    loadMoreData();
    return null;
  }

异步加载数据,注意:在Flutter中刷新数据使用的是setState,不然无效,数据不会刷新;数据的获取需要使用[]取值,不能使用对象“ . ”的取值方法!

//加载列表数据
loadMoreData() async {
    this.currentPage++;
    var start = (currentPage - 1) * pageSize;
    var url =
        "https://api.douban.com/v2/movie/$movieType?start=$start&count=$pageSize";
    Dio dio = new Dio();
    Response response = await dio.get(url);
    setState(() {
      movieList.addAll(response.data["subjects"]);
      totalSize = response.data["total"];
    });
  }

上拉加载更多

加载更多需要对ListView进行监听,所以需要进行监听器的设置,在State中进行监听器的初始化。

//初始化滚动监听器,加载更多使用
  ScrollController _controller = new ScrollController();

在构造器中设置监听

 //固定写法,初始化滚动监听器,加载更多使用
    _controller.addListener(() {
      var maxScroll = _controller.position.maxScrollExtent;
      var pixel = _controller.position.pixels;
      if (maxScroll == pixel && movieList.length < totalSize) {
        setState(() {
          loadMoreText = "正在加载中...";
          loadMoreTextStyle =
              new TextStyle(color: const Color(0xFF4483f6), fontSize: 14.0);
        });
        loadMoreData();
      } else {
        setState(() {
          loadMoreText = "没有更多数据";
          loadMoreTextStyle =
              new TextStyle(color: const Color(0xFF999999), fontSize: 14.0);
        });
      }
    });

在listView中添加监听controller方法

自此,Flutter如何实现下拉刷新和上拉加载更多完成…

整个列表页面代码参考如下:

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:douban/pages/movie/movieDetail.dart';

class MovieList extends StatefulWidget {
  String movieType;
  //构造器传递数据(并且接收上个页面传递的数据)
  MovieList({Key key, this.movieType}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new MovieListState(movieType: this.movieType);
  }
}

class MovieListState extends State<MovieList> {
  String movieType;
  String typeName;
  List movieList = new List();
  int currentPage = 0; //第一页
  int pageSize = 10; //页容量
  int totalSize = 0; //总条数
  String loadMoreText = "没有更多数据";
  TextStyle loadMoreTextStyle =
      new TextStyle(color: const Color(0xFF999999), fontSize: 14.0);
  TextStyle titleStyle =
      new TextStyle(color: const Color(0xFF757575), fontSize: 14.0);
  //初始化滚动监听器,加载更多使用
  ScrollController _controller = new ScrollController();

  
  MovieListState({Key key, this.movieType}) {
    //固定写法,初始化滚动监听器,加载更多使用
    _controller.addListener(() {
      var maxScroll = _controller.position.maxScrollExtent;
      var pixel = _controller.position.pixels;
      if (maxScroll == pixel && movieList.length < totalSize) {
        setState(() {
          loadMoreText = "正在加载中...";
          loadMoreTextStyle =
              new TextStyle(color: const Color(0xFF4483f6), fontSize: 14.0);
        });
        loadMoreData();
      } else {
        setState(() {
          loadMoreText = "没有更多数据";
          loadMoreTextStyle =
              new TextStyle(color: const Color(0xFF999999), fontSize: 14.0);
        });
      }
    });
  }

  //加载列表数据
  loadMoreData() async {
    this.currentPage++;
    var start = (currentPage - 1) * pageSize;
    var url =
        "Https://api.douban.com/v2/movie/$movieType?start=$start&count=$pageSize";
    Dio dio = new Dio();
    Response response = await dio.get(url);
    setState(() {
      movieList.addAll(response.data["subjects"]);
      totalSize = response.data["total"];
    });
  }

  @override
  void initState() {
    super.initState();
    //设置当前导航栏的标题
    switch (movieType) {
      case "in_theaters":
        typeName = "正在热映";
        break;
      case "coming_soon":
        typeName = "即将上映";
        break;
      case "top250":
        typeName = "Top250";
        break;
    }

    //加载第一页数据
    loadMoreData();
  }

  
  Future _pullToRefresh() async {
    currentPage = 0;
    movieList.clear();
    loadMoreData();
    return null;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      backgroundColor: Colors.white,
      appBar: new AppBar(
        leading: new IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed:null ,
        ),
        title: new Text(typeName != null ? typeName : "正在加载中...",
            style: new TextStyle(color: Colors.black)),
        backgroundColor: Colors.white,
      ),
      body: movieList.length == 0
          ? new Center(child: new CircularProgressIndicator())
          : new RefreshIndicator(
              color: const Color(0xFF4483f6),
              //下拉刷新
              child: ListView.builder(
                itemCount: movieList.length + 1,
                itemBuilder: (context, index) {
                  if (index == movieList.length) {
                    return _buildProgressMoreIndicator();
                  } else {
                    return renderRow(index, context);
                  }
                },
                controller: _controller, //指明控制器加载更多使用
              ),
              onRefresh: _pullToRefresh,
            ),
    );
  }

  
  Widget _buildProgressMoreIndicator() {
    return new Padding(
      padding: const EdgeInsets.all(15.0),
      child: new Center(
        child: new Text(loadMoreText, style: loadMoreTextStyle),
      ),
    );
  }

  
  renderRow(index, context) {
    var movie = movieList[index];
    var id = movie["id"];
    var title = movie["title"];
    var type = movie["genres"].join("、");
    var year = movie["year"];
    var score = movie["rating"]["average"];
    return new Container(
        height: 200,
        color: Colors.white,
        child: new InkWell(
          onTap: () {
            Navigator.of(context).push(new MaterialPageRoute(
                builder: (ctx) => new MovieDetail(movieId: id)));
          },
          child: new Column(
            children: <Widget>[
              new Container(
                height: 199,
                // color: Colors.blue,
                child: new Row(
                  children: <Widget>[
                    new Container(
                      width: 120.0,
                      height: 180.0,
                      margin: const EdgeInsets.all(10.0),
                      child: Image.network(movie["images"]["small"]),
                    ),
                    Expanded(
                      child: new Container(
                        height: 180.0,
                        margin: const EdgeInsets.all(12.0),
                        child: new Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            new Text(
                              "电影名称:$title",
                              style: titleStyle,
                              overflow: TextOverflow.ellipsis,
                            ),
                            new Text(
                              "电影类型:$type",
                              style: titleStyle,
                              overflow: TextOverflow.ellipsis,
                            ),
                            new Text(
                              "上映年份:$year",
                              style: titleStyle,
                              overflow: TextOverflow.ellipsis,
                            ),
                            new Text(
                              "豆瓣评分:$score",
                              style: titleStyle,
                              overflow: TextOverflow.ellipsis,
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              //分割线
              new Divider(height: 1)
            ],
          ),
        ));
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Flutter实现下拉刷新和上拉加载更多

本文链接: https://www.lsjlt.com/news/165860.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter实现下拉刷新和上拉加载更多
    本文实例为大家分享了Flutter实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 效果 下拉刷新 如果实现下拉刷新,必须借助RefreshIndicator,在li...
    99+
    2024-04-02
  • Flutter listview如何实现下拉刷新上拉加载更多功能
    目录下拉刷新 RefreshIndicator 上拉加载更多 总结:下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式...
    99+
    2024-04-02
  • 原生js实现下拉刷新和上拉加载更多
    本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: t...
    99+
    2024-04-02
  • 原生js怎么实现下拉刷新和上拉加载更多
    本篇文章为大家展示了原生js怎么实现下拉刷新和上拉加载更多,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器...
    99+
    2023-06-26
  • Flutter中怎么利用listview实现下拉刷新上拉加载更多功能
    这期内容当中小编将会给大家带来有关Flutter中怎么利用listview实现下拉刷新上拉加载更多功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。下拉刷新在Flutter中系统已经为我们提供了googl...
    99+
    2023-06-20
  • H5基于iScroll如何实现下拉刷新和上拉加载更多
    这篇文章将为大家详细讲解有关H5基于iScroll如何实现下拉刷新和上拉加载更多,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言   &n...
    99+
    2024-04-02
  • Android自定义ListView实现下拉刷新上拉加载更多
    目录1、创建刷新控件1.1、创建头部View1.2、下拉事件1.3、接口回调2、上拉加载更多2.1、底部样式2.2、布局添加Listview现在用的很少了,基本都是使用Recycle...
    99+
    2024-04-02
  • 微信小程序怎么实现下拉刷新和上拉加载更多
    微信小程序可以通过使用onPullDownRefresh和onReachBottom两个方法来实现下拉刷新和上拉加载更多的功能。 ...
    99+
    2024-04-03
    微信小程序
  • vue2.0中移动端如何实现下拉刷新和上拉加载更多
    这篇文章主要介绍了vue2.0中移动端如何实现下拉刷新和上拉加载更多,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。示例<templat...
    99+
    2024-04-02
  • Flutter 给列表增加下拉刷新和上滑加载更多功能
    目录有状态组件 异步 async/await 引入 flutter_easyrefresh 使用 flutter_easyrefresh运行结果 结语 有状态组件 当 Flutte...
    99+
    2024-04-02
  • uniapp怎么实现下拉刷新和上拉加载功能
    随着移动端开发的不断升级,开发者们对于移动应用的需求也越来越高。而在很多移动应用中,下拉刷新和上拉加载更多是必不可少的功能之一,为了提高用户体验,许多移动应用都会加入这两个功能。在这里,我们将介绍如何在uniapp中实现下拉刷新和上拉加载更...
    99+
    2023-05-14
  • Spring怎么实现上拉刷新和下拉加载效果
    这篇文章主要介绍Spring怎么实现上拉刷新和下拉加载效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!导依赖:compile 'com.android.support:recyclerview-v...
    99+
    2023-05-30
    spring
  • MUI如何实现上拉加载和下拉刷新效果
    这篇文章主要介绍了MUI如何实现上拉加载和下拉刷新效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。编写存储过程分页(此处使用T-SQL)C...
    99+
    2024-04-02
  • Flutter如何给列表增加下拉刷新和上滑加载更多功能
    小编给大家分享一下Flutter如何给列表增加下拉刷新和上滑加载更多功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!有状态组件当 Flutter 的页面需要动态...
    99+
    2023-06-15
  • 小程序怎么实现上拉刷新下拉加载
    这篇文章主要介绍“小程序怎么实现上拉刷新下拉加载”,在日常操作中,相信很多人在小程序怎么实现上拉刷新下拉加载问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序怎么实现上拉刷新下拉加载”的疑惑有所帮助!接下来...
    99+
    2023-06-26
  • MUI如何实现上拉刷新/下拉加载功能
    小编给大家分享一下MUI如何实现上拉刷新/下拉加载功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!新闻信息列表必备的功能,支持...
    99+
    2024-04-02
  • vue 使用mescroll.js框架实现下拉加载和上拉刷新功能
    以下是代码是在项目中抽取出来的,都是实现下拉刷新上拉加载的要点。 注:以下不是用vue-cli写的,用vue-cli的请绕过,抱歉~ 1、mescroll 的页面的初始化 initM...
    99+
    2024-04-02
  • dropload.js插件下拉刷新和上拉加载怎么用
    小编给大家分享一下dropload.js插件下拉刷新和上拉加载怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下第...
    99+
    2024-04-02
  • Vue uni-app框架实现上拉加载下拉刷新功能
    目录实现上拉加载更多优化实现下拉刷新实现上拉加载更多 打开项目根目录中的pages.json配置文件,为subPackages分包中的商品goods_list页面配置上拉触底的距离:...
    99+
    2024-04-02
  • Vue vant-ui框架实现上拉加载下拉刷新功能
    目录知识点速记基本用法下拉刷新代码实现1.页面布局2.样式3.方法下拉刷新效果: 知识点速记 基本用法 List通过loading和finished两个变量控制加载状态,当组件滚动...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作