android使用flutter的ListView实现滚动列表的示例代码

现如今打开一个 App,比如头条、微博,都会有长列表,随着我们不断地滑动,视窗内的内容也会不断地更新。今天就用 Flutter 实现一下这种效果。

这里的表现其实就相当于有一个固定长度的容器,然后超出的内容是不可见的,只有当你向上或向下滑动屏幕时,视窗外看不见的内容才会出现在视窗中。如果在 web 开发时,是需要容器加上样式

overflow: auto;

要想用 Flutter 实现,其实也是很简单的,因为 Flutter 为我们提供了 ListView 组件。

ListView 主要有以下几种使用方式

  • ListView
  • ListView.builder
  • ListView.separated
  • ListView.custom

ListView

ListView 是最简单直接的方式,简单,那么适用的场景也是简单的。仅适用于内容较少的情形,因为它是一次性渲染所有的 items ,当 items 的数目较多时,很容易出现卡顿现象的,导致滑动不流畅。 你可以试试加大下面 items 的大小,然后对比一下体验效果。

class ListViewDemo extends StatelessWidget {
 final _items = List<Widget>.generate(10,
   (i) => Container(padding: EdgeInsets.all(16.0), child: Text("Item $i")));

 @override
 Widget build(BuildContext context) {
  return ListView(
   children: _items,
  );
 }
}

ListView.builder()

构造函数 builder 要求传入两个参数, itemCountitemBuilder 。前者规定列表数目的多少,后者决定了每个列表如何渲染。跟 ListView 不同的点在于,这是懒加载的,假如有 1000 个列表,初始渲染时并不会所有都渲染,而只会特定数量的 item ,这对于性能和用户体验来说,是很好的提升。 你可以对比用 ListView 和用 ListView.builder 渲染 1000 个列表时,体验是否有差别。

class ListViewDemo extends StatelessWidget {
 final _items = List<String>.generate(1000, (i) => "Item $i");

 @override
 Widget build(BuildContext context) {
  return ListView.builder(
   itemCount: 1000,
   itemBuilder: (context, idx) {
    return Container(
     padding: EdgeInsets.all(16.0),
     child: Text(_items[idx]),
    );
   },
  );
 }
}

ListView.separated()

separated 相比较于 builder,又多了一个参数 separatorBuilder ,用于控制列表各个元素的间隔如何渲染。比如,我们需要列表的每个 item 之间有一个分割线,就可以跟下面那样,加一个 Divider 组件。

class ListViewDemo extends StatelessWidget {
 final _items = List<String>.generate(1000, (i) => "Item $i");

 @override
 Widget build(BuildContext context) {
  return ListView.separated(
   itemCount: 1000,
   itemBuilder: (context, idx) {
    return Container(
     padding: EdgeInsets.all(16.0),
     child: Text(_items[idx]),
    );
   },
   separatorBuilder: (context, idx) {
    return Divider();
   },
  );
 }
}

ListView.custom()

custom,就跟名字一样,让我们自定义。必须的参数就是 childrenDelegate , 然后传入一个 实现了 SliverChildDelegate 的组件,如 SliverChildListDelegateSliverChildBuilderDelegate

SliverChildListDelegate 接收跟 ListView 一样的 children ,而 SliverChildBuilderDelegate 接收跟 ListView.builder 的 itemBuilder 一样类型的函数。

正常来说,前面三个已经可以满足我们的日常使用需求了,无需自定义。

总结,上面主要讨论了 ListView 的几个构造函数及用法,讨论如何实现常见的滚动列表。

完成的代码,可见list_view.dart

最后

笔者最近在学习flutter,会持续地记录自己的学习过程,并放在 github上。

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

(0)

相关推荐

  • Flutter中ListView 的使用示例

    这个小例子使用的是豆瓣 API 中 正在上映的电影 的开放接口,要实现的主要效果如下: JSON 数据结构 Item 结构 Item 的结构是一个 Card 包含着一个 Row 然后这个 Row 里面左边是一个 Image ,右边是一个 Column 功能实现 material 库 Json 解析 网络请求 加载菊花 要实现上面四个功能,我们首先需要在 .dart 文件中引入如下代码 import 'dart:convert'; import 'package:http/http.dart' a

  • 利用flutter实现炫酷的list

    前言 使用了flutter一段时间,越来越喜欢flutter了,flutter比我们想象中的强大.这篇文章介绍了怎么使用flutter来展示一个很漂亮的list,先看下效果图. 样式还是很漂亮的,下面我们一步一步完成这个小项目. 开发前准备 我们会用到加载网络图片FadeInImage这么个widget,需要一个loading的icon,所以需要在pubspec.yaml里配置下静态资源,只有配置过的静态资源才可以在项目中使用 assets: - assets/images/ 需要mock一些假

  • android使用flutter的ListView实现滚动列表的示例代码

    现如今打开一个 App,比如头条.微博,都会有长列表,随着我们不断地滑动,视窗内的内容也会不断地更新.今天就用 Flutter 实现一下这种效果. 这里的表现其实就相当于有一个固定长度的容器,然后超出的内容是不可见的,只有当你向上或向下滑动屏幕时,视窗外看不见的内容才会出现在视窗中.如果在 web 开发时,是需要容器加上样式 overflow: auto; 要想用 Flutter 实现,其实也是很简单的,因为 Flutter 为我们提供了 ListView 组件. ListView 主要有以下几

  • Android ItemDecoration 实现分组索引列表的示例代码

    本文介绍了Android ItemDecoration 实现分组索引列表的示例代码,分享给大家.具体如下: 先来看看效果: 我们要实现的效果主要涉及三个部分: 分组 GroupHeader 分割线 SideBar 前两个部分涉及到一个ItemDecoration类,也是我们接下来的重点,该类是RecyclerView的一个抽象静态内部类,主要作用就是给RecyclerView的ItemView绘制额外的装饰效果,例如给RecyclerView添加分割线. 使用ItemDecoration时需要继

  • Android 滚动时间选择的示例代码

    效果图 复制代码直接用!!!! 1.导入依赖 implementation 'com.bigkoo:pickerview:2.1.0' 2.三个bean类 PickerViewData public class PickerViewData implements IPickerViewData { private String content; public PickerViewData(String content) { this.content = content; } public voi

  • QT实现制作一个ListView列表的示例代码

    目录 1.概述 2.代码示例 1.自定义QListWidget 2.自定义QListWidgetItem 3.使用 3.图片演示 1.概述 案例:使用Qt制作一个ListView.点击ListView的Item可以用于测试OpenCV的各种效果 自定义一个:MainListView继承QListWidget .MainListViewItem继承QListWidgetItem 2.代码示例 1.自定义QListWidget mainlistview.h class MainListView :

  • Flutter实现编写富文本Text的示例代码

    目录 SuperText富文本设计方案 RichText原理 方案设计 解析 代码设计 节点定义 Span构造器定义 SuperText定义 可以修改TextStyle的Span构造器 效果展示 结语 SuperText富文本设计方案 Flutter中要实现富文本,需要使用RichText或者Text.rich方法,通过拆分成List<InlineSpan>来实现,第一感觉上好像还行,但实际使用了才知道,有一个很大的问题就是对于复杂的富文本效果,无法准确拆分出具有实际效果的spans.因此想设

  • Android Studio实现简单的QQ登录界面的示例代码

    一.项目概述 QQ是我们日常生活使用最多的软件之一,包含登录界面和进入后的聊天界面.好友列表界面和空间动态界面等.登录界面的制作比较简单,主要考验布局的使用,是实现QQ项目的第一步.现在APP开发的首要工作都是实现登录页面,所以学会了QQ登录界面对以后的软件开发有着很重要的作用. 二.开发环境 三.详细设计 1.头像设计 首先在layout文件里面选择了RelativeLayout(相对布局)作为整个页面的布局. 在顶端放置了一个ImageView控件,宽度和高度设置的都是70dp,水平居中设置

  • Flutter实现仿微信分享功能的示例代码

    目录 1.首先去pub官网 2 在微信开放平台注册开发者账号以及创建你的应用程序 3 在分享页面 3.1 初始化 3.2 检测微信是否安装 3.3 分享微信消息 总结 本文设计到的知识点有 主要问题 Flutter 用来快速开发 Android iOS平台应用,在Flutter 中,通过 fluwx或者fluwx_no_pay 插件来实现微信分享功能 主要还是看自己的需求,本示例我将按照没有支付的实现.至于为什么,主要是ios打包提审比较麻烦. 那么接下来就看一下如何实现吧, 1.首先去pub官

  • 利用React实现虚拟列表的示例代码

    目录 列表项高度固定 代码实现 列表项高度动态 代码实现 思路说明 一些需要注意的问题 结尾 大家好,我是前端西瓜哥.这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件. 虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样. 虚拟列表解决的长列表渲染大量节点导致的性能问题: 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿: 即使渲染好了,大量的节点也持续占用内存.列表项下的节点越多,

  • Android仿微信发送语音消息的功能及示例代码

    微信的发送语音是有一个向上取消的,我们使用onTouchListener来监听手势,然后做出相应的操作就行了. 直接上代码: //语音操作对象 private MediaPlayer mPlayer = null; private MediaRecorder mRecorder = null; //语音文件保存路径 private String FileName = null; FileName = Environment.getExternalStorageDirectory().getAbs

  • Android中imageView图片放大缩小及旋转功能示例代码

    一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCenter" android:scaleType="fitCenter" 第二步:获取屏幕的宽度 DisplayMetrics dm=new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); dm.widthPixels 第三

随机推荐