码云 Flutter教程 2021-03-30

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')
    ),
  ]
),

图片列表的使用

上节学习了 Image Widget，在这里我们就在列表中加入图片来试一下。我们插入 4 幅图片，然后看一下效果，代码如下：

body: ListView(children: [
  Image.network(
      'https://media.mybj123.com/wp-content/uploads/2021/02/1614230321-c4ca4238a0b9238.jpg'),
  new Image.network(
      'https://media.mybj123.com/wp-content/uploads/2021/02/1614230411-c81e728d9d4c2f6.jpg'),
  new Image.network(
      'https://media.mybj123.com/wp-content/uploads/2021/02/1614230483-eccbc87e4b5ce2f.jpg'),
  new Image.network(
      'https://media.mybj123.com/wp-content/uploads/2021/02/1614230500-a87ff679a2f3e71.jpg')
]),

效果如下：