程序员如果敲一会就停半天,抱着一杯茶,表情拧巴,那才是在编程
重要消息
Clip 是Material Design的一个 Widget,用来实现标签效果,Clip中通过属性可配置一个文本、完整的 Widget、一个动作(比如按钮点击)。
1 基本使用效果如下
![在这里插入图片描述 Flutter Clip 用来实现文本标签的效果_Flutter](//dev-img.mos.moduyun.com/20231027/035df244-1cae-42d5-8bf9-393b682c3802.png)
class ClipHomeState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Clip")),
body: const Center(
///-----------------------------------------------------
///核心代码
child: Chip(
//左侧的小组件
avatar: CircleAvatar(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
child: Text('早'),
),
//右侧的文本
label: Text('Flutter 基础 '),
),
///-----------------------------------------------------
),
);
}
}
Chip 的 avatar 属性配置的是一个Widget,所这里可以组合足够复杂的 Widget合集,在本实例中只是使用了 CircleAvatar,CircleAvatar常用来展示圆形的小头像。
2 结合 Wrap 组件实现多标签效果
class ClipWrapHomeState extends State {
final List<String> _tagList = [
"早起", "晚睡", "测试", "努力",
"不想睡觉", "清晨的太阳", "这是什么", "哈哈"
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Clip")),
body: Padding(
///-----------------------------------------------------
///核心代码
padding: EdgeInsets.all(12),
child: Wrap(
spacing: 10,
children: _tagList.map((e) => Chip(label: Text(e))).toList(),
),
///-----------------------------------------------------
),
);
}
}
![在这里插入图片描述 Flutter Clip 用来实现文本标签的效果_flutter_02](//dev-img.mos.moduyun.com/20231027/314bacd2-0bc3-493e-8fcd-4fba44338e67.png)
3 Clip 的属性概述
3.1 label 文本相关配置
label 是用来配置文本的,labelStyle是用来设置这个文本的样式,如颜色、大小 、粗细等等,labelPadding是用来设置文本四周的边距的。
Chip buildChip() {
return const Chip(
//左侧的小组件
avatar: CircleAvatar(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
child: Text('早'),
),
///右侧的文本
label: Text('Flutter 基础 '),
labelStyle: TextStyle(color: Colors.red),
labelPadding: EdgeInsets.only(left: 12, right: 12),
);
}
}
![在这里插入图片描述 Flutter Clip 用来实现文本标签的效果_ico_03](//dev-img.mos.moduyun.com/20231027/6e486434-768a-4fc5-b131-a4764a66e6d6.png)
3.2 右侧的删除按钮配置 deleteIcon
avatar 是用来配置左侧的显示的小 Widget,deleteIcon是用来配置右侧的删除按钮的。
Chip buildChip() {
return Chip(
//左侧的小组件
avatar: const CircleAvatar(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
child: Text('早'),
),
///右侧的文本
label: Text('Flutter 基础 '),
labelStyle: TextStyle(color: Colors.red),
labelPadding: EdgeInsets.only(left: 12, right: 12),
///
deleteIcon: Icon(Icons.close),
//删除按钮颜色
deleteIconColor: Colors.red,
//长按的提示
deleteButtonTooltipMessage: "删除",
onDeleted: () {
print("--点击了删除");
},
);
}
![在这里插入图片描述 Flutter Clip 用来实现文本标签的效果_flutter_04](//dev-img.mos.moduyun.com/20231027/b5a62b51-dd64-4571-9355-7d6f5d9bb658.png)
3.3 阴影设置
属性 elevation 用来设置阴影高度,shadowColor属性用来设置阴影颜色
Chip buildChip() {
return Chip(
//左侧的小组件
avatar: const CircleAvatar(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
child: Text('早'),
),
///右侧的文本
label: Text('Flutter 基础 '),
labelStyle: TextStyle(color: Colors.red),
labelPadding: EdgeInsets.only(left: 12, right: 12),
///
deleteIcon: Icon(Icons.close),
//删除按钮颜色
deleteIconColor: Colors.red,
//长按的提示
deleteButtonTooltipMessage: "删除",
onDeleted: () {
print("--点击了删除");
},
///
elevation: 10,//阴影 高度
shadowColor: Colors.blue,//阴影颜色
backgroundColor: Colors.grey,//背景色
);
}
完毕