微信交流群

# ListTile

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

添加标题和子标题:

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

效果如下:

设置头部和尾部的控件:

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),
)
1
2
3
4
5
6
7
8
9
10
11
12

效果如下:

如果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),
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果如下:

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),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果如下:

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

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

ListTile(
  onTap: (){
    print('onTap');
  },
  onLongPress: (){
    print('onLongPress');
  },
  ...
)
1
2
3
4
5
6
7
8
9