文章目录
- 代码
- 默认后缀图标核心配置
- 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: false，Chip 不可点击，默认图标也不会显示。size 影响默认图标大小
ChipSize.NORMAL：默认图标尺寸更大ChipSize.SMALL：默认图标尺寸更小
- 样式跟随系统
背景、圆角、图标颜色全部取自系统资源：
- 背景：
ohos_id_color_button_normal - 圆角：
ohos_id_corner_radius_button
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力
