设为首页 加入收藏

TOP

Flutter学习笔记(25)--ListView实现上拉刷新下拉加载(一)
2019-09-04 00:58:51 】 浏览:42
Tags:Flutter 学习 笔记 --ListView 实现 刷新 下拉 加载

如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

?

前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需要使用长列表,比如淘宝后台的订单列表,手机通讯录等,这些列表项数据很多,长列表也是使用ListView作为基础组件,只不过需要添加一个列表项构造器itemBuilder。Flutter的长列表组件其实相当于Android中的RecyclerView,它会自动为您回收列表元素。在创建ListView.builder时,需要传入两个参数,一个列表的初始长度,一个itemBuilder函数。ListVIew还支持基于Sliver的延迟构建模型。

?

基于Sliver的延迟构建模式:

通常可滚动组件的子组件可能会非常多,占用的总高度也会非常大,如果要一次性将子组件全部构建出将会导致性能差的问题出现,为此,Flutter中提出一个Sliver(中文为"薄片"的意思)概念,如果一个可滚动组件支持Sliver模型,那么该滚动组件可以将子组件分成好多个薄片(Sliver),只有当Sliver出现在视口时才会去构建它,这种模型也成为"基于Sliver的延迟构建模型"。可滚动组件中有很多都支持基于Sliver的延迟构建模型,如ListView、GridView,但是也有不支持该模型的,如SingleChildScrollView

?

使用ListVIew.separated给列表项之间添加一个分割组件

import 'package:flutter/material.dart';

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

class DemoApp extends StatelessWidget {

  //初始化数据源
  final List items = new List.generate(200, (i)=>"Item $i");

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'SingleChildScrollView Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('SingleChildScrollView Demo'),
        ),
        body:new ListView.separated(
          //列表滑动到边界时,显示iOS的弹出效果
          physics: BouncingScrollPhysics(),
          itemCount: items.length,
          //列表项构造器
          itemBuilder: (context,index){
            return ListTile(title: new Text('${items[index]}'),);
          },
          //分割构造器
          separatorBuilder: (context,index){
            //分割组件
            return new Divider(color: Colors.blue,);
          },
        ),
      ),
    );
  }
}

  • 下拉刷新

?Flutter给我们提供了下拉刷新功能RefreshIndicator的组件,先整体说明一下下面Demo的代码逻辑,其实很简单,body返回一个RefreshIndicator组件,在该组件内的子组件是一个ListView,重点说一下RefreshIndicator的下拉回调方法onRefresh,在回调方法内延迟2秒中后将list内容清空,并且重新给list列表添加新的数据。

import 'package:flutter/material.dart';

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

class DemoApp extends StatefulWidget {
  @override
  State createState() {
    return new _DemoAppState();
  }
}

class _DemoAppState extends State {
  var _items = new List();
  @override
  void initState() {
    super.initState();
    getData();
  }
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ListView Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Demo'),
        ),
        body: new RefreshIndicator(
            onRefresh: _onRefresh,
             child: new ListView.separated(
                physics: BouncingScrollPhysics(),
                itemBuilder: (context,index){
                  return ListTile(title:new Text('${_items[index]}'));
                },
                //分割线构造器
                separatorBuilder: (context,index){
                  return new Divider(color: Colors.blue,);
                },
                //_items.length + 1是为了给最后一行的加载loading留出位置
                itemCount: _items.length
            ),
        ),
      ),
    );
  }

  void getData() {
    //初始数据源
    for (int i=0;i<20;i++){
      _items.insert(_items.length, "第${_items.length}条原始数据");
      print(_items[i]);
    }
  }

  Future<void> _onRefresh() async {
    await Future.delayed(Duration(seconds: 2)).then((e){
      setState(() {
        _items.clear();
        for (int i=0;i<20;i++){
          _items.insert(_items.length, "第${_items.length}条下拉刷新后的数据");
        }
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
  }
}

这里需要注意的是,onRefresh回调方法要增加async....await,不然会出现下拉刷新
Flutter学习笔记(25)--ListView实现上拉刷新下拉加载(一) https://www.cppentry.com/bencandy.php?fid=98&id=249989

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇导航页的开发--手机web app开发笔.. 下一篇重温Android和Fragment生命周期

kafka-
kafka ? Partit
解决android studio
Kafka史上最详细原理
Error while fetchin
【Kafka】安装与快速
? ? &
flume读取日志数据写
Authentication plug
Flume 自定义source
flume ? 三大核
ICC副本>>>
愚公移山 ?
Hbase架构 ? Hb
5 hbase-shell + &
Hbase ? MapRed
MetaException(messa
Exception in thread
HIVE metastore Dupl
-->