Flutter 标签类控件大全Chip
老孟导读:Flutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆。
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(
label: Text('老孟'),
labelStyle: TextStyle(color: Colors.blue),
labelPadding: EdgeInsets.symmetric(horizontal: 10),
)
效果如下:
设置删除相关属性:
RawChip(
label: Text('老孟'),
onDeleted: (){
print('onDeleted');
},
deleteIcon: Icon(Icons.delete),
deleteIconColor: Colors.red,
deleteButtonTooltipMessage: '删除',
)
效果如下:
点击删除图标,回调onDeleted
。
设置形状、背景颜色及内边距:
RawChip(
label: Text('老孟'),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
backgroundColor: Colors.blue,
padding: EdgeInsets.symmetric(vertical: 10),
)
效果如下:
设置阴影:
RawChip(
label: Text('老孟'),
elevation: 8,
shadowColor: Colors.blue,
)
效果如下:
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:子组件的实际大小。
设置选中状态、颜色:
bool _selected = false;
RawChip(
label: Text('老孟'),
selected: _selected,
onSelected: (v){
setState(() {
_selected = v;
});
},
selectedColor: Colors.blue,
selectedShadowColor: Colors.red,
)
效果如下:
设置选中状态下“前置对勾”图标:
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");
})
效果如下:
效果很像按钮类控件。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 动态曲线图(linechart)--Matplotlib绘制
- 分布式事务、分布式锁、分布式session
- Redis为什么变慢了?常见延迟问题定位与分析
- PyTorch Trick集锦
- client-go 之 Indexer 的理解
- 你的登录接口真的安全吗?
- Python,你真的会使用 staticmethod 和 classmethod 吗?
- GitLabCI/CD自动集成和部署到远程服务器
- istio-cni详解
- 【Pytorch 】笔记八:Tensorboard 可视化与 Hook 机制
- K近邻算法:以"同类相吸"解决分类问题!
- ROS与PCL中点云数据之间的转换
- 啊,http2还没搞明白,http3又来了?
- 掌握Linux文件权限,看这篇就够了
- 【shell脚本入门到精通】基本规范及良好的编写习惯