flutter中ListView 列表组件简介

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

ListView的声明

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

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

import 'package:flutter/material.dart';   void main () => runApp(MyApp());   class MyApp extends StatelessWidget{   @override   Widget build(BuildContext context){     return MaterialApp(       title:'JSPang Flutter Demo',       home:Scaffold(         appBar:new AppBar(           title:new Text('ListView Widget')         ),         body: new Text('ListView Text')       ),     );   } }

 

这就是一个最基本的机构，具体解释和写法看视频吧。

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

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7 8

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

 

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

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

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12

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

 

这时候已经有两行列表了（具体效果视频中查看）。

[size=0.85em]#图片列表的使用

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

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

body: new ListView(   children:<Widget>[    new Image.network(       'http://jspang.com/static/upload/20181111/G-wj-ZQuocWlYOHM6MT2Hbh5.jpg'     ),      new Image.network(       'http://jspang.com/static/upload/20181109/1bHNoNGpZjyriCNcvqdKo3s6.jpg'     ),      new Image.network(       'http://jspang.com/static/myimg/typescript_banner.jpg'     ),new Image.network(       'http://jspang.com/static/myimg/smile-vue.jpg'     )         ] ),

 

我们使用了网络的方式，插入了4张图片，并且这4张图片形成了一个列表。