title: 'ListTile' description: '控件介绍' type: widgets

ListTile

ListTile是遵循Material Design 规范且固定高度的组件，让开发者快速的构建精美的布局，通常用于ListView的子控件，当然也可以单独使用。

添加标题和子标题：

ListTile(
  title: Text('老孟'),
  subtitle: Text('一枚有态度的程序员'),
)

效果如下：

设置头部和尾部的控件：

ListTile(
  leading: Container(
    height: 45,
    width: 45,
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(image: AssetImage('images/2.png'),fit: BoxFit.fill)),
  ),
  title: Text('老孟'),
  subtitle: Text('一枚有态度的程序员'),
  trailing: Icon(Icons.sort),
)

效果如下：

如果subtitle的内容过多，官方建议：

如果isThreeLine设置为false，文本应该不换行。

如果isThreeLine设置为true，文本应该最大显示2行。

按照官方建议isThreeLine设置为false：

ListTile(
      leading: Container(
        height: 45,
        width: 45,
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
                image: AssetImage('images/2.png'), fit: BoxFit.fill)),
      ),
      title: Text('老孟'),
      subtitle: Text('一枚有态度的程序员,公众号【老孟程序员】。一枚有态度的程序员,公众号【老孟程序员】。',
          softWrap: false, overflow: TextOverflow.ellipsis),
      trailing: Icon(Icons.sort),
    )

效果如下：

isThreeLine设置为true：

ListTile(
  leading: Container(
    height: 45,
    width: 45,
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
            image: AssetImage('images/2.png'), fit: BoxFit.fill)),
  ),
  title: Text('老孟'),
  subtitle: Text('一枚有态度的程序员,公众号【老孟程序员】。一枚有态度的程序员,公众号【老孟程序员】。',
      maxLines: 2, overflow: TextOverflow.ellipsis),
  isThreeLine: true,
  trailing: Icon(Icons.sort),
)

效果如下：

dense属性设置为true时，内容及图标将会变小、变得更紧密。selected设置为true，文字及图标颜色会发生变化。

最后还可以给ListTile添加单击事件和长按事件：

ListTile(
  onTap: (){
    print('onTap');
  },
  onLongPress: (){
    print('onLongPress');
  },
  ...
)