Chip
中文翻译为碎片的意思,一般也是用作商品或者一些东西的标签。
好吧,还是看看怎么使用吧
构造方法:
Chip({
Key key,
this.avatar,//标签左侧Widget,一般为小图标
@required this.label,//标签
this.labelStyle,
this.labelPadding,//padding
this.deleteIcon//删除图标,
this.onDeleted//删除回调,为空时不显示删除图标,
this.deleteIconColor//删除图标的颜色,
this.deleteButtonTooltipMessage//删除按钮的tip文字,
this.shape//形状,
this.clipBehavior = Clip.none,
this.backgroundColor//背景颜色,
this.padding,
this.materialTapTargetSize//删除图标material点击区域大小,
})
代码:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Chip"),
),
body: Center(
child: Chip(
label: Text("flyou"),
),
),
);
}
}
纳尼,这是什么鬼
这跟前面讲的ToolTip显示效果也好像啊,像吗?确实很像,确实也不是很像,接着往下看吧。
好吧,刚才构造方法中有那么多的属性,我们来看下怎么使用吧。
我们给我们的Chip加上一个 avatar再来看下效果
avatar: Icon(Icons.add_location, color: Colors.lightBlue)
那么再来看下这几个与delete相关的属性吧
我们先仅仅给Chip添加 onDeleted属性
onDeleted: (){}
可以看到,我们仅仅给Chip添加了一个onDeleted属性它便给我们多出了一个删除的按钮和长按的Tooltip提示(没错,就是我们上篇文章讲到的Tooltip,感兴趣的童鞋可以去看下源码哈)。
那么,我们尝试修改与delete相关的其他属性再来看下效果
代码:
deleteIcon: Icon(Icons.delete_forever),
deleteIconColor: Colors.red,
deleteButtonTooltipMessage: "删除该条",
修改背景颜色
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.0))
当然,你还可以修改labelStyle来修改文字显示效果,修改padding来控制chip的大小。
当然,与Chip相关的还有InputChip、ChoiceChip、ActionChip和FilterChip,用法和Chip类似,只不过会稍微多几个属性而已,大家感兴趣的可以尝试下。
小结
- Chip是一个很常见的标签组件
- 使用Chip的一些属性可以很方便的完成对Chip效果的自定义
- Chip自带删除按钮和删除监听,可以方便做其他操作