列表組件（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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
注：在長文本的場景，需要使用'''三個引號來表示。