Flutter Chip控件小结
在 Flutter 中,Chip 是一种用于显示简洁信息的组件。它通常用来展示标签、属性、短的文本片段等,并可以包含可选的删除按钮或其他图标。本文将详细介绍 Chip 控件及其各种类型和使用场景。
Chip
Chip 是 Flutter 中用于显示紧凑信息的小部件,通常包含一个标签和可选的图标或删除按钮,并且可以用作交互式元素。
Chip 控件的主要特点
紧凑:Chip 控件设计紧凑,适合展示短的、简洁的信息。
可交互:Chip 控件可以包含删除按钮或其他图标,支持交互操作。
可定制:Chip 控件可以自定义颜色、形状、图标等。
属性解析
const Chip({
super.key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
this.deleteIcon,
this.onDeleted,
this.deleteIconColor,
this.deleteButtonTooltipMessage,
this.side,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.color,
this.backgroundColor,
this.padding,
this.visualDensity,
this.materialTapTargetSize,
this.elevation,
this.shadowColor,
this.surfaceTintColor,
this.iconTheme,
})
- avatar (Widget?): 要显示在标签前的小部件,通常是一个圆形头像。
- label (Widget): 必需参数,表示 Chip 的主要内容,通常是文本。
- labelStyle (TextStyle?): 标签的文本样式。
- labelPadding (EdgeInsetsGeometry?): 标签的内边距。
- deleteIcon (Widget?): 删除图标的小部件。
- onDeleted (VoidCallback?): 当删除图标被点击时调用的回调函数。
- deleteIconColor (Color?): 删除图标的颜色。
- deleteButtonTooltipMessage (String?): 删除按钮的工具提示信息。
- side (BorderSide?): 边框的样式。
- shape (OutlinedBorder?): Chip 的形状。
- clipBehavior (Clip): 定义 Chip 的剪裁行为,默认为 Clip.none。
- focusNode (FocusNode?): 处理键盘焦点的节点。
- autofocus (bool): 是否自动获得焦点。
- color (Color?): Chip 的颜色。这已弃用,请使用 backgroundColor。
- backgroundColor (Color?): Chip 的背景颜色。
- padding (EdgeInsetsGeometry?): Chip 的内边距。
- visualDensity (VisualDensity?): 定义 Chip 的视觉密度。
- materialTapTargetSize (MaterialTapTargetSize?): 控制触摸目标的大小。
- elevation (double?): Chip 的阴影高度。
- shadowColor (Color?): 阴影的颜色。
- surfaceTintColor (Color?): 表面颜色的色调。
- iconTheme (IconThemeData?): 图标主题,用于控制图标的外观。
示例
class WidgetPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Chip 示例')),
body: Center(
child: Wrap(
spacing: 8.0,
children: [
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: Text('A'),
),
label: Text('Avatar Chip'),
onDeleted: () {
print('Avatar Chip deleted');
},
deleteIcon: Icon(Icons.cancel),
deleteIconColor: Colors.red,
deleteButtonTooltipMessage: 'Remove',
backgroundColor: Colors.blue.shade100,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue.shade900,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
side: BorderSide(color: Colors.blue.shade900),
),
elevation: 4.0,
shadowColor: Colors.blueAccent,
padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Chip(
label: Text('Simple Chip'),
),
Chip(
label: Text('Disabled Chip'),
onDeleted: null, // 禁用删除功能
),
],
),
),
),
);
}
}
InputChip
InputChip 是 Flutter 中的一个小部件,用于显示可交互的紧凑信息。与普通的 Chip 不同,InputChip 具有更多的交互行为,例如选择和删除操作
属性解析
const InputChip({
super.key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
this.selected = false,
this.isEnabled = true,
this.onSelected,
this.deleteIcon,
this.onDeleted,
this.deleteIconColor,
this.deleteButtonTooltipMessage,
this.onPressed,
this.pressElevation,
this.disabledColor,
this.selectedColor,
this.tooltip,
this.side,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.color,
this.backgroundColor,
this.padding,
this.visualDensity,
this.materialTapTargetSize,
this.elevation,
this.shadowColor,
this.surfaceTintColor,
this.iconTheme,
this.selectedShadowColor,
this.showCheckmark,
this.checkmarkColor,
this.avatarBorder = const CircleBorder(),
})
- avatar (Widget?): 要显示在标签前的小部件,通常是一个圆形头像。
- label (Widget): 必需参数,表示 Chip 的主要内容,通常是文本。
- labelStyle (TextStyle?): 标签的文本样式。
- labelPadding (EdgeInsetsGeometry?): 标签的内边距。
- selected (bool): 是否选中此 Chip,默认值为 false。
- isEnabled (bool): 是否启用此 Chip,默认值为 true。
- onSelected (ValueChanged?):当 Chip 被选中或取消选中时调用的回调函数。
- deleteIcon (Widget?): 删除图标的小部件。
- onDeleted (VoidCallback?): 当删除图标被点击时调用的回调函数。
- deleteIconColor (Color?): 删除图标的颜色。
- deleteButtonTooltipMessage (String?): 删除按钮的工具提示信息。
- onPressed (VoidCallback?): 当 Chip 被按下时调用的回调函数。
- pressElevation (double?): 按下时的阴影高度。
- disabledColor (Color?): Chip 禁用时的背景颜色。
- selectedColor (Color?): Chip 选中时的背景颜色。
- tooltip (String?): 此 Chip 的工具提示信息。
- side (BorderSide?): 边框的样式。
- shape (OutlinedBorder?): InputChip 的形状。
- clipBehavior (Clip): 定义 InputChip 的剪裁行为,默认为 Clip.none。
- focusNode (FocusNode?): 处理键盘焦点的节点。
- autofocus (bool): 是否自动获得焦点。
- color (Color?): InputChip 的颜色。这已弃用,请使用 backgroundColor。
- backgroundColor (Color?): InputChip 的背景颜色。
- padding (EdgeInsetsGeometry?): InputChip 的内边距。
- visualDensity (VisualDensity?): 定义 InputChip 的视觉密度。
- materialTapTargetSize (MaterialTapTargetSize?): 控制触摸目标的大小。
- elevation (double?): InputChip 的阴影高度。
- shadowColor (Color?): 阴影的颜色。
- surfaceTintColor (Color?): 表面颜色的色调。
- iconTheme (IconThemeData?): 图标主题,用于控制图标的外观。
- selectedShadowColor (Color?): Chip 选中时的阴影颜色。
- showCheckmark (bool?): 是否显示复选标记。
- checkmarkColor (Color?): 复选标记的颜色。
- avatarBorder (ShapeBorder): 头像的边框,默认为 CircleBorder()。
示例
class WidgetPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('InputChip 示例')),
body: Center(
child: Wrap(
spacing: 8.0,
children: [
InputChip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: Text('A'),
),
label: Text('Selectable Chip'),
selected: true,
onSelected: (bool selected) {
print(
'Selectable Chip ${selected ? "selected" : "deselected"}');
},
onDeleted: () {
print('Selectable Chip deleted');
},
deleteIcon: Icon(Icons.cancel),
deleteIconColor: Colors.red,
deleteButtonTooltipMessage: 'Remove',
selectedColor: Colors.blue.shade100,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue.shade900,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
side: BorderSide(color: Colors.blue.shade900),
),
pressElevation: 4.0,
shadowColor: Colors.blueAccent,
padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
InputChip(
label: Text('Simple Chip'),
onPressed: () {
print('Simple Chip pressed');
},
),
InputChip(
label: Text('Disabled Chip'),
isEnabled: false,
),
],
),
),
),
);
}
}
ChoiceChip
ChoiceChip 是 Flutter 中的一种 Chip,用于从一组选项中进行单选。ChoiceChip 支持各种自定义外观和交互行为
属性解析
const ChoiceChip({
super.key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
this.onSelected,
this.pressElevation,
required this.selected,
this.selectedColor,
this.disabledColor,
this.tooltip,
this.side,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.color,
this.backgroundColor,
this.padding,
this.visualDensity,
this.materialTapTargetSize,
this.elevation,
this.shadowColor,
this.surfaceTintColor,
this.iconTheme,
this.selectedShadowColor,
this.showCheckmark,
this.checkmarkColor,
this.avatarBorder = const CircleBorder(),
})
- avatar (Widget?): 要显示在标签前的小部件,通常是一个圆形头像。
- label (Widget): 必需参数,表示 Chip 的主要内容,通常是文本。
- labelStyle (TextStyle?): 标签的文本样式。
- labelPadding (EdgeInsetsGeometry?): 标签的内边距。
- onSelected (ValueChanged?): 当 Chip 被选中或取消选中时调用的回调函数。
- pressElevation (double?): 按下时的阴影高度。
- selected (bool): 必需参数,当前是否选中了这个 Chip。
- selectedColor (Color?): 选中时的背景颜色。
- disabledColor (Color?): 禁用状态下的背景颜色。
- tooltip (String?): 此 Chip 的工具提示信息。
- side (BorderSide?): 边框的样式。
- shape (OutlinedBorder?): ChoiceChip 的形状。
- clipBehavior (Clip): 定义 ChoiceChip 的剪裁行为,默认为 Clip.none。
- focusNode (FocusNode?): 处理键盘焦点的节点。
- autofocus (bool): 是否自动获得焦点。
- color (Color?): ChoiceChip 的颜色。这已弃用,请使用 backgroundColor。
- backgroundColor (Color?): ChoiceChip 的背景颜色。
- padding (EdgeInsetsGeometry?): ChoiceChip 的内边距。
- visualDensity (VisualDensity?): 定义 ChoiceChip 的视觉密度。
- materialTapTargetSize (MaterialTapTargetSize?): 控制触摸目标的大小。
- elevation (double?): ChoiceChip 的阴影高度。
- shadowColor (Color?): 阴影的颜色。
- surfaceTintColor (Color?): 表面颜色的色调。
- iconTheme (IconThemeData?): 图标主题,用于控制图标的外观。
- selectedShadowColor (Color?): 选中时的阴影颜色。
- showCheckmark (bool?): 是否显示复选标记。
- checkmarkColor (Color?): 复选标记的颜色。
- avatarBorder (ShapeBorder): 头像的边框,默认为 CircleBorder()。
示例
class WidgetPage extends StatefulWidget {
@override
_WidgetPageState createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ChoiceChip 示例')),
body: Center(
child: Wrap(
spacing: 8.0,
children: List<Widget>.generate(3, (int index) {
return ChoiceChip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: Text('C$index'),
),
label: Text('Choice $index'),
selected: selectedIndex == index,
onSelected: (bool selected) {
setState(() {
selectedIndex = selected ? index : selectedIndex;
});
},
selectedColor: Colors.blue.shade100,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
color: selectedIndex == index
? Colors.blue.shade900
: Colors.grey,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
side: BorderSide(
color: selectedIndex == index
? Colors.blue.shade900
: Colors.grey,
),
),
pressElevation: 4.0,
shadowColor: Colors.blueAccent,
padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
showCheckmark: false,
);
}),
),
),
),
);
}
}
FilterChip
FilterChip 是 Flutter 中的一种 Chip,用于表示一个可以选择或取消选择的选项,通常用于筛选内容。
属性解析
const FilterChip({
super.key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
this.selected = false,
required this.onSelected,
this.deleteIcon,
this.onDeleted,
this.deleteIconColor,
this.deleteButtonTooltipMessage,
this.pressElevation,
this.disabledColor,
this.selectedColor,
this.tooltip,
this.side,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.color,
this.backgroundColor,
this.padding,
this.visualDensity,
this.materialTapTargetSize,
this.elevation,
this.shadowColor,
this.surfaceTintColor,
this.iconTheme,
this.selectedShadowColor,
this.showCheckmark,
this.checkmarkColor,
this.avatarBorder = const CircleBorder(),
})
- avatar (Widget?): 要显示在标签前的小部件,通常是一个圆形头像。
- label (Widget): 必需参数,表示 Chip 的主要内容,通常是文本。
- labelStyle (TextStyle?): 标签的文本样式。
- labelPadding (EdgeInsetsGeometry?): 标签的内边距。
- selected (bool): 是否选中此 Chip,默认值为 false。
- onSelected (ValueChanged): 当 Chip 被选中或取消选中时调用的回调函数。
- deleteIcon (Widget?): 删除图标的小部件。
- onDeleted (VoidCallback?): 当删除图标被点击时调用的回调函数。
- deleteIconColor (Color?): 删除图标的颜色。
- deleteButtonTooltipMessage (String?): 删除按钮的工具提示信息。
- pressElevation (double?): 按下时的阴影高度。
- disabledColor (Color?): Chip 禁用时的背景颜色。
- selectedColor (Color?): Chip 选中时的背景颜色。
- tooltip (String?): 此 Chip 的工具提示信息。
- side (BorderSide?): 边框的样式。
- shape (OutlinedBorder?): FilterChip 的形状。
- clipBehavior (Clip): 定义 FilterChip 的剪裁行为,默认为 Clip.none。
- focusNode (FocusNode?): 处理键盘焦点的节点。
- autofocus (bool): 是否自动获得焦点。
- color (Color?): FilterChip 的颜色。这已弃用,请使用 backgroundColor。
- backgroundColor (Color?): FilterChip 的背景颜色。
- padding (EdgeInsetsGeometry?): FilterChip 的内边距。
- visualDensity (VisualDensity?): 定义 FilterChip 的视觉密度。
- materialTapTargetSize (MaterialTapTargetSize?): 控制触摸目标的大小。
- elevation (double?): FilterChip 的阴影高度。
- shadowColor (Color?): 阴影的颜色。
- surfaceTintColor (Color?): 表面颜色的色调。
- iconTheme (IconThemeData?): 图标主题,用于控制图标的外观。
- selectedShadowColor (Color?): Chip 选中时的阴影颜色。
- showCheckmark (bool?): 是否显示复选标记。
- checkmarkColor (Color?): 复选标记的颜色。
- avatarBorder (ShapeBorder): 头像的边框,默认为 CircleBorder()。
示例
class WidgetPage extends StatefulWidget {
@override
_WidgetPageState createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
List<String> _filters = [];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FilterChip 示例')),
body: Center(
child: Wrap(
spacing: 8.0,
children: [
FilterChip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: Text('F1'),
),
label: Text('Filter 1'),
selected: _filters.contains('Filter 1'),
onSelected: (bool selected) {
setState(() {
if (selected) {
_filters.add('Filter 1');
} else {
_filters.remove('Filter 1');
}
});
},
selectedColor: Colors.blue.shade100,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
color: _filters.contains('Filter 1')
? Colors.blue.shade900
: Colors.grey,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
side: BorderSide(
color: _filters.contains('Filter 1')
? Colors.blue.shade900
: Colors.grey,
),
),
pressElevation: 4.0,
shadowColor: Colors.blueAccent,
padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
showCheckmark: false,
),
FilterChip(
avatar: CircleAvatar(
backgroundColor: Colors.green.shade900,
child: Text('F2'),
),
label: Text('Filter 2'),
selected: _filters.contains('Filter 2'),
onSelected: (bool selected) {
setState(() {
if (selected) {
_filters.add('Filter 2');
} else {
_filters.remove('Filter 2');
}
});
},
selectedColor: Colors.green.shade100,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
color: _filters.contains('Filter 2')
? Colors.green.shade900
: Colors.grey,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
side: BorderSide(
color: _filters.contains('Filter 2')
? Colors.green.shade900
: Colors.grey,
),
),
pressElevation: 4.0,
shadowColor: Colors.greenAccent,
padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
showCheckmark: false,
),
],
),
),
),
);
}
}
ActionChip
ActionChip 是 Flutter 中的一种 Chip,用于表示一个可以触发操作的选项。ActionChip 支持各种自定义外观和交互行为
属性解析
const ActionChip({
super.key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
this.onPressed,
this.pressElevation,
this.tooltip,
this.side,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.color,
this.backgroundColor,
this.disabledColor,
this.padding,
this.visualDensity,
this.materialTapTargetSize,
this.elevation,
this.shadowColor,
this.surfaceTintColor,
this.iconTheme,
})
- avatar (Widget?): 要显示在标签前的小部件,通常是一个圆形头像。
- label (Widget): 必需参数,表示 Chip 的主要内容,通常是文本。
- labelStyle (TextStyle?): 标签的文本样式。
- labelPadding (EdgeInsetsGeometry?): 标签的内边距。
- onPressed (VoidCallback?): 当 Chip 被按下时调用的回调函数。
- pressElevation (double?): 按下时的阴影高度。
- tooltip (String?): 此 Chip 的工具提示信息。
- side (BorderSide?): 边框的样式。
- shape (OutlinedBorder?): ActionChip 的形状。
- clipBehavior (Clip): 定义 ActionChip 的剪裁行为,默认为 Clip.none。
- focusNode (FocusNode?): 处理键盘焦点的节点。
- autofocus (bool): 是否自动获得焦点。
- color (Color?): ActionChip 的颜色。这已弃用,请使用 backgroundColor。
- backgroundColor (Color?): ActionChip 的背景颜色。
- disabledColor (Color?): Chip 禁用时的背景颜色。
- padding (EdgeInsetsGeometry?): ActionChip 的内边距。
- visualDensity (VisualDensity?): 定义 ActionChip 的视觉密度。
- materialTapTargetSize (MaterialTapTargetSize?): 控制触摸目标的大小。
- elevation (double?): ActionChip 的阴影高度。
- shadowColor (Color?): 阴影的颜色。
- surfaceTintColor (Color?): 表面颜色的色调。
- iconTheme (IconThemeData?): 图标主题,用于控制图标的外观。
示例
class WidgetPage extends StatelessWidget {
void _handleChipPress() {
print('ActionChip 被按下');
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ActionChip 示例')),
body: Center(
child: ActionChip(
avatar: CircleAvatar(
backgroundColor: Colors.red.shade900,
child: Text('A'),
),
label: Text('Action Chip'),
onPressed: _handleChipPress,
padding: EdgeInsets.all(8.0),
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
backgroundColor: Colors.redAccent,
shape: StadiumBorder(
side: BorderSide(color: Colors.red.shade900),
),
pressElevation: 4.0,
shadowColor: Colors.redAccent,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
),
),
);
}
}