ListTile`是一个在 Flutter 中常用的列表项组件。它通常用于显示一行列表项，包含一个可选的前导图标、标题、副标题和尾随图标。

它是 Flutter 官方给我们实现的布局，很经典，今天这篇文章，我主要想分享如何对 ListTile 微调，通过微调自定义满足我们需求，而不用另外创建布局。

基本使用

我先展示一个基本的 ListTile ，将常见的属性都使用起来。前导图标（leading）和尾随图标（trailing）、标题（title）和一个副标题（subtitle）、添加了一个onTap回调。

  Widget buildClassicListTile(){
    return ListTile(
      leading: Icon(Icons.circle),
      title: Text('这是标题，图标未居中'),
      subtitle: Text('副标题，带点击事件，不紧凑'),
      trailing: Icon(Icons.arrow_forward),
      onTap: () {
        print('ListTile tapped');
      },
    );
  }

还有一个属性 dense ，它会给 ListTile 创建一个紧凑的布局，减少了垂直间距。同时，上面的文本也是可以设置样式的，所以我再创建两个 ListTile。

  Widget buildDenseListTile(){
    return ListTile(
      dense: true,
      leading: Icon(Icons.circle),
      title: Text('这是标题，图标未居中'),
      subtitle: Text('副标题，带点击事件，紧凑'),
      trailing: Icon(Icons.arrow_forward),
      onTap: () {
        print('ListTile tapped');
      },
    );
  }
  
  Widget buildStyleListTile(){
    return ListTile(
      dense: true,
      leading: Icon(Icons.circle),
      title: Text(
        '这是标题，图标未居中',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      subtitle: Text(
        '副标题，紧凑，并且设置文本样式',
        style: TextStyle(fontSize: 14, fontStyle: FontStyle.italic),
      ),
      trailing: Icon(Icons.arrow_forward),
    );
  }

自定义用法

如何让 ListTile 图标垂直居中，这个需求应该挺常见的，很多设计图也会有这种设计，其实 ListTile 可以实现，这样我们就不用自定义 Widget 了。

  Widget buildCustomListTile(){
    return ListTile(
      leading: Align(
        widthFactor: 1.0,
        alignment: Alignment.center,
        child: Icon(Icons.circle)
      ),
      title: Text('这是标题，图标居中'),
      subtitle: Text('副标题'),
  		...
    );
  }

从上面图片可以看出来，图标和标题之间间有点大，我们也可以缩短减少这个间距。title 和 leading 之间默认间距是 40，我们可以使用 minLeadingWidth 设置。

  Widget buildCustomListTile(){
    return ListTile(
      minLeadingWidth : 10,
   		...
  }

另一种方法，也可以使用 Transform.translate 组件来调整 title 和 subtitle 的位置。

  Widget buildCustomTransListTile(){
    return ListTile(
      title: Transform.translate(
          offset: Offset(-16, 0), // 控制水平偏移量
          child: Text('这是标题，图标居中')
      ),
      subtitle: Transform.translate(
        offset: Offset(-16, 0), // 控制水平偏移量
        child:   Text('副标题'),
      ),
  }

OK，以上就是我用 ListTile 碰到的需求，如果能灵活使用它的属性和玩法，类似布局就不用自己再创建，直接使用 ListTile 好了。

本文由老郭种树原创，转载请注明：https://guozh.net/flutter-listtile-usage/