Flutter 教程之 ListTile 以及 CheckboxListTile 等类似控件详解
Flutter 教程之 ListTile 以及 CheckboxListTile 等类似控件详解
基本使用
本文仓库在 GitHub/flutter_widgets ,更多 Flutter 教程欢迎查看。
**描述:**固定高度的单个行,通常包含一些文本以及头部图像和尾部图标。
**用处:**从它的名字就可以看出来,一般是用来充当 ListView 的 Item。或用在 Column、Drawer 中。
示意图:
属性及描述:
const ListTile({
Key key,
Widget leading, //头部图片(显示在标题前)
Widget title, //标题
Widget subtitle, //副标题
Widget trailing, //尾部图标
bool isThreeLine = false, //是否 3 行显示
bool dense, //是否显示为紧凑模式(开启时整体条目会显示的更小)
VisualDensity visualDensity, //组件的视觉密度,通过调整它可以使得标准 Material 组件之间更加紧凑或疏远。例如:VisualDensity(horizontal: -4, vertical: -4)
EdgeInsetsGeometry contentPadding, //内边距
bool enabled = true, //是否可用(禁用点击事件)
GestureTapCallback onTap, //点击事件
GestureLongPressCallback onLongPress, //长按事件
bool selected = false, //选中状态(被选中后字体颜色与主题色一致,即 title、subtitle、secondary 是否采用 activeColor 的颜色)
Color focusColor,
Color hoverColor,
FocusNode focusNode, //焦点管理
bool autofocus = false, //自动获取焦点
})
提示:
- leading 通常是个 Icon 或 CircleAvatar;title/subtitle 通常是 Text;trailing 通常是 Icon;
- 上面都是通常的用法,实际使用中 leading/title/subtitle/trailing 都可以是任何 widget,但建议采用通常的用法
- title 只可单行显示,subtitle 根据 isThreeLine 决定;当不设置 subtitle 时(且 isThreeLine = false),整体条目会单行显示。
- leading/trailing 小部件的高度会受到整体条目固定高度的限制,宽度不受限制。(整体条目的高度会根据 [是否有subtitle、isThreeLine、dense] 固定为 [48.0、56.0;64.0、72.0;76.0、88.0] 中的某固定值)
各种实际的展示效果:
更多使用方法可以查看代码
其他类似部件
除 ListTile 之外,还有几种和它比较类似,有着各自独特展示效果和用处的控件,比如:SwitchListTile、RadioListTile、CheckboxListTile、AboutListTile。
另外需要注意的是,这些类似控件和 ListTile 并非继承关系,你可以把它们看成构成关系。比如 SwitchListTile 是由一个 Switch 和 一个ListTile 构成的;其实 SwitchListTile 内部 build
方法返回的就是一个 ‘用 Switch 做为 trailing 的 ListTile’。
为什么不是 SwitchListTile 等控件和 ListTile 不是继承关系?
这里不直接解释具体原因,把 Flutter 中的一个关于 Widget 概念引用过来,我想大概就可以解释上面的问题了。
在 Flutter 中,Widget 的功能是 “描述一个 UI 元素的配置数据”,它就是说,Widget 其实并不是表示最终绘制在设备屏幕上的显示元素,而它只是描述显示元素的一个配置数据。 实际上,Flutter 中真正代表屏幕上显示元素的类是 Element,也就是说 Widget 只是描述 Element 的配置数据!
所以 SwitchListTile 和 ListTile 只是两张不同的参数配置表,作为配置表完全没必要继承另外一张配置表:
- 这样你以后完全可以拿着这张配置表,根据这些配置参数,构建成自己想要的展示效果(即重写
build
方法,返回一个自己实现的想要的布局)。- 另外当并非继承关系时,你可以添加一些特有的事件或方法,同时可以屏蔽原有配置表中不再使用的方法事件和配置。
SwitchListTile
**描述:**带有 Switch 的 ListTile。
属性及描述:
const SwitchListTile({
Key key,
@required this.value, //当前 switch 的状态 true or false
@required this.onChanged, //switch 开关变化时回调
this.activeColor, //设定该 Tile 的主色,默认 title、subtitle、icon 等都显示该颜色
this.activeTrackColor, //打开时,switch 左边尾部的颜色
this.inactiveThumbColor, //关闭时,圆的颜色
this.inactiveTrackColor, //关闭时 switch 右边的颜色
this.activeThumbImage, //打开时,也可以给圆设置一个 image
this.inactiveThumbImage, //关闭时,可以给圆设置一个 image
this.title,
this.subtitle,
this.isThreeLine = false,
this.dense,
this.contentPadding,
this.secondary, //左侧顶部的 widget,一般是个 Icon,也可以定义成其他(类似 ListTile.leading)
this.selected = false,
this.autofocus = false,
})
从上面属性中你可以看出,这些属性基本上就是把 ListTile 和 Switch 两个控件的属性合在了一起。这里不做太多介绍。
CheckboxListTile
**描述:**带有一个 复选框 的 ListTile。
属性及描述:
const CheckboxListTile({
Key key,
@required this.value, //当前选中的状态 true or false
@required this.onChanged, //选中状态变化时回调
this.activeColor, //设定该 Tile 的主色,默认 title、subtitle、icon 等都显示该颜色
this.checkColor, //选中时的颜色
this.title,
this.subtitle,
this.isThreeLine = false,
this.dense,
this.secondary, //类似 ListTile.leading 或 ListTile.trailing
this.selected = false,
this.controlAffinity = ListTileControlAffinity.platform, //文字、图标、复选框的排列顺序
this.autofocus = false,
})
这里的属性也都是 Checkbox 和 ListTile 合并的配置表,都能一看就懂。
提示:
这里值得注意的是,对比 CheckBox 这里缺少一个属性 tristate,(这个属性决定了 CheckBox 有几种选中状态。当它的值为 true 时,CheckBox 会有 3 种状态 [true、null、false])
controlAffinity 属性的值决定了 Checkbox 在 ListTile 中的位置,ListTileControlAffinity
是个枚举类,它有 3 种类型:
- leading 把 Checkbox 放到 ListTile.leading 所在的位置,而secondary 部件放到条目的另一端
- trailing 同理
- platform 根据当前手机系统平台决定 Checkbox 的位置,而secondary 部件放到条目的另一端
RadioListTile
**描述:**带有 单选框 的 ListTile。
属性及描述:
const RadioListTile({
Key key,
@required this.value, //当前 item 所代表的值,
@required this.groupValue, //radio 所在组的值,如果value==groupValue 则为 选中状态
@required this.onChanged, //选中该 radio 时,回调该方法
this.toggleable = false, //是否可以切换
this.activeColor, //选中后,单选框的颜色
this.title,
this.subtitle,
this.isThreeLine = false,
this.dense,
this.secondary, //类似 ListTile.leading 或 ListTile.trailing
this.selected = false,
this.controlAffinity = ListTileControlAffinity.platform, //文字、图标、单选框的排列顺序
this.autofocus = false,
})
大多数属性应该都能理解,可以参看上面几个同名的属性介绍。
注意点:
- 和 Radio 的属性一样,当 value 的值(可以是任何类型值)和 groupValue 的值相同时,Radio 就是选中状态。
- 多个 RadioListTile 条目的 value 值的类型相同时,那么就可以理解为它们属于同一组的。
- value 和 groupValue 是以 == 比较是否相同的,所以如果是把自定义类作为 value 类型,记得重写 == 。
AboutListTile
这是几个控件中的一个略另类的一种。
**描述:**以 ListTile 的布局显示 App 相关信息。自带点击事件,点击后弹出弹窗。通常在 Drawer 中使用。
属性及描述:
const AboutListTile({
Key key,
Widget icon, //等于 ListTile.leading
Widget child, //等于 ListTile.title,如果不设置,将显示 applicationName
String applicationName, //弹窗的标题
String applicationVersion, //弹窗的版本号
Widget applicationIcon, //弹窗的应用图标
String applicationLegalese, //弹窗的法律信息
List<Widget> aboutBoxChildren, //弹窗中的 children
bool dense,
})
AboutListTile 默认有一个点击事件,点击后会调用 showAboutDialog(…)方法,弹出一个展示 App 相关信息的弹窗。
弹窗效果及说明:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!