HarmonyOS 6 Chip 组件：设置默认后缀图标使用文档

文章目录代码默认后缀图标核心配置1. 启用默认关闭图标2. 显示优先级规则3. 关联配置项代码解析1. 启用默认后缀图标2. 不冲突条件3. 整体结构总结默认后缀图标即Chip 内置关闭图标由系统提供样式、尺寸、交互逻辑无需配置图片资源只需开启allowClose: true即可显示。代码import { Chip, ChipSize, LengthMetrics } from kit.ArkUI; Entry Component struct Index { build() { Column({ space: 10 }) { Chip({ // 设置前缀图标属性。 prefixIcon: { // app.media.chips仅作示例请替换为实际使用图片。 src: $r(app.media.startIcon), size: { width: 16, height: 16 }, fillColor: Color.Blue }, // 设置文本属性。 label: { text: 操作块, fontSize: 12, fontColor: Color.Blue, fontFamily: HarmonyOS Sans, labelMargin: { left: 20, right: 30 } }, size: ChipSize.NORMAL, allowClose: true, enabled: true, backgroundColor: $r(sys.color.ohos_id_color_button_normal), borderRadius: $r(sys.float.ohos_id_corner_radius_button), }) } } }运行效果如图默认后缀图标核心配置1. 启用默认关闭图标allowClose: true作用显示系统默认关闭图标默认值true当allowClose: false时默认图标隐藏2. 显示优先级规则未设置suffixIcon、未设置suffixSymbol→ 由allowClose控制是否显示默认关闭图标设置了suffixIcon或suffixSymbol→优先显示自定义图标默认图标不显示3. 关联配置项onClose默认图标点击回调删除逻辑closeOptions设置默认图标字体大小、无障碍属性代码解析1. 启用默认后缀图标allowClose: true这是显示默认关闭图标唯一必要开关。2. 不冲突条件代码中未配置 suffixIcon / suffixSymbol因此默认图标可以正常展示。3. 整体结构左侧自定义前缀图标 startIcon中间文本“操作块”右侧系统默认关闭图标形成“前缀图标 文本 默认删除按钮”的标准操作块布局总结默认图标仅在无自定义后缀图标时显示只要配置了suffixIcon或suffixSymbol默认图标自动隐藏。enabled 必须为 true若enabled: falseChip 不可点击默认图标也不会显示。size 影响默认图标大小ChipSize.NORMAL默认图标尺寸更大ChipSize.SMALL默认图标尺寸更小样式跟随系统背景、圆角、图标颜色全部取自系统资源背景ohos_id_color_button_normal圆角ohos_id_corner_radius_button如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力