这篇“Flutter Widgets标签类控件Chip怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Flutter Widgets标签类控件Chip怎么使用”文章吧。
Flutter 标签类控件大全ChipFlutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆。
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是一个简单的标签控件,仅显示信息和删除
相关属性,是一个简化版的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 本质上也是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也是一个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可以作为过滤标签,本质上也是一个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(',')}'), ], ); }
以上就是关于“Flutter Widgets标签类控件Chip怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。