Flutter - ListView 动态列表

声明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