本帖最后由 小江哥 于 2019-8-22 17:16 编辑
列表组件的知识其实是很多的，也是一个经常使用的组件，我们这里先作一个简介，让大家有个直观的感受，先敲开大门，大家就好深入了。这节我们先学习最简单的列表组件如何制作。 ListView的声明学习不仅要学，还要不断的练习，这节我们重新熟悉一下一个Flutter页面的基本写法，因为前面已经学过，所以我相信很多小伙伴已经都会了，但是我么年主要是练习，代码如下： [AppleScript] 纯文本查看 复制代码 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] 纯文本查看 复制代码 body: new ListView(
children:<Widget>[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
)
]
),
我们使用了ListView，然后在他的内部children中，使用了widget数组，因为是一个列表，所以它接受一个数组，然后有使用了listTite组件（列表瓦片），在组件中放置了图标和文字。 当然我们还可以多加入几行列表，比如我们再加入一行，代码如下。 [AppleScript] 纯文本查看 复制代码 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')
),
]
),
这时候已经有两行列表了（具体效果视频中查看）。 图片列表的使用上节课学习了Image Widget，在这里我们就在列表中加入图片来试一下。我们插入4幅图片，然后看一下效果，代码如下： [AppleScript] 纯文本查看 复制代码 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张图片形成了一个列表。小伙伴们快动手试一试吧
| 
收藏
淘帖
踩
