您现在的位置是：首页 > 文章详情

开源 | Omni-UI：开箱即用的鸿蒙组件库

日期：2025-05-08点击：20收藏

背景：鸿蒙生态的加速器

随着鸿蒙操作系统的快速普及，开发效率成为生态繁荣的关键挑战。传统开发模式下，开发者需要反复造轮子，而复杂的UI适配与交互逻辑更是拖慢了项目进度。

在成熟的开发体系里，组件库始终是提效的关键支柱。Android生态中，不乏众多知名的开源组件库，比如腾讯开源的QMUI，丰富控件及兼容处理可以让开发者能专注于业务需求而无需耗费精力在基础代码的设计上。这些优秀实践证明：当技术生态步入成熟期，高质量的组件库将成为开发者效能的倍增器。

反观快速崛起的鸿蒙生态，尽管ArkUI框架展现出强大的跨端能力，但社区尚未形成标准化、企业级的组件解决方案。开发者往往需要投入大量精力处理基础组件的兼容与适配，这种生态断档严重制约了鸿蒙应用的规模化落地。

Omni-UI 应运而生！作为58安居客房产无线团队开源的鸿蒙ArkUI组件库，它深度融合鸿蒙原生能力，提供 25+开箱即用的高扩展组件，覆盖视图、表单、导航、图表等核心场景。无论是信息展示的卡片视图，还是动态图表的数据可视化，Omni-UI均提供一站式解决方案，助力开发者效率提升30%以上。

组件库设计

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示例')
  }
}