Flutter 标签类控件大全Chip

老孟导读：Flutter内置了多个标签类控件，但本质上它们都是同一个控件，只不过是属性参数不同而已，在学习的过程中可以将其放在放在一起学习，方便记忆。

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

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

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

基本用法如下：

RawChip(  label: Text('老孟'),)@H_419_29@

效果如下：

禁用状态设置：

RawChip(  label: Text('老孟'),isEnabled: false,)@H_419_29@

效果如下：

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

RawChip(  avatar: CircleAvatar(    child: Text('孟'),),label: Text('老孟'),)@H_419_29@

效果如下：

设置label的样式和内边距：

RawChip(  label: Text('老孟'),labelStyle: TextStyle(color: colors.blue),labelpadding: EdgeInsets.symmetric(horizontal: 10),)@H_419_29@

效果如下：

设置删除相关属性：

RawChip(  label: Text('老孟'),onDeleted: (){    print('onDeleted');  },deleteIcon: Icon(Icons.delete),deleteIconcolor: colors.red,deletebuttontooltipMessage: '删除',)@H_419_29@

效果如下：

点击删除图标，回调onDeleted@H_419_29@。

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

RawChip(  label: Text('老孟'),shape: RoundedRectangleborder(borderRadius: borderRadius.circular(10)),backgroundcolor: colors.blue,padding: EdgeInsets.symmetric(vertical: 10),)@H_419_29@

效果如下：

设置阴影：

RawChip(  label: Text('老孟'),elevation: 8,shadowcolor: colors.blue,)@H_419_29@

效果如下：

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

设置选中状态、颜色：

bool _selected = false;RawChip(  label: Text('老孟'),selected: _selected,onSelected: (v){    setState(() {      _selected = v;    });  },selectedcolor: colors.blue,selectedShadowcolor: colors.red,)@H_419_29@

效果如下：

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

RawChip(  label: Text('老孟'),selected: true,showcheckmark: true,checkmarkcolor: colors.red,)@H_419_29@

效果如下：

showcheckmark@H_419_29@为false时，无“前置对勾”图标。

设置点击属性：

RawChip(  label: Text('老孟'),onpressed: (){    print('onpressed');  },pressElevation: 12,)@H_419_29@

效果如下：

点击时有水波纹效果。

@overrIDeWidget 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,);}@H_419_29@

@overrIDeWidget build(BuildContext context) {  assert(deBUGCheckHasMaterial(context));  return RawChip(    avatar: avatar,onSelected: onSelected,onpressed: onpressed,pressElevation: pressElevation,selected: selected,tapEnabled: true,Disabledcolor: Disabledcolor,selectedcolor: selectedcolor,tooltip: tooltip,selectedShadowcolor: selectedShadowcolor,showcheckmark: showcheckmark,checkmarkcolor: checkmarkcolor,isEnabled: isEnabled && (onSelected != null || onDeleted != null || onpressed != null),avatarborder: avatarborder,);}@H_419_29@

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(),)@H_419_29@

List<String> _filters = [];Column(  children: <Widget>[    Wrap(      spacing: 15,(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(',')}'),],)@H_419_29@

ActionChip(    avatar: CircleAvatar(      backgroundcolor: colors.grey.shade800,child: Text('孟'),onpressed: () {      print("onpressed");    })@H_419_29@