我要评论概述：
flutter 标签类控件大全chipflutter内置了多个标签类控件，但本质上它们都是同一个控件，只不过是属性参数不同而已，在学习的过程中可以将其放在放在一起学习，方便记忆。
rawchip
material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用如下控件：
- chip
- inputchip
- choicechip
- filterchip
- actionchip
如果你想自定义标签类控件，通常使用此控件。
rawchip可以通过设置onselected被选中，设置ondeleted被删除，也可以通过设置onpressed而像一个按钮，它有一个label属性，有一个前置（avatar）和后置图标（deleteicon）。
rawchip(label: text('rawchip')),
效果：
设置左侧控件，一般是图标：
rawchip(
avatar: circleavatar(child: text('r'),),
label: text('rawchip'),
isenabled: false,//禁止点选状态
),
设置label的样式和内边距：
rawchip(
avatar: circleavatar(child: text('r'),),
label: text('rawchip'),
// isenabled: false,//禁止点选状态
labelpadding: edgeinsets.symmetric(horizontal: 20),
padding: edgeinsets.only(left: 10,right: 10,top: 5),
),
设置删除相关属性：
rawchip(
label: text('rawchip'),
ondeleted: (){
print('ondeleted');
},
deleteicon: icon(icons.delete),
deleteiconcolor: colors.red,
deletebuttontooltipmessage: "删除",
// isenabled: false,//禁止点选状态
labelpadding: edgeinsets.symmetric(horizontal: 10),
padding: edgeinsets.only(left: 10,right: 10,top: 5,bottom: 5),
),
设置形状、背景颜色及内边距,阴影：
rawchip(
label: text('rawchip'),
shape: roundedrectangleborder(borderradius: borderradius.circular(10)),
backgroundcolor: colors.blue,
padding: edgeinsets.symmetric(vertical: 10),
elevation: 8,
shadowcolor: colors.grey,
)
materialtaptargetsize是配置组件点击区域大小的属性，很多组件都有此属性，比如：
[floatingactionbutton], only the mini tap target size is increased. * [materialbutton] * [outlinebutton] * [flatbutton] * [raisedbutton] * [timepicker] * [snackbar] * [chip] * [rawchip] * [inputchip] * [choicechip] * [filterchip] * [actionchip] * [radio] * [switch] * [checkbox]
materialtaptargetsize有2个值，分别为：
- padded：最小点击区域为48*48。
- shrinkwrap：子组件的实际大小。
设置选中状态、颜色：
rawchip(
label: text('rawchip'),
selected: _selected,
onselected: (v){
setstate(() {
_selected =v;
});
},
selectedcolor: colors.blue,
selectedshadowcolor: colors.red,
)
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,
);
}
基本用法：
inputchip(
avatar: circleavatar(
radius: 12.0,
),
label: text(
'inputchip',
style: textstyle(fontsize: 12.0),
),
shadowcolor: colors.grey,
deleteicon: icon(
icons.close,
color: colors.black54,
size: 14.0,
),
ondeleted: () {
print('ondeleted');
},
onselected: (bool selected) {
setstate(() {
_selected = selected;
});
},
selectedcolor: colors.orange,
disabledcolor: colors.grey,
selected: _selected,
materialtaptargetsize: materialtaptargetsize.shrinkwrap,
labelstyle: textstyle(color: colors.black54),
),
choicechip
允许从一组选项中进行单个选择，创建一个类似于单选按钮的标签，本质上choicechip也是一个rawchip，choicechip本身不具备单选属性。
int _selectedindex = 0;
wrap(
spacing: 5,
children: list.generate(20, (index){
return choicechip(
label: text('测试 $index'),
selected: _selectedindex==index,
onselected: (v){
setstate(() {
_selectedindex =index;
});
},
);
}).tolist(),
)
filterchip
filterchip可以作为过滤标签，本质上也是一个rawchip，用法如下：
list<string> _filters = [];
_buildfilterchip(){
return column(
children: [
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(',')}'),
],
);
}
运行效果：
总结：
本篇主要讲了以下几种chip组件的用法案例：
- rawchip：是material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用其他的标签控件。
- inputchip：以紧凑的形式表示一条复杂的信息，例如实体(人，地方或事物)或对话文本。inputchip 本质上也是rawchip，用法和rawchip一样
- choicechip：允许从一组选项中进行单个选择，创建一个类似于单选按钮的标签，本质上choicechip也是一个rawchip，choicechip本身不具备单选属性。
- filterchip：可以作为过滤标签，本质上也是一个rawchip
- actionchip：显示与主要内容有关的一组动作，本质上也是一个rawchip
- chip：一个简单的标签控件，仅显示信息和删除相关属性，是一个简化版的rawchip，用法和rawchip一样
以上就是flutter widgets之标签类控件chip详解的详细内容，更多关于flutter widgets标签类控件chip的资料请关注代码网其它相关文章！
发表评论