写点什么

flutter 系列之:flutter 中 listview 的高级用法

作者:程序那些事
  • 2023-01-03
    广东
  • 本文字数:2282 字

    阅读完需:约 7 分钟

简介

一般情况下,我们使用 Listview 的方式是构建要展示的 item,然后将这些 item 传入 ListView 的构造函数即可,通常情况下这样做是够用了,但是不排除我们会有一些其他的特殊需求。


今天我们会来讲解一下 ListView 的一些高级用法。

ListView 的常规用法

ListView 的常规用法就是直接使用 ListView 的构造函数来构造 ListView 中的各个 item。


其中 ListView 有一个 children 属性,它接收一个 widget 的 list,这个 list 就是 ListView 中要呈现的对象。


我们来构造一个拥有 100 个 item 的 ListView 对象:


class CommonListViewApp extends StatelessWidget{  const CommonListViewApp({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return ListView(      children: List<Widget>.generate(100, (i) => Text('列表 $i')),    );  }}
复制代码


上面的例子中,我们简单的使用 List.generate 方法生成了 100 个对象。


在 item 数目比较少的情况下是没有任何问题的,如果 item 数目比较多的情况下,直接将所有的 item 都取出来放在 ListView 中就不太现实了。


幸好,ListView 还提供了一个 ListView.builder 的方法,这个方法会按需进行 item 的创建,所以在 item 数目比较多的情况下是非常好用的。


还是上面的例子,这次我们要生成 10000 个 item 对象,然后将这些对象放在 ListView 中去,应该如何处理呢?


因为这次我们要使用 builder,所以没有必要在 item 生成的时候就创建好 widget,我们可以将 widget 的创建放在 ListView 的 builder 中。


首先,我们构建一个 items list,并将其传入 MyApp 的 StatelessWidget 中:


    MyApp(      items: List<String>.generate(10000, (i) => '列表 $i'),    )
复制代码


然后就可以在 MyApp 的 body 中使用 ListView.builder 来构建 item 了:


body: ListView.builder(          itemCount: items.length,          prototypeItem: ListTile(            title: Text(items.first),          ),          itemBuilder: (context, index) {            return ListTile(              title: Text(items[index]),            );          },        )
复制代码


ListView.builder 是推荐用来创建 ListView 的方式,上面的完整代码如下:


import 'package:flutter/material.dart';
void main() { runApp( MyApp( items: List<String>.generate(10000, (i) => '列表 $i'), ), );}
class MyApp extends StatelessWidget { final List<String> items;
const MyApp({Key? key, required this.items}) : super(key: key);
@override Widget build(BuildContext context) { const title = 'ListView的使用';
return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: const Text(title), ), body: ListView.builder( itemCount: items.length, prototypeItem: ListTile( title: Text(items.first), ), itemBuilder: (context, index) { return ListTile( title: Text(items[index]), ); }, ), ), ); }}
复制代码

创建不同类型的 items

看到这里,可能有同学会问了,ListView 中是不是只能创建一种 item 类型呢?答案当然是否定的。


不管是从 ListView 的构造函数构建还是从 ListView.builder 构建,我们都可以自由的创建不同类型的 item。


当然最好的办法就是使用 ListView.builder,根据传入的 index 的不同来创建不同的 item。


还是上面的例子,我们可以在创建 items 数组的时候就根据 i 的不同来生成不同的 item 类型,也可以如下所示,在 itemBuilder 中根据 index 的不同来返回不同的 item:


body: ListView.builder(          itemCount: items.length,          prototypeItem: ListTile(            title: Text(items.first),          ),          itemBuilder: (context, index) {            if(index %2 == 0) {              return ListTile(                title: Text(items[index]),              );            }else{              return Text(items[index]);            }          },        )
复制代码


非常的方便。


创建不同 item 的完整代码如下:


import 'package:flutter/material.dart';
void main() { runApp( MyApp( items: List<String>.generate(10000, (i) => '列表 $i'), ), );}
class MyApp extends StatelessWidget { final List<String> items;
const MyApp({Key? key, required this.items}) : super(key: key);
@override Widget build(BuildContext context) { const title = 'ListView的使用';
return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: const Text(title), ), body: ListView.builder( itemCount: items.length, prototypeItem: ListTile( title: Text(items.first), ), itemBuilder: (context, index) { if(index %2 == 0) { return ListTile( title: Text(items[index]), ); }else{ return Text(items[index]); } }, ), ), ); }}
复制代码

总结

ListView 是我们在应用中会经常用到的一种 widget,希望大家能够灵活掌握。


本文的例子:https://github.com/ddean2009/learn-flutter.git

发布于: 刚刚阅读数: 6
用户头像

关注公众号:程序那些事,更多精彩等着你! 2020-06-07 加入

最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧,尽在公众号:程序那些事!

评论

发布
暂无评论
flutter系列之:flutter中listview的高级用法_flutter_程序那些事_InfoQ写作社区