列表组件(ListView)

本文介绍了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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
注:在长文本的场景,需要使用'''三个引号来表示。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值