Flutter教学目录持续更新中
Github源代码持续更新中
1.Chip介绍
- Chip：标签，一个Material widget。 它可以将一个复杂内容实体展现在一个小块中，如联系人。
- ActionChip：在Chip基础上多了点击事件，长安提示，取消了删除属性
- ChoiceChip：在ActionChip基础上多了是否选中，取消了点击事件,跟长按事件
- FilterChip：在ChoiceChip多了checkMark等属性
- InputChip：在FilterChip基础上多了是否可用，点击事件，长安提示等属性，保留了取消了删除属性
2.Chip属性
- avatar：Chip左侧子widget
- label：文本
- labelStyle：文本样式
- labelPadding：文本内边距
- deleteIcon：删除图标（这个不是只能放删除图片，做其他操作也是可以的）
- onDeleted：删除回调
- deleteIconColor：如果删除图片是Icon支持设置颜色
- deleteButtonTooltipMessage：deleteIcon长按提示
- shape：形状
- clipBehavior = Clip.none：
- backgroundColor：背景颜色
- padding：内边距
- elevation：阴影
- shadowColor：阴影颜色
3.ActionChip属性
- avatar：Chip左侧子widget
- label：文本
- labelStyle：文本样式
- labelPadding：文本内边距
- onPressed：点击事件
- pressElevation：点击阴影
- tooltip：长安提示
- shape：形状
- clipBehavior = Clip.none：
- backgroundColor：背景颜色
- padding：内边距
- elevation：阴影
- shadowColor：阴影颜色
4.ChoiceChip属性
- avatar：Chip左侧子widget
- label：文本
- labelStyle：文本样式
- labelPadding：文本内边距
- onSelected：选中回调
- pressElevation：点击阴影
- selected：是否选中
- selectedColor：选中颜色
- shape：形状
- clipBehavior = Clip.none：
- backgroundColor：背景色
- padding：内边距
- elevation：阴影
- shadowColor：阴影颜色
- selectedShadowColor：选中阴影颜色
- avatarBorder = const CircleBorder()：avatar边框
5.FilterChip属性
- avatar：Chip左侧子widget
- label：文本
- labelStyle：文本样式
- labelPadding：文本内边距
- selected = false：是否选中
- onSelected：选中回调
- pressElevation：点击阴影
- selectedColor：选中颜色
- shape：形状
- clipBehavior = Clip.none：
- backgroundColor：背景色
- padding：内边距
- elevation：阴影
- shadowColor：阴影颜色
- selectedShadowColor：选中阴影颜色
- showCheckmark：显示选中mark，选中时会在avatar位置出现一个✔
- checkmarkColor：mark颜色
- avatarBorder = const CircleBorder()：avatar边框
6.InputChip属性
- avatar：Chip左侧子widget
- label：文本
- labelStyle：文本样式
- labelPadding：文本内边距
- selected = false：是否选中
- isEnabled = true：是否可用
- onSelected：选中回调
- deleteIcon：删除图标（这个不是只能放删除图片，做其他操作也是可以的）
- onDeleted：删除回调
- deleteIconColor：如果删除图片是Icon支持设置颜色
- deleteButtonTooltipMessage：deleteIcon长按提示
- onPressed：点击事件，不可与onSelected同时存在
- pressElevation：点击阴影
- disabledColor：不可用颜色
- selectedColor：选中颜色
- tooltip：长安提示，只有设置onPressed才生效
- shape：形状
- clipBehavior = Clip.none：
- backgroundColor：背景色
- padding：内边距
- elevation：阴影
- shadowColor：阴影色
- selectedShadowColor：选中阴影色
- showCheckmark：显示选中mark，选中时会在avatar位置出现一个✔
- checkmarkColor：mark颜色
- avatarBorder = const CircleBorder()：Chip左侧子widget边框
7.Chip
这是一个最基础的Chip，功能也相对较少
1601714295(1).png
_myChip() {
return Chip(
avatar: Icon(Icons.account_circle),
label: Text('Chip'),
labelStyle: TextStyle(
fontSize: 14,
color: Colors.black,
),
labelPadding: EdgeInsets.all(10),
deleteIcon: Icon(Icons.delete) /*Image.asset('images/scan.png')*/,
onDeleted: () {
ToastUtil.showToast('onDeleted');
},
deleteIconColor: Colors.red,
deleteButtonTooltipMessage: '删除',
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
clipBehavior: Clip.antiAlias,
backgroundColor: Colors.grey,
padding: EdgeInsets.all(10),
elevation: 10,
shadowColor: Colors.amber,
);
}
8.ActionChip
这个比Chip多了点击事件，长安提示，还可以设置点击阴影，但是去掉了删除属性
未点击.png
点击时.png
_myActionChip() {
return ActionChip(
avatar: Icon(Icons.account_circle),
label: Text('ActionChip'),
labelStyle: TextStyle(
fontSize: 14,
color: Colors.black,
),
labelPadding: EdgeInsets.all(10),
onPressed: () {
ToastUtil.showToast('onPressed');
},
pressElevation: 20,
tooltip: 'InputChip',
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
clipBehavior: Clip.antiAlias,
backgroundColor: Colors.amber,
padding: EdgeInsets.all(10),
elevation: 10,
shadowColor: Colors.amber,
);
}
9.ChoiceChip
在ActionChip基础上多了是否选中，取消了点击事件，跟长按事件
未选中.png
已选中.png
_myChoiceChip() {
return ChoiceChip(
avatar: Icon(Icons.account_circle),
label: Text('ChoiceChip'),
labelStyle: TextStyle(
fontSize: 14,
color: Colors.black,
),
labelPadding: EdgeInsets.all(10),
selected: _isSelected,
onSelected: (isSelected) {
setState(() {
_isSelected = isSelected;
});
},
pressElevation: 20,
disabledColor: Colors.grey,
selectedColor: Colors.blue,
tooltip: 'InputChip',
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
clipBehavior: Clip.antiAlias,
backgroundColor: Colors.amber,
padding: EdgeInsets.all(10),
elevation: 10,
shadowColor: Colors.amber,
selectedShadowColor: Colors.blue,
avatarBorder: CircleBorder(),
);
}
10.FilterChip
在ChoiceChip多了checkMark等属性，选中时会在avatar位置出现一个✔
1601714876(1).png
1601714884(1).png
_myFilterChip() {
return FilterChip(
avatar: Icon(Icons.account_circle),
label: Text('FilterChip'),
labelStyle: TextStyle(
fontSize: 14,
color: Colors.black,
),
labelPadding: EdgeInsets.all(10),
selected: _isSelected,
onSelected: (isSelected) {
setState(() {
_isSelected = isSelected;
});
},
pressElevation: 20,
disabledColor: Colors.grey,
selectedColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
clipBehavior: Clip.antiAlias,
backgroundColor: Colors.amber,
padding: EdgeInsets.all(10),
elevation: 10,
shadowColor: Colors.amber,
selectedShadowColor: Colors.blue,
checkmarkColor: Colors.red,
showCheckmark: true,
avatarBorder: CircleBorder(),
);
}
11.InputChip
这个相当于前面所有功能的聚合了，属性基本都有，但是有几个注意点
- onDeleted与onPressed不可同时存在
-
tooltip只有在设置了onPressed才生效
1601714901(1).png
1601714910(1).png
_myInputChip() {
return InputChip(
avatar: Icon(Icons.account_circle),
label: Text('InputChip'),
labelStyle: TextStyle(
fontSize: 14,
color: Colors.black,
),
labelPadding: EdgeInsets.all(10),
selected: _isSelected,
isEnabled: true,
onSelected: (isSelected) {
setState(() {
_isSelected = isSelected;
});
},
deleteIcon: Icon(Icons.delete),
onDeleted: () {
ToastUtil.showToast('onDeleted');
},
deleteIconColor: Colors.red,
deleteButtonTooltipMessage: '删除',
// onPressed: () {
// ToastUtil.showToast('onPressed');
// },
pressElevation: 20,
disabledColor: Colors.grey,
selectedColor: Colors.blue,
tooltip: 'InputChip',
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
clipBehavior: Clip.antiAlias,
backgroundColor: Colors.amber,
padding: EdgeInsets.all(10),
elevation: 10,
shadowColor: Colors.amber,
selectedShadowColor: Colors.blue,
checkmarkColor: Colors.red,
showCheckmark: true,
avatarBorder: CircleBorder(),
);
}
下一节：Material组件之ListTile、RefreshIndicator、ListView、Divider