Flutter笔记（10）flutter中listview列表

疯狂的沙粒

已于 2022-08-02 22:21:14 修改

阅读量844

点赞数

CC 4.0 BY-SA版权

分类专栏： # Android Flutter学习笔记文章标签： flutter android ios

于 2019-07-29 14:58:56 首次发布

本文链接：https://blog.youkuaiyun.com/huang3513/article/details/97641335

Android Flutter学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Flutter中ListView和ListTile的使用方法，展示了如何通过ListTile构造函数创建复杂列表项，包括设置标题、副标题、图标等属性，并提供了完整的示例代码。

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

listview概述

ListView无论是在Android（兼容了android中的ScrollView和ListView，可以当列表也可以充当滑动布局）和IOS开发中，使用的频率都是很高的，而且功能也是很强大。在Flutter中也不例外，也是一个非常常用的布局方式之一，在Flutter中ListView结合ListTile可以布局出一些复杂的列表界面。

ListView列表item-ListTile构造函数

构造函数如下

const ListTile({
    Key key,
    this.leading,//item的图标
    this.title,//item标题
    this.subtitle,//item的副标题
    this.trailing,//item的后置图标
    this.isThreeLine = false,//item是否三行显示
    this.dense,//item直观整体的大小
    this.contentPadding,//item的内容内边距
    this.enabled = true,
    this.onTap,//item ontap的点击事件
    this.onLongPress,//item长按事件
    this.selected = false,//item是否选中状态
  })

ListView示例代码

import 'package:flutter/material.dart';
void main(){
  runApp(new MaterialApp(
    title: 'ListView布局示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    List<Widget> list =<Widget>[
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路3号'),
        leading: new Icon(
          Icons.fastfood,
          color: Colors.orange,
        ),
        isThreeLine: true,
        enabled: true,
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路7号'),
        leading: new Icon(
          Icons.airplay,
          color: Colors.blue,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路3号'),
        leading: new Icon(
          Icons.local_hospital,
          color: Colors.yellow,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路18号'),
        leading: new Icon(
          Icons.computer,
          color: Colors.green,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路21号'),
        leading: new Icon(
          Icons.face,
          color: Colors.grey,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路21号'),
        leading: new Icon(
          Icons.fast_forward,
          color: Colors.grey,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路21号'),
        leading: new Icon(
          Icons.fast_rewind,
          color: Colors.grey,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路21号'),
        leading: new Icon(
          Icons.favorite,
          color: Colors.grey,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路21号'),
        leading: new Icon(
          Icons.favorite_border,
          color: Colors.grey,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路21号'),
        leading: new Icon(
          Icons.dashboard,
          color: Colors.grey,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路21号'),
        leading: new Icon(
          Icons.airplay,
          color: Colors.grey,
        ),
      ),
      new ListTile(
        title: new Text(
          '北京市海淀区甘家口街道办事处',
          style: new TextStyle(
            fontWeight: FontWeight.w400,fontSize: 18.0,),),
        subtitle: new Text('广州市福黄埔大道建中路21号'),
        leading: new Icon(
          Icons.battery_full,
          color: Colors.grey,
        ),
      ),
    ];

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('ListView示例布局'),
      ),
      body: new ListView(
        children: list,
      ),
    );
  }
}

priontString(){
  print('这是listView的点击打印');
}