Flutter入门之ListView 列表组件简介

最新推荐文章于 2025-04-17 14:00:00 发布

唯美星辉

最新推荐文章于 2025-04-17 14:00:00 发布

阅读量221

点赞数

分类专栏： Flutter-Base

本文链接：https://blog.youkuaiyun.com/weimeig/article/details/100864639

版权

Flutter-Base 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍Flutter中ListView组件的使用方法，包括基本结构、添加列表项、插入图片等操作，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ListView的声明

学习不仅要学，还要不断的练习，这节我们重新熟悉一下一个Flutter页面的基本写法，代码如下：

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'Hello Flutter Demo',
      home:Scaffold(
        appBar:new AppBar(
          title:new Text('ListView Widget')
        ),
        body: new Text('ListView Text')
      ),
    );
  }
}

这就是一个最基本的结构。有了最基本的结构后，就可以加入ListView组件，在body代码处加入下面的代码：

body: new ListView(
  children:<Widget>[
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    )
  ]
),

我们使用了ListView，然后在他的内部children中，使用了widget数组，因为是一个列表，所以它接受一个数组，然后有使用了listTite组件（列表瓦片），在组件中放置了图标和文字。

当然我们还可以多加入几行列表，比如我们再加入一行，代码如下。

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幅图片，然后看一下效果，代码如下：

body: new ListView(
  children:<Widget>[
    new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568563949693&di=05c9fdd4cfd61320235e34015b063694&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01932f55f76e076ac7251df896e7c2.jpg%402o.jpg'),
    new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568563983505&di=5ec44940c94a782f9ec78eb963902c5c&imgtype=0&src=http%3A%2F%2Fimages.hisupplier.com%2Fvar%2FuserImages%2F201506%2F26%2F162011327474_s.jpg'),
    new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568563983302&di=a4df37b43c4ad051146e87e3f98a78c2&imgtype=0&src=http%3A%2F%2Fimg.yanj.cn%2Feditor%2F201605%2F20160527223155_22806.jpg'),
    new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568563976499&di=c3acf217891a6f8b62d973cc30bd775a&imgtype=0&src=http%3A%2F%2Fimages.hisupplier.com%2Fvar%2FuserImages%2F201708%2F26%2F183324574793_s.jpg'),
    new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568564029483&di=34ae8ed28fed95c1b72896028623a04c&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d72e572950eb6ac7253812071529.jpg'),
  ]
),

我们使用了网络的方式，插入了4张图片，并且这4张图片形成了一个列表。快动手试一试吧。

运行效果：