黑马程序员技术交流社区
标题: flutter中ListView 列表组件使用 [打印本页]
作者: 小江哥 时间: 2019-8-22 17:15
标题: flutter中ListView 列表组件使用
本帖最后由 小江哥 于 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张图片形成了一个列表。小伙伴们快动手试一试吧
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |