07 HarmonyOS NEXT 仿 uv-ui Tag 组件开发教程系列 (一)

作者：全栈若城

2025-03-06
北京
本文字数：1211 字
阅读完需：约 4 分钟

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

Tag 组件基础入门

1. 组件概述

Tag 组件：轻量级标签展示，用于标记与分类。本教程将指导您如何在 HarmonyOS NEXT 中实现仿 UV-UI 的 Tag 组件。

1.1 最终效果演示

2. 基本属性

2.1 核心属性说明

2.2 基础示例

// 基础标签示例Flex({ wrap: FlexWrap.Wrap }) {    Tag({ text: '默认标签' })    Tag({ text: '主要标签', type: 'primary' })    Tag({ text: '成功标签', type: 'success' })    Tag({ text: '警告标签', type: 'warning' })    Tag({ text: '危险标签', type: 'danger' })}

复制代码

3. 样式定制

3.1 颜色系统

Tag 组件内置了一套完整的颜色系统，包括：

文本颜色（getTextColor）
背景颜色（getBackgroundColor）
边框颜色（getBorderColor）
悬停效果颜色（getHoverBackgroundColor）

// 颜色配置示例private getTextColor(): string {    const colors = {        default: '#333333',        primary: '#2468f2',        success: '#18a058',        warning: '#f0a020',        danger: '#d03050'    }    return colors[this.type] || colors.default}

复制代码

3.2 布局与间距

Tag 组件支持灵活的布局配置：

Row() {    // 图标布局    if (this.icon) {        Image(this.icon)            .width(16)            .height(16)            .margin({ right: 4 })    }        // 文本布局    Text(this.text)        .fontSize(14)        .fontColor(this.getTextColor())}.padding(8).borderRadius(4)

复制代码

4. 实践案例

4.1 可关闭标签

Tag({    text: '可关闭标签',    closable: true,    onCloseTag: () => {        console.info('标签被关闭')    }})

复制代码

4.2 带图标标签

Tag({    text: '带图标标签',    type: 'primary',    icon: $r('app.media.startIcon')})

复制代码

4.3 禁用状态

Tag({    text: '禁用标签',    type: 'warning',    disabled: true})

复制代码

5. 功能分析

类型选择：根据信息的重要程度选择合适的 type
default：普通信息
primary：主要信息
success：成功状态
warning：警告信息
danger：错误或危险信息
布局建议：
使用 Flex 布局实现灵活的标签组排列
合理使用 padding 和 margin 控制间距
注意标签组的换行处理
交互设计：
可关闭标签添加适当的关闭回调
禁用状态下注意视觉反馈
合理使用图标增强可读性

6. 注意事项

确保传入的 type 值在预定义范围内
图标资源需要提前在资源文件中定义
关闭事件处理需要考虑状态同步
样式定制时注意保持视觉一致性

下一篇教程将介绍 Tag 组件的进阶特性和高级用法，敬请期待！

发布于: 2025-03-06阅读数: 3

原文链接:【http://xie.infoq.cn/article/881841fd30c8634ee4cc6beac】。文章转载请联系作者。

全栈若城

关注

解读Python与前端技术，助你成为技术大牛 2023-06-28 加入

我是一名专注于 Python 和前端技术的技术讲解者。我擅长将复杂的技术概念转化为简单易懂的语言，帮助初学者快速入门，并满足高级开发者对更深入理解的需求。

发布

暂无评论

创作场景

07 HarmonyOS NEXT 仿 uv-ui Tag 组件开发教程系列 (一)

Tag 组件基础入门

1. 组件概述

1.1 最终效果演示

2. 基本属性

2.1 核心属性说明

2.2 基础示例

3. 样式定制

3.1 颜色系统

3.2 布局与间距

4. 实践案例

4.1 可关闭标签

4.2 带图标标签

4.3 禁用状态

5. 功能分析

6. 注意事项

全栈若城

评论