05：ListView列表組件
這是一個(gè)最基本的listview結(jié)構(gòu)

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'QGS Flutter',
      home:Scaffold(
        appBar:new AppBar(
          title:new Text('ListView Widget')
        ),
        body: new Text('ListView Text')
      ),
    );
  }
}

body: new ListView(
  children:<Widget>[
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    )
  ]
),

我們使用了ListView，然后在他的內(nèi)部children中，使用了widget數(shù)組，因?yàn)槭且粋€(gè)列表，所以它接受一個(gè)數(shù)組，然后有使用了listTite組件（列表瓦片），在組件中放置了圖標(biāo)和文字。
當(dāng)然我們還可以多加入幾行列表

body: new ListView(
  children:<Widget>[
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    ),
    new ListTile(
      leading:new Icon(Icons.account_balance),
      title:new Text('account_balance')
    ),
  ]
),

圖片列表的使用

body: new ListView(
  children:<Widget>[
   new Image.network(
      'https://upload.jianshu.io/users/upload_avatars/15042138/9bf619dc-b8b0-4581-9f48-f0080478dd42.jpg'
    ),
     new Image.network(
      'https://upload.jianshu.io/users/upload_avatars/15042138/9bf619dc-b8b0-4581-9f48-f0080478dd42.jpg'
    ),
     new Image.network(
      'https://upload.jianshu.io/users/upload_avatars/15042138/9bf619dc-b8b0-4581-9f48-f0080478dd42.jpg'
    ),new Image.network(
      'https://upload.jianshu.io/users/upload_avatars/15042138/9bf619dc-b8b0-4581-9f48-f0080478dd42.jpg'
    )
  ]
),

我們使用了網(wǎng)絡(luò)的方式，插入了4張圖片，并且這4張圖片形成了一個(gè)列表

06：橫向列表

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Container(
            height:200.0,
            child:new ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                new Container(
                  width:180.0,
                  color: Colors.lightBlue,
                ), new Container(
                  width:180.0,
                  color: Colors.amber,
                ), new Container(
                  width:180.0,
                  color: Colors.deepOrange,
                ),new Container(
                  width:180.0,
                  color: Colors.deepPurpleAccent,
                ),
              ],
            )
          ),
          ),
        ),
      );
  }
}

我們先是加入了Center組件，作用是讓我們的橫向列表可以居中到屏幕的中間位置，然后在center組件的下面加入了Container容器組件，并設(shè)置了容器組件的高是200，在容器組件里我們加入了ListView組件，然后設(shè)置了組件的scrollDirection屬性。然后再ListView的子組件里加入了Container容器組件，然后設(shè)置了不同顏色

scrollDirection屬性
ListView組件的scrollDirection屬性只有兩個(gè)值，一個(gè)是橫向滾動(dòng)，一個(gè)是縱向滾動(dòng)。默認(rèn)的就是垂直滾動(dòng)，所以如果是垂直滾動(dòng)，我們一般都不進(jìn)行設(shè)置。
Axis.horizontal:橫向滾動(dòng)或者叫水平方向滾動(dòng)。
Axis.vertical:縱向滾動(dòng)或者叫垂直方向滾動(dòng)。

07：動(dòng)態(tài)列表
01）List類型
List是Dart的集合類型之一,它的聲明有幾種方式：
var myList = List(): 非固定長度的聲明。
var myList = List(2): 固定長度的聲明。
var myList= List<String>():固定類型的聲明方式。
var myList = [1,2,3]: 對(duì)List直接賦值。

那我們這里使用的是一個(gè)List傳遞，然后直接用List中的generate方法進(jìn)行生產(chǎn)List里的元素。最后的結(jié)果是生產(chǎn)了一個(gè)帶值的List變量。代碼如下：

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

在main函數(shù)的runApp中調(diào)用了MyApp類，再使用類的使用傳遞了一個(gè)items參數(shù),并使用generate生成器對(duì)items進(jìn)行賦值。
generate方法傳遞兩個(gè)參數(shù)，第一個(gè)參數(shù)是生成的個(gè)數(shù)，第二個(gè)是方法。

02）接收參數(shù)
我們已經(jīng)傳遞了參數(shù)，那MyApp這個(gè)類是需要接收的。

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

final List<String> items;
MyApp({Key key, @required this.items}):super(key:key);
這是一個(gè)構(gòu)造函數(shù)，除了Key，我們?cè)黾恿艘粋€(gè)必傳參數(shù)，這里的@required意思就必傳。:super如果父類沒有無名無參數(shù)的默認(rèn)構(gòu)造函數(shù)，則子類必須手動(dòng)調(diào)用一個(gè)父類構(gòu)造函數(shù)。

這樣我們就可以接收一個(gè)傳遞過來的參數(shù)了，當(dāng)然我們要事先進(jìn)行聲明。

03）動(dòng)態(tài)列表Listview.builder()
接受了值之后，就可以直接調(diào)用動(dòng)態(tài)列表進(jìn)行生成了。具體代碼如下：

import 'package:flutter/material.dart';
void main () => runApp(MyApp(
  items: new 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:new ListView.builder(
            itemCount:items.length,
            itemBuilder:(context,index){
              return new ListTile(
                title:new Text('${items[index]}'),
              );
            }
          )
        ),
      );
  }
}

08：GridView網(wǎng)格列表
最簡(jiǎn)單的網(wǎng)格列表

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:GridView.count(
            padding:const EdgeInsets.all(20.0),
            crossAxisSpacing: 10.0,
            crossAxisCount: 3,
            children: <Widget>[
              const Text('I am QGS'),
              const Text('I love Android'),
              const Text('I love ios'),
              const Text('I like playing games'),
              const Text('I like reading'),
              const Text('I like eating')
            ],
          )
        ),
      );
  }
}

在body屬性中加入網(wǎng)格組件，然后給了一些常用屬性:
padding:表示內(nèi)邊距，這個(gè)小伙伴們應(yīng)該很熟悉。
crossAxisSpacing:網(wǎng)格間的空當(dāng)，相當(dāng)于每個(gè)網(wǎng)格之間的間距。
crossAxisCount:網(wǎng)格的列數(shù)，相當(dāng)于一行放置的網(wǎng)格數(shù)量。