- 声明List
- 通过MyApp这个Demo传递一个参数
- 接收外部传递的参数
- ListView.builder() 动态构建
声明List
之前写的ListView组件的基本使用方法,但是内容和数据都是写死的,在实际项目中,我们的List的数据都是通过接口获取的.所以这一篇主要学习动态列表
通过MyApp这个Demo传递一个参数
现在我们需要在入口组件MyApp中传入一个List,那么需要先声明一个List
void main() => runApp(MyApp(
items: List<String>.generate(length, generator)
));
items是传入的参数,声明一个List,要求是String类型的.调用generate方法来生成这个List.需要传入2个参数,1个是List的长度,第二个需要的是内容
generator内容可以通过一个匿名函数返回,传入的i表示下标
void main() => runApp(MyApp(
items: List<String>.generate(1000, (i)=>"item $i")
));
接收外部传递的参数
参数传入已经完成了,这个时候就需要MyApp来接收参数了,传递参数具体内容已在demo中进行注释
class MyApp extends StatelessWidget{
//- 定义一个变量
final List<String> items;
/*
* 构造函数,用于接收外部传入的参数
* Key key 固定写法,需要传入key值
* @required 表示这个参数为必须传入
* this.items 调用当前类声明的items
* :super(key: key) 由于当前继承的是StatelessWidget,需要调用super重新构造
*/
MyApp({Key key, @required this.items}):super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'beline App',
home: Scaffold(
appBar: AppBar(title: Text('ListView Widget')),
body: Center()
),
);
}
}
这样我们的MyApp就已经能够接收到传递进来的items了.
ListView.builder() 动态构建
要怎么才能使用这个传递进来的items呢,我们知道在Vue中可以通过for循环来遍历数组,实现反复渲染页面结构的目的.这里Flutter为我们提供了ListView.builder()动态构建List的组件来实现数组的遍历
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;
/*
* 构造函数,用于接收外部传入的参数
* Key key 固定写法,需要传入key值
* @required 表示这个参数为必须传入
* this.items 调用当前类声明的items
* :super(key: key) 由于当前继承的是StatelessWidget,需要调用super重新构造
*/
MyApp({Key key, @required this.items}):super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'beline App',
home: Scaffold(
appBar: AppBar(title: Text('ListView Widget')),
body: ListView.builder(
itemCount: items.length, //- 要生成的条数
itemBuilder: (context, index){
return ListTile(
title: Text('${items[index]}')
);
}
),
),
);
}
}
这里需要注意ListView.builder()有两个参数,一个是需要生成的条数itemCount,另一个是生成的内容itemBuilder,其中itemBuilder也需要2个参数,第一个是上下文,另一个是下标.然后返回需要输出的内容即可.
image.png
