使用 flutter 的ListView实现滚动列表

栏目: IOS · Android · 发布时间: 5年前

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

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

使用 flutter 的ListView实现滚动列表

这里的表现其实就相当于有一个固定长度的容器,然后超出的内容是不可见的,只有当你向上或向下滑动屏幕时,视窗外看不见的内容才会出现在视窗中。如果在 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


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

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C程序设计语言

C程序设计语言

(美)Brian W. Kernighan、(美)Dennis M. Ritchie / 徐宝文、李志译、尤晋元审校 / 机械工业出版社 / 2004-1 / 30.00元

在计算机发展的历史上,没有哪一种程序设计语言像C语言这样应用广泛。本书原著即为C语言的设计者之一Dennis M.Ritchie和著名计算机科学家Brian W.Kernighan合著的一本介绍C语言的权威经典著作。我们现在见到的大量论述C语言程序设计的教材和专著均以此书为蓝本。原著第1版中介绍的C语言成为后来广泛使用的C语言版本——标准C的基础。人们熟知的“hello,World"程序就是由本书......一起来看看 《C程序设计语言》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具