背景：鸿蒙生态的加速器
组件库设计
2.1 设计理念
鸿蒙ArkUI提供的基础原子组件（如Button、Text、Image等）已具备优秀的可用性与标准化API设计，足以支撑简单场景的UI构建。但在实际业务中，开发者往往需要面对复杂交互组合与高频复用模块，例如：
-
房产行业的房源卡片（图片轮播+标签） -
交易流程的多级表单（城市选择器+日期范围） -
数据可视化的图表（折线图、雷达图等）
Omni-UI的核心价值在于：基于ArkUI原子组件构建高复用复合单元，将开发者的精力从基础组合逻辑中解放，聚焦业务创新。从设计上看Omni-UI包括：视图、表单、操作反馈、导航、图表5类共25+复合组件，能够覆盖信息展示、状态提示、可视化分析等核心开发需求。
图1. Omni-UI组件库
2.2 主题切换
Omni-UI支持一键切换主题，通过简单的配置即可动态切换主题，免去应用重启的操作。
图2. Omni-UI动态切换主题示意图
项目中如何应用
3.1. 快速接入
在需要使用的 har/hsp 模块中，通过ohpm安装库
ohpm install @wuba/omni-ui
OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包。
3.2. 使用组件库
这里以标签 Tag 为例，介绍组件库的基本使用，通过如下方式完成组件导包后使用即可
import { xxx } from ‘@omni-ui/omni_component’
使用示例如下：
import { OmniTag, TagItemInfo, TagMode } from '@omni-ui/omni_component'
import { LengthMetrics } from '@kit.ArkUI';
@Builder
export function TagEntryPageBuilder() {
TagEntryPage()
}
@Entry
@Component
struct TagEntryPage {
@State tagItems1: TagItemInfo[] = [
new TagItemInfo({ title: '纯文本tag' }),
new TagItemInfo({
title: '文本带icon',
icons: {
left: { icon: $r('app.media.tag_heart') }
}
}),
]
build() {
NavDestination() {
Column() {
OmniTag({
tagItems: this.tagItems1,
mode: TagMode.FLEX,
style: {
fontSize: 12,
fontColor: 0x6884A5,
backgroundColor: 0x249DB8D7,
itemBorder: { radius: 3 },
itemPadding: {
left: 10,
right: 10,
top: 3,
bottom: 3
},
itemSize: { width: 100, height: 30 }
},
flexSpace: { main: LengthMetrics.vp(8), cross: LengthMetrics.vp(8) }
})
.margin({
left: 20,
top: 10,
right: 13,
bottom: 8
})
}.justifyContent(FlexAlign.Center)
}.title('Tag示例')
}
}
运行打开页面，看到效果如下：
图 3. 运行效果示意图
3.3. 在线文档
Omni-UI 组件的具体使用，建议大家阅读在线文档:
在线文档：https://wuba.github.io/omni-ui/
真机演示
总结与规划
当前Omni-UI已成功助力房产鸿蒙C端业务，快速完成从0-1的搭建，覆盖业务核心场景，并且还在持续迭代中，团队目标打磨出鸿蒙生态中一流的组件库。
我们始终相信：优秀的组件库，应该在真实业务场景中自然生长。Omni-UI组件库后续计划进一步丰富生态，包括但不限于复合组件和其他助力UI开发体验的内容。
开 源
Omni-UI 项目现已开源，项目地址
https://github.com/wuba/omni-ui ，欢迎关注。
作者简介：
万兵：58同城-房产技术部-移动端架构师，目前主要负责58同城和安居客APP租房和商业地产业务。
本文分享自微信公众号 - 58技术（architects_58）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
