Chip类控件(Chip、InputChip、ChoiceChip、FilterChip、ActionChip)

RawChip

Material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用如下控件：

• Chip
• InputChip
• ChoiceChip
• FilterChip
• ActionChip

如果你想自定义标签类控件时通常使用此控件。

RawChip可以通过设置 onSelected 被选中，设置 onDeleted 被删除，也可以通过设置 onPressed 而像一个按钮，它有一个 label 属性，有一个前置（avatar）和后置图标（deleteIcon）。

基本用法如下：

RawChip(label: Text('唐德'),
)

效果如下：

禁用状态设置：

RawChip(label: Text('唐德'),isEnabled: false,
)

效果如下：

设置左侧控件，一般是图标：

RawChip(avatar: CircleAvatar(child: Text('德'),),label: Text('唐德'),
)

效果如下：

设置label的样式和内边距：

RawChip(avatar: CircleAvatar(child: Text('德'),),label: Text('唐德'),labelStyle: TextStyle(color: Colors.red),labelPadding: EdgeInsets.symmetric(horizontal: 10),
),

效果如下：

设置删除相关属性：

RawChip(avatar: CircleAvatar(child: Text('德'),),label: Text('唐德'),labelStyle: TextStyle(color: Colors.red),labelPadding: EdgeInsets.symmetric(horizontal: 10),deleteIcon: Icon(Icons.delete),deleteIconColor: Colors.blue,deleteButtonTooltipMessage: '删除',onDeleted: () {
    },
),

注意事项：

• 需要同事设置deleteIcon，onDeleted；删除按钮才会显示
• 设置deleteButtonTooltipMessage之后，长按显示灰色提示文本

效果如下：

点击删除图标，回调onDeleted。

设置形状、背景颜色及内边距：

RawChip(label: Text('唐德'),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),backgroundColor: Colors.blue,
),

效果如下：

设置阴影：

RawChip(label: Text('唐德'),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),backgroundColor: Colors.blue,elevation: 12,shadowColor: Colors.red,
),

注意事项：

• elevation，shadowColor同时设置

效果如下：

materialTapTargetSize属性控制最小点击区域，详情查看：MaterialTapTargetSize

设置选中状态、颜色：

bool _selected = false;
RawChip(label: Text('唐德'),onSelected: (v) {
    setState(() {
    _selected = v;});},selected: _selected,
),

未选中效果：

选中效果：

设置选中状态下“前置对勾”图标：

RawChip(label: Text('唐德'),selected: true,showCheckmark: true,checkmarkColor: Colors.red,
),

效果如下：

showCheckmark为false时，无“前置对勾”图标。
设置点击属性：

RawChip(label: Text('唐德'),onPressed: () {
    print('onPressed');},pressElevation: 12,
),

效果如下：

点击时有水波纹效果。

Chip

Chip是一个简单的标签控件，仅显示信息和 删除 相关属性，是一个简化版的RawChip，用法和RawChip一样。源代码如下：

@override
Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));return RawChip(avatar: avatar,label: label,labelStyle: labelStyle,labelPadding: labelPadding,deleteIcon: deleteIcon,onDeleted: onDeleted,deleteIconColor: deleteIconColor,deleteButtonTooltipMessage: deleteButtonTooltipMessage,tapEnabled: false,shape: shape,clipBehavior: clipBehavior,focusNode: focusNode,autofocus: autofocus,backgroundColor: backgroundColor,padding: padding,materialTapTargetSize: materialTapTargetSize,elevation: elevation,shadowColor: shadowColor,isEnabled: true,);
}

InputChip

以紧凑的形式表示一条复杂的信息，例如实体（人，地方或事物）或对话文本。

InputChip 本质上也是RawChip，用法和RawChip一样。源代码如下：

@override
Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));return RawChip(avatar: avatar,label: label,labelStyle: labelStyle,labelPadding: labelPadding,deleteIcon: deleteIcon,onDeleted: onDeleted,deleteIconColor: deleteIconColor,deleteButtonTooltipMessage: deleteButtonTooltipMessage,onSelected: onSelected,onPressed: onPressed,pressElevation: pressElevation,selected: selected,tapEnabled: true,disabledColor: disabledColor,selectedColor: selectedColor,tooltip: tooltip,shape: shape,clipBehavior: clipBehavior,focusNode: focusNode,autofocus: autofocus,backgroundColor: backgroundColor,padding: padding,materialTapTargetSize: materialTapTargetSize,elevation: elevation,shadowColor: shadowColor,selectedShadowColor: selectedShadowColor,showCheckmark: showCheckmark,checkmarkColor: checkmarkColor,isEnabled: isEnabled && (onSelected != null || onDeleted != null || onPressed != null),avatarBorder: avatarBorder,);
}

ChoiceChip

允许从一组选项中进行单个选择，创建一个类似于单选按钮的标签，本质上ChoiceChip也是一个RawChip，ChoiceChip本身不具备单选属性。

单选demo如下：

int _selectIndex = 0;
Wrap(spacing: 15,children: List.generate(10, (index) {
    return ChoiceChip(label: Text('唐德 $index'),selected: _selectIndex == index,onSelected: (v) {
    setState(() {
    _selectIndex = index;});},);}).toList(),
)

效果如下：

本控件由普通程序员提供。

FilterChip

FilterChip可以作为过滤标签，本质上也是一个RawChip，用法如下：

List<String> _filters = [];Column(children: <Widget>[Wrap(spacing: 15,children: List.generate(10, (index) {
    return FilterChip(label: Text('唐德 $index'),selected: _filters.contains('$index'),onSelected: (v) {
    setState(() {
    if(v){
    _filters.add('$index');}else{
    _filters.removeWhere((f){
    return f == '$index';});}});},);}).toList(),),Text('选中：${_filters.join(',')}'),],
)

效果如下：

ActionChip

显示与主要内容有关的一组动作，本质上也是一个RawChip，用法如下：

ActionChip(avatar: CircleAvatar(backgroundColor: Colors.grey.shade800,child: Text('唐'),),label: Text('唐德'),onPressed: () {
    print("onPressed");})

效果如下：


效果很像按钮类控件。