flutter Chip

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自带删除按钮和删除监听，可以方便做其他操作