P09. Flutter ListView 列表组件简介

列表组件的知识其实是很多的，也是一个经常使用的组件，我们这里先作一个简介，让大家有个直观的感受，先敲开大门，大家就好深入了。本文我们先学习最简单的列表组件如何制作。

ListView 的声明

学习不仅要学，还要不断的练习，这节我们重新熟悉一下一个 Flutter 页面的基本写法，因为前面已经学过，所以我相信很多小伙伴已经都会了，但是我么年主要是练习，代码如下：

import 'package:flutter/material.dart';

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

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

有了最基本的结构后，就可以加入 ListView 组件，在body代码处加入下面的代码：

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

我们使用了 ListView，然后在他的内部children中，使用了widget数组，因为是一个列表，所以它接受一个数组，然后有使用了 listTite 组件（列表瓦片），在组件中放置了图标和文字。

当然我们还可以多加入几行列表，比如我们再加入一行，代码如下。

body: ListView(
  children:[
    ListTile(
      leading:Icon(Icons.access_time),
      title:Text('access_time')
    ),
    ListTile(
      leading:Icon(Icons.access_time_outlined),
      title:Text('access_time_outlined')
    ),
  ]
),

我们使用了网络的方式，插入了 4 张图片，并且这 4 张图片形成了一个列表。小伙伴们快动手试一试吧。