Flutter 初识：Chip控件

数星星的磊

于 2024-09-01 13:30:00 发布

阅读量387

点赞数 19

分类专栏： Flutter 初识文章标签： flutter microsoft javascript

本文链接：https://blog.csdn.net/yang_6799/article/details/139449670

版权

Flutter 初识专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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,
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

数星星的磊

关注

19
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Flutter 初识：Chip控件

InputChip 是 Flutter 中的一个小部件，用于显示可交互的紧凑信息。ActionChip 是 Flutter 中的一种 Chip，用于表示一个可以触发操作的选项。ChoiceChip 是 Flutter 中的一种 Chip，用于从一组选项中进行单选。Chip 是 Flutter 中用于显示紧凑信息的小部件，通常包含一个标签和可选的图标或删除按钮，并且可以用作交互式元素。FilterChip 是 Flutter 中的一种 Chip，用于表示一个可以选择或取消选择的选项，通常用于筛选内容。
复制链接

扫一扫

专栏目录