当前位置： 首页 > news >正文

Omni-UI：58同城鸿蒙ArkUI精心打造的UI组件库使用

news 2025/9/11 13:11:00

随着58同城房产无线团队对HarmonyOS的深入探索和不断实践，团队成功推出了Omni-UI，一个旨在提升HarmonyOS开发者体验的UI组件库。Omni-UI不仅具备开箱即用、高扩展性、组件丰富的特点，还致力于通过优化组件设计来简化开发流程，提高开发效率。本文将围绕Omni-UI的使用，结合实际开发过程，详细展示其在鸿蒙应用中的强大功能和便捷性。

OmniUI组件库介绍

Omni-UI 是 58同城 开源的 HarmonyOS 组件库，基于 ArkUI框架设计，提供开箱即用的高扩展组件。覆盖视图、表单、导航、操作反馈、图表五大核心开发类别，支持超过25种复合组件。能够覆盖信息展示、状态提示、可视化分析等核心开发需求。

在这里插入图片描述

核心特性

  1. 开箱即用：Omni-UI提供标准化的组件交互逻辑和视觉设计，降低基础功能开发成本。这意味着开发者可以直接使用这些预定义的组件，而无需从头开始编写大量的样板代码。例如，传统实现筛选栏需要上千行代码，而使用Omni-UI的FilterBar组件，只需10行声明式配置即可完成。

  2. 高性能：组件基于鸿蒙系统进行优化，运行流畅且兼容性强。这使得Omni-UI在各种鸿蒙设备上都能保持高效稳定的运行。通过优化组件设计，Omni-UI确保了在不同设备和场景下的良好表现。

  3. 业务特色： Omni-UI包含FilterBar、锚点跳转等高阶组件，支持多级联动逻辑和跨设备渲染。FilterBar组件可以轻松实现复杂的筛选功能，而锚点跳转组件则可以方便地实现页面内的快速导航。多级联动逻辑使得不同组件之间能够协同工作，例如城市选择器和日期范围选择器的联动，大大降低了开发复杂度。

  4. 主题切换： Omni-UI支持一键切换深色/浅色主题，无需重启应用。这使得用户可以根据自己的需求和偏好随时调整应用的主题，提升用户体验。主题切换功能通过预定义的样式配置实现，确保了应用在不同主题下的美观性和一致性。

  5. 高扩展性：Omni-UI支持多种自定义选项，能够满足不同开发者的需求。无论是修改组件样式还是添加新功能，Omni-UI都可以轻松应对。高扩展性使得开发者可以根据具体需求灵活定制组件，从而提升开发效率。

  6. 组件丰富高效：Omni-UI包括视图、表单、操作反馈、导航、图表五大类共25种复合组件，覆盖信息展示、状态提示、可视化分析等核心开发需求。丰富的组件库使得开发者能够快速构建复杂的界面，而无需从头开始编写大量的代码。

  7. 易于接入：使用ohpm工具，只需简单命令 ohpm install @wuba58/omni-ui 即可快速接入Omni-UI，快速构建界面。ohpm是一个高效的包管理工具，能够帮助开发者轻松安装和管理依赖库，简化接入流程。

  • 官方地址：https://wuba.github.io/omni-ui/

  • 开源地址：https://github.com/wuba/omni-ui

  • 三方库地址：https://ohpm.openharmony.cn/#/cn/detail/@wuba58%2Fomni-ui

使用案例

为了更好地展示Omni-UI的强大功能，下面将通过几个具体的使用案例来详细说明如何使用Omni-UI的组件来构建复杂界面。

环形图使用案例

环形图（Pie Chart）能够清晰地展示各个部分的比例关系，特别适合用于数据分布展示。在鸿蒙应用中，环形图可以用于展示用户行为分析、资源分配等数据分布情况。以下是一个环形图的使用案例：

在这里插入图片描述

import { PieDataType, OmniPieChart, Options } from "@wuba58/omni-ui";@ComponentV2
export struct RingChart {@Param title: string = "学习时间分布";@Local defOption: Options<PieDataType> = new Options({series: [{name: '学习时间',data: [{ value: 435, name: '直接访问' },{ value: 310, name: '邮件营销' },{ value: 234, name: '联盟广告' },{ value: 135, name: '视频广告' },{ value: 1548, name: '搜索引擎' }]}]});build() {Column() {OmniPieChart({options: this.defOption})}.padding(10).height('100%')}
}

在这个案例中，我们创建了一个名为RingChart的组件，使用OmniPieChart来展示学习时间的分布情况。通过设置Options对象中的series属性，我们可以轻松地配置各个部分的数据和名称。例如，我们展示了直接访问、邮件营销、联盟广告、视频广告和搜索引擎五部分的学习时间分布。这种可视化方式使得用户能够一目了然地了解到各个部分所占的比例。

折线图使用案例

折线图（Line Chart）能够直观地展示数据随时间变化的趋势，特别适合用于数据分析和展示。在鸿蒙应用中，折线图可以用于展示用户活跃度、数据增长趋势等随时间变化的数据。以下是一个折线图的使用案例：

在这里插入图片描述

import { LineDataType, OmniLineChart, Options } from "@wuba58/omni-ui";@ComponentV2
export struct HomeChart {@Param title: string = "7天学习趋势图";@Param data: number[] = [0, 0, 0, 0, 0, 0, 0];@Local defOption: Options<LineDataType> = new Options({xAxis: {type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],},yAxis: {type: 'value',name: '学习时长 (分钟)'},series: [{name: '学习时长',lineStyle: {width: 1.5},areaStyle: {color: {direction: [0, 0, 0, 1],colors: ['#00f39c12', '#fff39c12']}},color: '#00f39c12',data: this.data}]});build() {Column() {OmniLineChart({options: this.defOption,})}.height(200)}
}

在这个案例中，我们创建了一个名为HomeChart的组件，使用OmniLineChart来展示7天的学习趋势。通过设置Options对象中的xAxis和yAxis属性，我们可以定义X轴和Y轴的类型和数据。例如，X轴表示一周中的每一天，Y轴表示学习时长（分钟）。同时，通过配置series属性，我们可以定义折线图的具体数据和样式，例如线条宽度、颜色和填充区域的颜色。这种可视化方式使得用户能够直观地了解到学习趋势的变化。

简化界面开发

在实际开发过程中，编写界面代码往往需要大量的样板代码，这不仅增加了开发时间，还可能导致代码冗余和难以维护。Omni-UI通过提供丰富的组件和强大的自定义能力，能够显著简化界面开发流程。以下是一个具体的例子来说明使用Omni-UI的OmniTag组件如何简化代码编写。

以实现左侧带图标的标签效果为例，传统写法需要编写大量的代码：

Row() {Image($r('app.media.icon_small_card')).width(14).height(14)Text(this.item1).fontSize(14).fontColor('#6B7280').padding(5).textAlign(TextAlign.Start)
}

而在使用Omni-UI的OmniTag组件后，只需几行代码即可完成相同的功能：

OmniTag({tagItems: new TagItemInfo({title: '文本左边带icon',icons: {left: { icon: $r('app.media.tag_heart') }}}),horizontalSpace: 10,
})

OmniTag不仅代码简洁，还支持灵活定制，可以轻松实现更多复杂的交互效果。例如，我们可以通过设置tagItems中的icons属性来配置标签的图标，通过设置horizontalSpace属性来控制图标与文本之间的间距。这种高度可定制的特性使得开发者能够根据具体需求快速构建高质量的界面。

强大的图表功能

Omni-UI中的图表功能基于Canvas绘图组件实现，能够提供强大的原生体验。通过查看源码中的图表实现，不仅可以获取到功能强大的自绘制图形，还可以学习到许多关于图表实现的最佳实践。以下是一个详细的OmniChart组件源码示例，进一步展示了如何实现折线图。

import { LineDataType, OmniLineChart, Options, InterfaceObj, OptionInterface, ClickEvent, DrawBaseViewModel, CanvasRenderingContext2D, RenderingContextSettings, Tooltip, globalBuilder } from "@wuba58/omni-ui";@ComponentV2
export struct OmniChart {private settings: RenderingContextSettings = new RenderingContextSettings(true);private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);drawViewModel: DrawBaseViewModel<LineDataType> | null = null;click: Function = (event: ClickEvent, args: InterfaceObj) => {};tooltipClick: Function = () => {};@Link @Watch('onCountUpdated') options: Options<LineDataType>;@Link renderType: string@State isTooltipShow: boolean = false@State tooltipInfo: InterfaceObj = {}@BuilderParam customTooltip: (tooltipInfo: InterfaceObj) => void = globalBuilder; // 自定义组件onCountUpdated(options: Options<LineDataType>): void {this.isTooltipShow = falsethis.drawViewModel && this.drawViewModel.draw(this.context, this.options, this.renderType)}updateTooltipInfo(flag: boolean, event: ClickEvent, pos?: InterfaceObj, title?: string, arr?: [], tooltipInfo: InterfaceObj = {}) {if (!tooltipInfo.show) {this.isTooltipShow = falsereturn;}this.isTooltipShow = flagif (tooltipInfo.type !== 'default') {this.tooltipClick && this.tooltipClick(event, flag ? { title, pos, data: arr } : {})}if (tooltipInfo.type !== 'default') return;if (this.isTooltipShow) {this.tooltipInfo = {pos,title,data: arr}const keys = Object.keys(tooltipInfo)keys.forEach(item => {this.tooltipInfo[item] = tooltipInfo[item]})}}build() {return Column() {Canvas(this.context).width('100%').height('100%').onReady(() => {this.drawViewModel && this.drawViewModel.draw(this.context, this.options, this.renderType)}).onClick((event) => {if (this.drawViewModel) {this.drawViewModel.bindEvent(event, (flag: boolean, event: ClickEvent, pos: InterfaceObj = {}, title: string = '', arr: [] = [], tooltipInfo: InterfaceObj = {}) => {this.click && this.click(event, flag ? {title,data: arr} : {})this.updateTooltipInfo(flag, event, pos, title, arr, tooltipInfo)})}})if (this.isTooltipShow) {Tooltip({tooltipInfo: this.tooltipInfo,customTooltip: this.customTooltip})}}.width('100%').height('100%').onDisAppear(() => {this.drawViewModel && this.drawViewModel.clear()})}
}

通过上述代码可以看出，OmniChart组件能够灵活地处理各种图表绘制需求，支持点击事件绑定和工具提示显示，大大简化了图表开发的复杂性。Canvas组件用于绘制图形，onReady事件在组件准备好时触发绘制操作，onClick事件绑定点击事件处理函数。工具提示（Tooltip）在点击图表时显示详细信息，增强用户体验。

深入学习Omni-UI的图表功能

除了上述简单的环形图和折线图示例，Omni-UI还提供了更多丰富的图表类型，如柱状图、散点图、雷达图等。通过查看源码中的图表实现，我们可以学习到更多关于图表绘制的最佳实践。例如，OmniChart组件中的Options对象可以配置各种图表的具体属性，如轴标签、标题、数据系列等。DrawBaseViewModel类负责具体的绘制逻辑，CanvasRenderingContext2D类用于图形绘制，RenderingContextSettings类用于设置渲染上下文的参数。这些组件和类的设计使得图表开发更加模块化和可扩展。

更多图表类型示例
柱状图使用案例

柱状图（Bar Chart）能够直观地展示不同类别的数据，特别适合用于数据对比和分析。以下是一个柱状图的使用案例：

import { BarDataType, OmniBarChart, Options } from "@wuba58/omni-ui";@ComponentV2
export struct BarChart {@Param title: string = "本周学习时长对比";@Param data: number[] = [200, 300, 150, 400, 250, 350, 100];@Local defOption: Options<BarDataType> = new Options({xAxis: {type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],},yAxis: {type: 'value',name: '学习时长 (分钟)'},series: [{name: '学习时长',barStyle: {width: 20},color: '#00f39c12',data: this.data}]});build() {Column() {OmniBarChart({options: this.defOption,})}.height(200)}
}

在这个案例中，我们创建了一个名为BarChart的组件，使用OmniBarChart来展示本周学习时长的对比情况。通过设置Options对象中的xAxis和yAxis属性，我们可以定义X轴和Y轴的类型和数据。同时，通过配置series属性，我们可以定义柱状图的具体数据和样式。

散点图使用案例

散点图（Scatter Chart）能够展示数据点之间的关系，特别适合用于数据分析和展示。以下是一个散点图的使用案例：

import { ScatterDataType, OmniScatterChart, Options } from "@wuba58/omni-ui";@ComponentV2
export struct ScatterChart {@Param title: string = "学习时间与效率关系";@Param data: Array<{ name: string, value: number[] }> = [{ name: '用户1', value: [100, 200] },{ name: '用户2', value: [200, 150] },{ name: '用户3', value: [150, 300] },{ name: '用户4', value: [300, 150] },{ name: '用户5', value: [250, 400] },{ name: '用户6', value: [350, 250] },{ name: '用户7', value: [100, 350] }];@Local defOption: Options<ScatterDataType> = new Options({xAxis: {type: 'value',name: '学习时长 (分钟)'},yAxis: {type: 'value',name: '学习效率 (%)'},series: [{name: '用户数据',symbolSize: 15,color: '#00f39c12',data: this.data.map(item => item.value)}]});build() {Column() {OmniScatterChart({options: this.defOption,})}.height(200)}
}

在这个案例中，创建一个名为ScatterChart的组件，使用OmniScatterChart来展示学习时间与学习效率之间的关系。通过设置Options对象中的xAxis和yAxis属性，可以定义X轴和Y轴的类型和名称。同时，通过配置series属性，可以定义散点图的具体数据和样式。通过symbolSize属性设置了散点的大小，通过color属性设置了散点的颜色。这种可视化方式使得用户能够直观地了解到学习时间与学习效率之间的关系。

Omni-UI提供了强大的图表功能，支持多种图表类型和丰富的自定义选项。设置Options对象中的xAxis和yAxis属性来定义轴标签和数据系列，配置series属性来定义具体的图表数据和样式。这种模块化和可扩展的设计使得图表开发更加高效和灵活。

总结

Omni-UI作为58同城房产无线为HarmonyOS精心打造的UI组件库，能够帮助开发者提高开发效率，简化代码编写，优化用户体验。无论是小型项目还是大型应用，Omni-UI都是一个值得推荐的选择。通过上述详细的使用案例和代码示例，我们可以更深入地理解Omni-UI的强大功能和便捷性。无论你是HarmonyOS开发的新手还是有经验的开发者，Omni-UI都能够为你提供强大的支持，让你的开发过程更加轻松愉快。

通过Omni-UI，开发者可以快速构建复杂的界面，简化开发流程。例如只需几行代码即可实现左侧带图标的标签效果，而无需编写大量的样板代码。

总之，Omni-UI是一个功能强大、易于使用的UI组件库，能够显著提升HarmonyOS开发者的开发效率和用户体验。无论是构建复杂的界面还是实现丰富的图表功能，Omni-UI都能提供强大的支持。现在就来体验Omni-UI带来的便捷开发吧！

写在最后

在这个快速发展的技术世界中，HarmonyOS作为新一代的智能终端操作系统，提供了强大的开发能力和丰富的生态支持。Omni-UI作为58同城房产无线为HarmonyOS精心打造的UI组件库，无疑为开发者提供了一个高效、便捷的开发工具。无论你是鸿蒙应用的开发新手还是有经验的开发者，欢迎加入鸿蒙生态。构建出更多优秀的鸿蒙应用，为鸿蒙生态的发展贡献自己的一份力量！


文章转载自：

http://wRtBVhy3.prysb.cn
http://RnpKesFb.prysb.cn
http://HDVIhnAi.prysb.cn
http://oXOsHBaD.prysb.cn
http://Q1zHEkLo.prysb.cn
http://VO7OpsnF.prysb.cn
http://XQgalGFE.prysb.cn
http://Hfb3PCei.prysb.cn
http://rPbBwu5O.prysb.cn
http://fDJEwflU.prysb.cn
http://gsSpJtGX.prysb.cn
http://jbRjw9mM.prysb.cn
http://cwi3Tf3v.prysb.cn
http://BjSKC0dg.prysb.cn
http://j53M0CSD.prysb.cn
http://v1x8ubxl.prysb.cn
http://759yVIg9.prysb.cn
http://nmRnezxI.prysb.cn
http://O5DjDnDm.prysb.cn
http://Buj2jnLH.prysb.cn
http://p6SSaa9A.prysb.cn
http://5EweerHl.prysb.cn
http://Dez18DYk.prysb.cn
http://h0HK5Ps7.prysb.cn
http://Qqmocb22.prysb.cn
http://6loG1Ory.prysb.cn
http://ftoo2VXF.prysb.cn
http://aUiYI7rC.prysb.cn
http://lxZoilVl.prysb.cn
http://SazKVNyh.prysb.cn
http://www.dtcms.com/a/377641.html

相关文章：

  • 六自由度Stewart并联机器人simulink建模与模拟仿真
  • 如何解决pip安装报错ModuleNotFoundError: No module named ‘sympy’问题
  • 测试之道：从新手到专家实战（四）
  • 基于elementUI实现一个可编辑的表格（简洁版）
  • 智能美妆功能开发指南：直播美颜sdk的架构与算法解析
  • MySQL 浮点数、定点数与位类型：搞懂 3 类特殊数值的核心用法
  • 运动生理实验室解决方案 人体生理实验整体解决方案
  • Ping命令为何选择ICMP而非TCP/UDP？
  • 工业锅炉的“健康卫士”—状态监测与故障诊断
  • 大模型微调技术宝典：Transformer架构，从小白到专家
  • 同步框架与底层消费机制解决方案梳理
  • 计算机毕设 java 高校教材管理系统 基于 Java+SSM 的高校教材管控平台 Java+MySQL 的教材全流程管理系统
  • 用分层架构打造单体应用
  • TCP 拥塞控制设计空间课程要点总结
  • 工业网络融合：DEVICENET转PROFINET网关在汽车总装车间的应用
  • AI当调色总监用，合成图一秒融入，甲方看了都说绝
  • 深入浅出CRC校验：从数学原理到单周期硬件实现 （1） 初始CRC校验
  • 基于esp32c3 rust embassy 的墨水屏程序
  • 实战：用 Python 搭建 MCP 服务 —— 模型上下文协议（Model Context Protocol）应用指南
  • 亚马逊关键词引流：从手动操作到智能优化的全流程攻略
  • Windows 本地组策略重置标准操作程序 (SOP)
  • tp5.0如何配置session保存到文件里，方便删除
  • Linux D-Bus 详解
  • 嵌入式学习笔记.嵌入式系统
  • Redis 与分布式事务：最终一致性的实践艺术
  • Mac M 系列芯片 YOLOv8 部署教程（CPU/Metal 后端一键安装）
  • Java 中String类的常用方法
  • TENGJUN防水TYPE-C连接器：立贴结构与IPX7防护的精密融合
  • 和照片互动？NAS 部署 AI 智能相册，瀑布流+网格双布局！
  • 网络原理——传输层协议TCP基本认识