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]}'),
              );
            }
          )
        ),
      );
  }
}

现在我们可以启动虚拟机来查看,我们的列表的效果了。这个就是工作中我们常使用的列表的方式,当然我们也可以重新做一个列表类,把组件作的美美的。

Flutter ListView动态列表的使用

小伙伴可以试着来作一个带图文的新闻列表。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P11. Flutter ListView动态列表的使用

发表评论

提供最优质的资源集合

立即查看 了解详情