列表组件（ListView）

最新推荐文章于 2024-08-15 14:25:19 发布

原创最新推荐文章于 2024-08-15 14:25:19 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Flutter中的ListView组件，用于创建垂直和水平列表，特别讨论了数据量大的列表和矩阵式列表的实现。ListView的常用属性和ListTile widget被详细阐述，ListTile提供了便捷的构建方式，包括图标、标题、副标题、点击事件等，同时允许自定义扩展。

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

列表在前端是最常见的需求。在Flutter中，用ListView来显示列表项，支持垂直和水平方向展示，通过一个属性我们就可以控制其方向，列表有以下分类：

水平的列表

垂直的列表

数据量非常大的列表

矩阵式的列表

常用属性如下：

属性名	类型	默认值	说明
scrollDirection	Axis	Axis.vertical	列表的排列方向，Axis.vertical为垂直方向，是默认值，Axis.horizontal为水平方向
padding	EdgeInsetsGeometry		列表内部的空白区域，如果有child的话，child位于padding内部
reverse	bool	false	组件排列反向
children	List<Widget>		列表元素，注意List元素全部为Widget类型

ListView ListTile

ListTile 是Flutter 给我们准备好的widget 提供非常常见的构造和定义方式，包括文字，icon，点击事件，一般是能够满足基本需求，但是就不能自己定义了

ListTile 属性

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 onLongPress 长按事件

this.selected = false, // item 是否选中状态

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('滚动布局示例'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text(
              '广州市河区公园',
              style: TextStyle(fontWeight: FontWeight.w400, fontSize: 18.0),
            ),
            subtitle: Text('广州市河区公园'),
            leading: Icon(
              Icons.landscape,
              color: Colors.green,
            ),
          ),
          Center(
            child: Text(
              '\n广州天河区公园',
              style: TextStyle(fontSize: 30.0),
            ),
          ),
          Center(
            child: Text(
              '天河公园',
              style: TextStyle(fontSize: 16.0),
            ),
          ),
          Center(
            child: Container(
              margin: const EdgeInsets.all(10.0),
              child: Text(
                '''天河公园，是区属综合性公园，位于广州天河区员村，西靠天府路，南连黄埔大道，北接中山大道，来往交通十分便利。公园总面积70.7公顷，水体面积占10公顷。天河公园以自然生态景观为主要特色，公园规划为五个功能区：百花园景区、文体娱乐区、老人活动区、森林休憩区、后勤管理区。''',
                style: TextStyle(fontSize: 14.0),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
注：在长文本的场景，需要使用'''三个引号来表示。