Flutter实现上拉刷新加载

最新推荐文章于 2024-01-26 15:47:21 发布
最新推荐文章于 2024-01-26 15:47:21 发布
阅读量728 收藏
点赞数
分类专栏： flutter 文章标签： flutter dart ListView 上拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jeekmary/article/details/89215456
版权
这篇博客主要是实现以下功能
  1. flutter中 ListView的基本使用
  2. 上拉加载刷新
  3. 加载提示
准备
//在配置文件中添加这个库我们会随机生成单词
  english_words: ^3.1.0
基础代码

下面这部分代码是死的，我就不介绍了，我们重点介绍_MyInfiniteListViewState这里面的内容

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

void main() => runApp(new InfiniteListView());

class InfiniteListView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "InfiniteListView",
      home: Scaffold(
        appBar: AppBar(
          title: Text("InfiniteLisView"),
        ),
        body: MyInfiniteListView(),
      ),
    );
  }
}
class MyInfiniteListView extends StatefulWidget{
  @override
  _MyInfiniteListViewState createState() => _MyInfiniteListViewState();

}

主要内容

数据容器
 //定义一个结尾的标志和一个初始的数组，数组里面放一个元素防止后面的异常
  static const loadingTag = "****loading****";
  var _word = <String>[loadingTag];
初始化
  @override
  void initState() {
    //初始化的时候添加20个元素
    super.initState();
      _retireveData();
  }

接下来我们来看这个初始化数据的方法怎么写

  /**
   * 在新的数组中添加20个单词
   */
  void _retireveData(){
    Future.delayed(new Duration(seconds: 2)).then((e)=>{
        //_word 是一个数组，因为默认有一个元素，所以这里减一没关系
        _word.insertAll(_word.length-1,generateWordPairs().take(20).map((e) => e.asPascalCase).toList()),
      //每次生成20个单词
      //这里用到了  english_words: ^3.1.0这个框架，调用生成单词的函数
        //生成完了20个单词之后就要更新界面了
        setState(() {
      //重新构建列表，这里不用做什么事，空的调用也会提示程序刷新builder
    })
    });

  }

build中的内容

//我们使用这个构造函数，是因为这个构造函数中带有分割线
ListView.separated()

我们来看一下伪代码


ListView.separated(
//这个是对每个item的构建
itemBuilder: (context,index){
	是否滑动到最后一条
		是： 是否超过100条
			是: 显示没有更多数据
			否:显示转圈圈，等待加载数据
		否：构建下一条数据
}
)

基本上就是这个思路了，我们来看下如果超过100条的写法

              //超过100条,不在加载更多的数据了，提示用户
              return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16.0),
                child: Text("--------我也是有底线的------",
                style:TextStyle(color: Colors.grey)),
              );

没有超过100条但是滑到底了的写法

  //不足100条，继续获取数据
            if(_word.length-1<100){
              //获取数据
              _retireveData();
              //加载时显示loading
              return Container(
              //设置边距
                padding: const EdgeInsets.all(16.0),
                //居中显示
                alignment: Alignment.center,
                child: SizedBox(
                  width: 24.0,
                  height: 24.0,
                  //这是一个转圈的progressBar的widget
                  child: CircularProgressIndicator(strokeWidth: 2.0,),
                ),
              );

好了 附上完整代码

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

void main() => runApp(new InfiniteListView());

class InfiniteListView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "InfiniteListView",
      home: Scaffold(
        appBar: AppBar(
          title: Text("InfiniteLisView"),
        ),
        body: MyInfiniteListView(),
      ),
    );
  }
}
class MyInfiniteListView extends StatefulWidget{
  @override
  _MyInfiniteListViewState createState() => _MyInfiniteListViewState();

}

class _MyInfiniteListViewState extends State<MyInfiniteListView>{
  static const loadingTag = "****loading****";
  var _word = <String>[loadingTag];
  @override
  void initState() {
    //初始化的时候添加20个元素
    super.initState();
      _retireveData();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context,index){
          //如果到了末尾，就需要获取数据了,这里判断的依据就是是否和 ***loading***相等
          if(_word[index] == loadingTag){
            //不足100条，继续获取数据
            if(_word.length-1<100){
              //获取数据
              _retireveData();
              //加载时显示loading
              return Container(
                padding: const EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(strokeWidth: 2.0,),
                ),
              );
            }else{
              //超过100条,不在加载更多的数据了，提示用户
              return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16.0),
                child: Text("--------我也是有底线的------",
                style:TextStyle(color: Colors.grey)),
              );

            }
          }
          return ListTile(title: Text("${_word[index]} $index"),);
        },
        //这里表示的是默认的分割线
        separatorBuilder: (context, index)=>Divider(),
        itemCount: _word.length);
  }

  /**
   * 在新的数组中添加20个单词
   */
  void _retireveData(){
    Future.delayed(new Duration(seconds: 2)).then((e)=>{
        //_word 是一个数组，因为默认有一个元素，所以这里减一没关系
        _word.insertAll(_word.length-1,generateWordPairs().take(20).map((e) => e.asPascalCase).toList()),
      //每次生成20个单词
      //这里用到了  english_words: ^3.1.0这个框架，调用生成单词的函数
        //生成完了20个单词之后就要更新界面了
        setState(() {
      //重新构建列表，这里不用做什么事，空的调用也会提示程序刷新builder
    })
    });

  }
}


class MyListView3 extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    Widget divider1 = new Divider(color: Colors.red);
    Widget divider2 = new Divider(color: Colors.blue);
    // TODO: implement build
    return MaterialApp(
      title: "listView",
      home: Scaffold(
        appBar: AppBar(
          title: Text("LsitView"),
        ),
        body: ListView.separated(
            itemBuilder: (BuildContext context, int index){
              return ListTile(
                title: Text("idnex$index"),
              );
            },
            separatorBuilder:(BuildContext context, int index){
              return index%2==0?divider1:divider2;
            },
            itemCount: 100),
      ),
    );
  }

}












class MyListView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "ListViewText",
      home: Scaffold(
        appBar: AppBar(
          title: Text("ListViewText"),
        ),
        body: ListView.builder(
            itemCount: 100,
            itemExtent: 50,
            itemBuilder: (BuildContext contxt,int index){
              return ListTile(
                title: Text("index$index"),
              );
            }
          ),
      ),
    );
  }
  
}









class SingleChildScrollViewTestRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    String str =  "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "测试",
      home: Scaffold(
        appBar: AppBar(
          title: Text("SingleChildScrollViewTestRoute"),
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: Center(
            child: Column(
              //动态的创建一个List<Widget>
              children: str.split("").map((e)=>Text(e,textScaleFactor: 2.0,)).toList(),
            ),
          ),
        ),
      ),
    );
  }

}





















class ScaffoldRoute extends StatefulWidget {
  @override
  _ScaffoldRoute createState() {
    // TODO: implement createState
    return _ScaffoldRoute();
  }
}

class _ScaffoldRoute extends State<ScaffoldRoute>  with SingleTickerProviderStateMixin{
  List tabs = ["新闻", "历史", "图片"];
  TabController _tabController;
  int _selectedIndex = 1;
  @override
  void initState() {
    // TODO: implement initState
    // 创建Controller
    _tabController = TabController(length: tabs.length, vsync: this);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "pro",
      home: Scaffold(
        appBar: AppBar(
          //导航栏
          title: Text("App Name"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.share),
              onPressed: () {
                print("点击了");
              },
            ),
          ],
          bottom: TabBar(
            controller: _tabController,
            tabs: tabs.map((e)=>Tab(text: e,)).toList(),
          ),
        ),
        drawer: MyDrawer(),
        body:TabBarView(
            controller: _tabController,
            children:tabs.map((e){
      return Container(
      alignment: Alignment.center,
      child: Text(e, textScaleFactor: 5),
      );
      }).toList()

        ),
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
            BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
          ],
          currentIndex: _selectedIndex,
          //这个属性表示的是点击后的颜色变化
          fixedColor: Colors.blue,
          onTap: _onItemTapped,
        ),

      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

class MyDrawer extends StatelessWidget {
  const MyDrawer({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
      child: MediaQuery.removePadding(context: context,
          child:Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 28.0),
                child: Row(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: ClipOval(
                        child: Image.network("https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=5ce3474036adcbef15397654cdc645b8/b7fd5266d01609242759dc9fd30735fae6cd3431.jpg",
                        width: 80,
                        ),
                      ),
                    ),
                    Text("Wendux",
                    style: TextStyle(fontWeight: FontWeight.bold),
                    )
                  ],
                ),
              ),
              Expanded(
                  child: ListView(
                    children: <Widget>[
                      ListTile(
                        leading: const Icon(Icons.add),
                        title: const Text("add account"),
                      ),
                      ListTile(
                        leading: const Icon(Icons.settings),
                        title: const Text("Manage account"),
                      ),
                    ],
                  ),
              ),
            ],
          )
      )
    );
  }

}

class FlexLayoutTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "test",
      home: Scaffold(
        appBar: AppBar(
          title: Text("test"),
        ),
        body: MyLayoutTest(),
      ),
    );
  }
}

class MyLayoutTest extends StatelessWidget {
  Widget redBox = DecoratedBox(
    decoration: BoxDecoration(color: Colors.red),
  );

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Test",
      home: Scaffold(
        appBar: AppBar(
          title: Text("布局测试"),
        ),
        body: Container(
          //容器外补白
          margin: EdgeInsets.only(top: 50.0, left: 120.0),
          //容器的大小
          constraints: BoxConstraints.tight(Size(500, 500)),
          decoration: BoxDecoration(
            //背景装饰
            gradient: RadialGradient(
                colors: [Colors.red, Colors.orange],
                center: Alignment.topLeft,
                radius: 0.98),
            boxShadow: [
              BoxShadow(
                  color: Colors.black54,
                  offset: Offset(2.0, 2.0),
                  blurRadius: 4.0),
            ],
          ),
          //卡片倾斜式变换
          transform: Matrix4.rotationZ(0.2),
          //卡片内的文字居中
          alignment: Alignment.center,
          child: Text(
            "薇薇一笑很倾城",
            style: TextStyle(color: Colors.white, fontSize: 40.0),
          ),
        ),
      ),
    );
  }
}

class PaddingTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      //上下左右各添加16像素补白
      padding: EdgeInsets.all(16.0),
      child: Column(
        //显式指定对齐方式为左对齐，排除对齐干扰
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            //左边添加8像素补白
            padding: const EdgeInsets.only(left: 28.0),
            child: Text("Hello world"),
          ),
          Padding(
            //上下各添加8像素补白
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text("I am Jack"),
          ),
          Padding(
            // 分别指定四个方向的补白
            padding: const EdgeInsets.fromLTRB(20.0, .0, 20.0, 20.0),
            child: Text("Your friend"),
          )
        ],
      ),
    );
  }
}
京城最明亮的少年
关注
专栏目录
【Flutter】Flutter 使用 pull_to_refresh 实现下拉刷新和上拉加载
Code Metaverse
09-11 1836
`pull_to_refresh` 是一个为 Flutter 滚动组件提供的下拉刷新和上拉加载的小部件。它支持 Android 和 iOS 平台。这个包提供了几乎所有的滚动小部件，如 GridView、ListView 等。它还提供了默认的指示器和属性的全局设置，支持 Android 和 iOS 默认的 ScrollPhysics，可以控制 overScroll 距离，自定义弹簧动画、阻尼、速度等。
Flutter中实现下拉刷新与上拉加载更多
越陌度阡
01-08 7912
1. 下拉刷新 Flutter中提供了组件 RefreshIndicator用于下拉刷新。 其基本的实现方法是在该组件添加onRefresh事件，当用户下拉刷新时会触发该事件，在该事件中可以用调用一个延时任务Future.delayed( )，在延时任务的回调中重新请求数据即可。 2. 上拉加载更多 Flutter中主要通过使用 ListView.builder( )添加控制器来实现上拉加载更多。 其基本的实现方法是在该组件里添加控制器，在组件初始化时实例化ScrollController..
Flutter 实现支持上拉加载和下拉刷新的 ListView
O_time的博客
02-01 1120
  Hellow 大家好，最近在 flutter 中用到了列表展示数据，并且实现了上拉加载和下拉刷新，当时就想如何把他们抽象出来，形成一个 widget ，于是就有了下面这篇文章。 先看下效果图 具体实现 下拉刷新使用的是：RefreshIndicator，上拉加载是用的 ScrollController 的监听。代码如下： import 'package:flutter/material.da...
flutter---上拉加载 下拉刷新
a875801的博客
03-20 585
转自https://blog.csdn.net/u011272795/article/details/82719640 import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home: MyHomePage(), )); class MyHomePage extends Statefu...
flutter实现上拉加载下拉刷新
Hhjian524的博客
11-07 975
下面主要是介绍如何使用easy_refresh实现上拉加载数据，详细学习其它例子请查看。main.dart全部代码如下。接口用的是提供的接口。
Flutter ListView封装，下拉刷新、上拉加载更多
05-15 955
Flutter ListView封装，下拉刷新、上拉加载更多 ​ 封装了Flutter的ListView，只要传递请求数据的方法和绘制item的方法进去就可以绘制ListView，同时支持下拉刷新、上拉加载更多。 主要三个文件：refresh_list_view.dart//封装的ListView， list_view_item.dart//ListView的子item渲染view refersh...
Flutter 实现下拉刷新上拉加载的示例代码
08-25
Flutter 实现下拉刷新上拉加载的示例代码 Flutter 是一款 популяр的移动应用开发框架，它提供了丰富的 widgets 和工具，可以帮助开发者快速构建高性能的移动应用。今天，我们将介绍如何使用 Flutter 实现...
Flutter-Listview实现上拉加载和下拉刷新
IT技术专栏
07-31 426
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() { runApp(new MaterialApp( title: 'Container demo'...
flutter——加载的loading动画
最新发布
z15267429952的博客
01-26 311
【代码】flutter——加载的loading动画。
Flutter学习，简单demo应用，网络请求，list列表下拉刷新，上拉加载。
04-13
Flutter学习，简单demo应用，网络请求，list列表下拉刷新，上拉加载。 网络封装，下拉刷新，上拉加载，图片加载
github上面各式各样的listview下拉刷新上拉加载更多
03-15
github上面各式各样的listview下拉刷新上拉加载更多
Flutter之下拉刷新，上拉加载更多
小小熊的博客
07-10 341
下拉刷新，上拉加载更多 // 下拉刷新，上拉加载更多 class PullAndLoadViewDemo extends StatefulWidget { @override State<StatefulWidget> createState() => _PullAndLoadViewDemo(); } class _PullAndLoadViewDemo extends State<PullAndLoadViewDemo> { List<String&gt
Flutter 实现下拉刷新和上拉加载
weixin_44911775的博客
05-26 5307
参考 Flutter下拉刷新和上拉加载更多 下拉刷新 上拉加载更多 下拉刷新直接用flutter自带的控件RefreshIndicator组件即可，上拉加载可以通过ListView 中的ScrollController 属性，根据 ListView 的位置来判断是否滑动到了底部来做加载更多的处理 下面用们用到的json数据接口为：https://jsonplaceholder.typicode.com/posts/1/comments 下拉刷新 就是在我们上一节讲到的解析的列表外面嵌套一个RefreshIn
Flutter 中的下拉刷新和上拉加载
小天空的博客
07-26 1254
在Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator，但是没有提供上拉分页加载更多的组件。不过不用担心，在Flutter的ListView组件中，有一个ScrollController属性，它就是专门用来控制ListView滑动事件，在这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理。 当然，我们是可以找一些第三方的库来实现上拉加载下拉刷新的效果的，比如flutter_easyrefresh这个第三方组件，但是我并不推荐flutter_ea
Flutter开发(二十六)：列表下拉刷新上拉加载
wuqingsen1的博客
11-04 516
1.下拉刷新 官方提供了一个组件：RefreshIndicator ，可以实现下拉刷新，将它包裹在 ListView。 里面有回调方法：onRefresh，松手会回调。示例代码： void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePa
Flutter 下拉刷新、上拉加载
yang_6799的博客
12-01 4684
pull_to_refresh的简介与使用
Flutter 实现下拉刷新&上拉加载(包含网络请求)
蓝不蓝编程
12-05 1122
实现功能 支持调用接口调用,分页加载 支持下拉刷新 效果图 使用方法 添加依赖 dependencies: pull_to_refresh: ^1.5.7 dio: 3.0.7 fluttertoast: ^3.1.0 2.主界面 import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; i...
Flutter 的加载动画这么玩更有趣
Flutter 跨平台技术研究
04-22 1242
搞一些有趣的动画玩玩，这样在 loading 的时候，如果加载是时间长，至少不会让等待的过程那么无聊。
Flutter ListView 实现上拉加载与下拉刷新详解
在Flutter中，实现ListView的上拉加载更多和下拉刷新功能是一项常见的需求，特别是在数据加载场景下，用户体验的优化至关重要。本文将详细介绍如何在Flutter ListView中添加这两种交互效果。 首先，我们来看下如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值