P11. Flutter ListView动态列表的使用
目录
我们在实际开发中,这种写死的,或者叫静态的列表使用的非常少。我们常用的是动态列表,比如我们的数据从后台读取过来,然后存入一个变量数组里,然后以数组的内容循环出一个列表。
List 类型的使用
List 是 Dart 的集合类型之一,其实你可以把它简单理解为数组(反正我是这么认为的),其他语言也都有这个类型。它的声明有几种方式:
var myList = List()
: 非固定长度的声明。var myList = List(2)
: 固定长度的声明。var myList= List<String>()
:固定类型的声明方式。var myList = [1,2,3]
: 对 List 直接赋值。
那我们这里使用的是一个 List 传递,然后直接用 List 中的generate
方法进行生产 List 里的元素。最后的结果是生产了一个带值的 List 变量。代码如下:
void main () => runApp(MyApp( items: List.generate(1000, (i)=> "Item $i") ));
再main
函数的 runApp 中调用了 MyApp 类,再使用类的使用传递了一个items
参数,并使用 generate 生成器对items
进行赋值。
generate
方法传递两个参数,第一个参数是生成的个数,第二个是方法。
接受参数
我们已经传递了参数,那 MyApp 这个类是需要接收的。
final List items; MyApp({Key key, @required this.items}):super(key:key);
这是一个构造函数,除了 Key,我们增加了一个必传参数,这里的@required
意思就必传。:super
如果父类没有无名无参数的默认构造函数,则子类必须手动调用一个父类构造函数。
这样我们就可以接收一个传递过来的参数了,当然我们要事先进行声明。
动态列表 ListView.builder()
接受了值之后,就可以直接调用动态列表进行生成了。具体代码如下:
import 'package:flutter/material.dart'; void main () => runApp(MyApp( items: List<String>.generate(1000, (i)=> "Item $i") )); class MyApp extends StatelessWidget{ final List<String> items; MyApp({Key key, @required this.items}):super(key:key); @override Widget build(BuildContext context ){ return MaterialApp( title:'ListView widget', home:Scaffold( body:ListView.builder( itemCount:items.length, itemBuilder:(context,index){ return ListTile( title:Text('${items[index]}'), ); } ) ), ); } }
现在我们可以启动虚拟机来查看,我们的列表的效果了。这个就是工作中我们常使用的列表的方式,当然我们也可以重新做一个列表类,把组件作的美美的。
小伙伴可以试着来作一个带图文的新闻列表。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P11. Flutter ListView动态列表的使用
码云笔记 » P11. Flutter ListView动态列表的使用