Flutter入门（43）：Flutter 组件之 ListTile 详解

1. 基本介绍

ListTile 是一个固定高度的行，通常包含一个行前、行尾图标，以及一些文本。

ListTile.png

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

ListTile 属性	介绍
leading	左侧组件
title	标题
subtitle	副标题
trailing	右侧组件
isThreeLine	是否三行，默认为 false，其实没啥用，但是设置为 true 时，subTitle 不可以为空
dense	是否使用缩小布局
visualDensity	紧凑程度，VisualDensity
shape	形状，这里边缘颜色无效，再点击时阴影可以看出来效果
contentPadding	content 内间距
enabled	是否可用，仅改变颜色，默认为 true
onTap	点击事件回调
onLongPress	长按事件回调
mouseCursor	鼠标光标
selected	选中状态，默认为 false
focusColor	聚焦颜色
hoverColor	悬停颜色
focusNode	焦点控制，Flutter 组件之 FocusNode 详解
autofocus	自动聚焦，默认为 false

4. ListTile 详解

ListTile 使用并不复杂，demo 中详细的介绍了各个属性的功能及样式。

import 'package:flutter/material.dart';

class FMListTileVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("ListTile"),),
      body: ListView(
        children: [
          _normalListTile(true),
          _normalListTile(false),
          _shapeListTile(true),
          _shapeListTile(false),
        ],
      ),
    );
  }
  
  ListTile _normalListTile(bool selected,){
    return ListTile(
      leading: Icon(Icons.ac_unit), // 左侧组件
      title: Text("title"), // 标题
      // 副标题
      subtitle: Text("subTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitle"),
      trailing: Icon(Icons.access_alarm), // 右侧组件
      isThreeLine: true, // 是否三行，其实没啥用，但是设置为 true 时，subTitle 不可以为空
      dense: false, // 是否使用缩小布局
      visualDensity: VisualDensity(horizontal: -4), // 紧凑程度
      contentPadding: EdgeInsets.all(20), // content 内间距
      enabled: true, // 是否可用，仅改变颜色
      // 点击事件回调
      onTap: (){
        print("onTap");
      },
      // 长按事件回调
      onLongPress: (){
        print("onLongPress");
      },
      // 是否选中
      selected: selected,
    );
  }

  ListTile _shapeListTile(bool selected,){
    return ListTile(
      leading: Container(
        width: 100,
        color: Colors.yellow,
        child: Image.network("http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg"),
      ), // 左侧组件
      title: Row(
        children: [
          Icon(Icons.title),
          Text("title"),
        ],
      ), // 标题
      // 副标题
      subtitle: Row(
        children: [
          Icon(Icons.content_copy),
          Text("subTitle"),
        ],
      ),
      trailing: Container(
        width: 100,
        child: Image.network("http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg"),
      ), // 右侧组件
      isThreeLine: true, // 是否三行，其实没啥用，但是设置为 true 时，subTitle 不可以为空
      dense: false, // 是否使用缩小布局
      visualDensity: VisualDensity(horizontal: -4), // 紧凑程度
      contentPadding: EdgeInsets.all(20), // content 内间距
      enabled: true, // 是否可用，仅改变颜色
      // 形状，这里边缘颜色无效，再点击时阴影可以看出来效果
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
        side: BorderSide(
          color: Colors.red,
          width: 2,
        ),
      ),
      // 点击事件回调
      onTap: (){
        print("onTap");
      },
      // 长按事件回调
      onLongPress: (){
        print("onLongPress");
      },
      // 是否选中
      selected: selected,
    );
  }
}

ListTile.gif

ListTile shape.png

5. 技术小结

ListTile 就是一个非常简单的行容器，可以理解为 ListView.item 或者 UITableViewCell。