在Flutter开发中,ListTile是最常用的组件之一,首先我们来看一下它的属性以及使用方法。
一.属性列表
const ListTile({
Key key,
this.leading, //title之前的widget
this.title, //列表块的主要内容
this.subtitle, //title下方显示的内容
this.trailing, //标题后显示的widget,通常是一个[Icon]widget
this.isThreeLine = false, //是否打算显示三行文本
this.dense, //此列表图块是否是垂直密集列表的一部分,如果是true文本将会更小
this.visualDensity,
this.shape,
this.contentPadding, //内容与边框之间的边距,默认是16
this.enabled = true, //列表块是否可交互
this.onTap, //当用户点击此列表图块时调用
this.onLongPress, //当用户长按此列表图块时调用
this.mouseCursor,
this.selected = false, //如果选中列表块,文本和图标的颜色将成为主题的主颜色
this.focusColor,
this.hoverColor,
this.focusNode,
this.autofocus = false,
})
根据上面的源码,我们可以尝试自己应用一下各个属性。
二.实例
上图的源代码如下(仅截取使用到ListTile的部分)
Expanded(
child: ListView(//列表视图
children: <Widget>[
ListTile( //列表块
leading: const Icon(
Icons.article_outlined,
color: Colors.pinkAccent,
size: 30,
),
trailing: const Icon(Icons.arrow_forward_ios),
title: const Text(
'账号管理',
style: TextStyle(
fontSize: 20,
fontFamily: "YouYuan",
),
),
onTap: (){},
),
ListTile(
leading: const Icon(
Icons.account_circle_outlined,
color: Colors.pinkAccent,
size: 30,
),
trailing: const Icon(Icons.arrow_forward_ios),
title: const Text(
'个人信息',
style: TextStyle(
fontSize: 20,
fontFamily: "YouYuan",
),
),
onTap: (){},
),
ListTile(
leading: const Icon(
Icons.add_moderator_outlined,
color: Colors.pinkAccent,
size: 30,
),
trailing: const Icon(Icons.arrow_forward_ios),
title:const Text(
'账号安全',
style: TextStyle(
fontSize: 20,
fontFamily: "YouYuan",
),
),
onTap: (){},
),
],
),
),