[Flutter Widget]Chip
[Flutter Widget]Chip
前言
在前面的文章中我们看了下Tooltip的用法，在文章的最后也给大家留了一个问题，自定义自己的Tooltip。
可以看到在上图中，同样是Tooltip，我们修改了Tooltip的背景颜色，以及装饰器的边框弧度，还有Tooltip的宽高比。
其实针对上面的界面，我们只需要修改Tooltip源码中BoxDecoration的color属性以及borderRadius属性就可以实现背景颜色以及边弧度的修改。
修改Center的 widthFactor以及heightFactor属性就可以完成对Tooltip宽高比的修改。
/// The amount of vertical distance bet final double verticalOffset; /// borderRadius of BoxDecoration final double borderRadius; ///widthFactor of tip final double widthFactor; ///heightFactor of tip final double heightFactor; ///backgroundColor of tip final Color backgroundColor;
但是，同样为了便于扩展，我们可以把这几个属性也抽离出来，添加入我们自定Tooltip的构造方法中即可。
下面还是来看下整个代码实现吧：
代码比较多，点击阅读原文查看吧，哈
代码稍微有点长，还是主要看_TooltipOverlay部分即可。
下面我们可以尝试修改我们刚才自定义的几个属性来看下效果：
代码：
MyTooltip(
message: "点击删除",
preferBelow: false,
backgroundColor: Colors.lightGreenAccent,
borderRadius: 10.0,
widthFactor: 3.0,
padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 15.0),
child: Icon(
Icons.delete,
size: 50.0,
))
当然大家也可以根据自己的需要给tip添加背景图片，这里就不在具体演示了。
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点击区域大小,
})说了这么多，还是真的不如先来个最简单的Chip看下什么效果
代码：
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: "删除该条",
修改背景颜色
backgroundColor: Colors.lightGreenAccent
或许你对Chip的显示样式还不是很满意，那么你就真的可以试试shape属性了
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.0))
当然，你还可以修改labelStyle来修改文字显示效果，修改padding来控制chip的大小。
当然，与Chip相关的还有InputChip、ChoiceChip、ActionChip和FilterChip，用法和Chip类似，只不过会稍微多几个属性而已，大家感兴趣的可以尝试下。
小结
- Chip是一个很常见的标签组件
- 使用Chip的一些属性可以很方便的完成对Chip效果的自定义
- Chip自带删除按钮和删除监听，可以方便做其他操作
试一试
根据以前讲到过的东东，试下如下效果（从来不要求你跟我一样，哈）
