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 {@overrideWidget 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 {@overrideWidget 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;@overrideWidget 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 = [];@overrideWidget 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 被按下');}@overrideWidget 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,),),),);}
}