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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P09. Flutter ListView 列表组件简介

发表评论

提供最优质的资源集合

立即查看 了解详情