列表组件（ListView）

列表在前端是最常见的需求。在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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
注：在长文本的场景，需要使用'''三个引号来表示。

 

标签：Text,公园,列表,item,fontSize,child,组件,ListView
来源： https://blog.csdn.net/a749402932/article/details/94401573