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') ]),
效果如下:
我们使用了网络的方式,插入了 4 张图片,并且这 4 张图片形成了一个列表。小伙伴们快动手试一试吧。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P09. Flutter ListView 列表组件简介
码云笔记 » P09. Flutter ListView 列表组件简介