flutter如何实现chip组件

在Flutter中如何实现类似Material Design的Chip组件？我需要创建一个可交互的标签列表，要求支持单选、多选以及删除功能。能否提供完整的代码示例，包括样式自定义和点击事件处理？另外，如何实现Chip之间的间距和换行排列？

2 回复

Flutter 中可使用 Chip 组件实现标签效果。通过 Chip 构造函数设置 label、avatar、onDeleted 等属性，支持删除、选中等交互。也可用 InputChip、FilterChip 等变体实现更复杂功能。

更多关于flutter如何实现chip组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以使用 Chip 组件实现标签式显示。以下是基本用法和常见属性：

基础用法

Chip(
  label: Text('基础标签'),
)

主要属性

  1. label - 必需，显示文本
  2. avatar - 左侧图标
  3. deleteIcon - 删除图标
  4. onDeleted - 删除回调
  5. backgroundColor - 背景色
  6. padding - 内边距
  7. labelStyle - 文本样式

完整示例

Chip(
  avatar: CircleAvatar(
    backgroundColor: Colors.blue,
    child: Text('A'),
  ),
  label: Text('可删除标签'),
  deleteIcon: Icon(Icons.close),
  onDeleted: () {
    print('标签被删除');
  },
  backgroundColor: Colors.grey[200],
  padding: EdgeInsets.all(8),
)

特殊变体

  • InputChip - 用于输入场景
  • ChoiceChip - 单选标签
  • FilterChip - 筛选标签
  • ActionChip - 操作标签

使用建议

  • 通常配合 Wrap 组件实现流式布局
  • 可通过 ChipTheme 统一设置样式

这样就能快速创建各种样式的标签组件了。

回到顶部