概述:
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的资料请关注其它相关文章!