8-19 ListView use a dynamic list of Flutter based learning

Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )

Introduction: In the actual development, such write dead or static list of very little use of call. We used a dynamic list, such as our data read from the back over, and then stored in an array of variables, and then to the contents of the array circulating a list.

A, List type of use

List of Dart is one of a collection type, you can actually put it simply understood as an array (I think so anyway), other languages also have this type. It's a statement in several ways:

var myList = List(): Declaration of non-fixed length.
var myList = List(2): Declare a fixed length.
var myList= List<String>(): Fixed type declaratively.
var myList = [1,2,3]: Direct assignment to List.

That we use here is a List passed, then the direct use of the List of generateproduction in the List element method. The end result is the production of the List variable with a value. code show as below:

void main () => runApp(MyApp(
  items: new List<String>.generate(1000, (i)=> "Item $i")
));

Description: Re mainrunApp MyApp function called in the class, and then pass that use a class itemsparameter and uses the generator to generate itemsassignment.

generate method passing two parameters, the first parameter is the number of generated second method.

Second, accept arguments

We're already passing parameters, this class is that MyApp needs to receive.

final List<String> items;
 MyApp({Key key, @required this.items}):super(key:key);

This is a constructor, in addition to Key, we added will pass a parameter, here @requiredmeaning he will pass. :superIf the parent class has no default constructor unnamed parameters, the subclass must manually invoke a superclass constructor.

So that we can receive a pass over the argument, of course, we have to declare in advance.

Third, the dynamic list ListView.builder ()

After accepting the values, you can directly call list generated dynamically. Specific code as follows:

import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {
     runApp(MyApp(
       //main函数的runApp中调用了MyApp类，再使用类的使用传递了一个items参数,并使用generate生成器对items进行赋值。
       //使用的是一个List传递，然后直接用List中的generate方法进行生产List里的元素。最后的结果是生产了一个带值的List变量。
       items:new List<String>.generate(1000, (i)=>"item $i")//List可以理解为数组
       //generate方法传递两个参数，第一个参数是生成的个数，第二个是方法
     ));
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
   //我们已经传递了参数，那MyApp这个类是需要接收的。
   final List<String> items;
   //这是一个构造函数，除了Key，我们增加了一个必传参数，这里的@required意思是必传。:super如果父类没有无名无参数的默认构造函数，则子类必须手动调用一个父类构造函数。
   MyApp({Key key,@required this.items}):super(key:key);
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
    return MaterialApp(
       title: 'Welcome to Flutter',   
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home ： 应用默认所显示的界面 Widget
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          body:new ListView.builder(   //添加一个动态列表,子item数量是可变的,用builder方式构建。
            itemCount: items.length,   //列表长度
            itemBuilder: (context,index){   //构建item
              return new ListTile(
                title: new Text("${items[index]}"),  //接收索引值
              );
            },
          )
        ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

Now we can start a virtual machine to see the effect of our list.

8-19 ListView use a dynamic list of Flutter based learning

Guess you like