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

Flutter ListView 列表组件简介

图片列表的使用

上节学习了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张图片形成了一个列表。小伙伴们快动手试一试吧。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » P09. Flutter ListView 列表组件简介

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们