HarmonyOS NEXT快速入手IBest-UI组件库 原创

一、介绍

IBest-UI是一个轻量、简单易用、可定制主题、支持深色模式和浅色模式的鸿蒙开源UI组件库, 完美兼容元服务。是一个轻量、可定制的 HarmonyOS 组件库

二、HarmonyOS Next开发环境准备

1. 开发工具配置

• 下载安装DevEco Studio
• 配置SDK：Tools > SDK Manager > 勾选HarmonyOS Next 5.0.0(API 12)及以上版本
• 环境验证：新建Empty Ability项目，选择"HarmonyOS"模板

二、安装依赖

1. 安装依赖

ohpm install @ibestservices/ibest-ui

2. 初始化

在\项目\entry\src\main\ets\entryability\EntryAbility.ets 里初始化组件库

import { IBestInit } from "@ibestservices/ibest-ui"

onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/Index', (err, data) => {
    // 在此处初始化组件库!!!
    // 在此处初始化组件库!!!
    // 在此处初始化组件库!!!
    IBestInit(windowStage, this.context)
  })
}

3. 使用

引入您想使用的组件，并使用

// 引入您所想使用的组件
import { IBestButton } from "@ibestservices/ibest-ui"

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      IBestButton({
        text: "主要按钮",
        type: 'primary'
      })
      IBestButton({
        text:  "成功按钮",
        type: 'success'
      })
      IBestButton({
        text:  "默认按钮",
        type: 'default'
      })
      IBestButton({
        text:  "危险按钮",
        type: 'danger'
      })
      IBestButton({
        text:  "警告按钮",
        type: 'warning'
      })
    }
    .height('100%')
    .width('100%')
  }
}

三、进阶

1.全局配置

组件库提供全局配置方法，供开发者根据自己项目实际情况选择合适的尺寸单位。

使用方法

请在初始化组件库之后调用!!!

\项目\entry\src\main\ets\entryability\EntryAbility.ets

import { IBestSetGlobalConfig } from "@ibestservices/ibest-ui"

onWindowStageCreate(windowStage: window.WindowStage): void {
	windowStage.loadContent('pages/Index', (err, data) => {
		// 在此处初始化组件库!!!
		IBestInit(windowStage, this.context)
		// 请在初始化组件库之后调用!!!
		IBestSetGlobalConfig({
			unit: "lpx",
			fontUnit: "lpx"
		})
	})
}

IBestGlobalConfigType 数据类型

该类型为 IBestSetGlobalConfig 方法的参数类型, 后续还会加入更多属性配置.

2.自定义主题样式

在需要更改主题样式时，可通过调用 IBestSetUIBaseStyle 方法设置样式。

更改主题

• 在项目的启动页面中，通过调用 IBestSetUIBaseStyle 方法，设置主题。
• 若项目使用了 IBestSetGlobalConfig 方法, 请确保在该方法之后调用 IBestSetUIBaseStyle !!!

import { IBestSetUIBaseStyle } from "@ibestservices/ibest-ui";

onWindowStageCreate(windowStage: window.WindowStage): void {
	windowStage.loadContent('pages/Index', (err, data) => {
		IBestSetUIBaseStyle({
			primary: '#7232dd'
		})
	})
}

IBestUIBaseStyleObjType 类型说明

• 该类型即为IBestSetUIBaseStyle方法的参数类型，均为非必填类型，传入值会覆盖默认值，暂时支持这么多预设样式，随着组件丰富逐步完善！
• 默认单位为 vp, 当全局单位为 lpx 时, 以下数值会依据 designWidth 和当前设备屏幕宽度自动计算转化为lpx对应的视窗尺寸。

项目启动页面主题设置

• 在项目的启动页面中，通过调用 IBestSetUIBaseStyle 方法来配置主题。
• 若项目已使用了 IBestSetGlobalConfig 方法，请确保在调用该方法之后再调用 IBestSetUIBaseStyle。

import { IBestSetUIBaseStyle } from "@ibestservices/ibest-ui";
onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err, data) => {
        IBestSetUIBaseStyle({
            primary: '#7232dd'
        });
    });
}

IBestUIBaseStyleObjType 类型说明

• 此类型定义了 IBestSetUIBaseStyle 方法的参数结构。所有属性均为可选，传入值将覆盖默认设置。随着组件库的不断扩展，支持的预设样式也将逐渐增加。
• 默认单位为 vp；若全局单位设置为 lpx，则以下数值将根据 designWidth 和当前设备屏幕宽度自动转换为相应的 lpx 视窗尺寸。

四、结语

通过本文的实践，开发者可以迅速掌握基于HarmonyOS Next的操作系统上构建IBest-UI用户界面的方法与技巧。这不仅涵盖了基础的搭建流程，还包括了一些实用的设计模式和最佳实践，旨在帮助初学者快速入门，并为有一定经验的开发者提供参考。为了更全面地理解和应用这一开发体系，我们建议读者结合官方文档进行学习，特别是那些涉及高级特性的部分，如性能优化、复杂布局管理等，这些内容对于创建高质量的应用程序至关重要。
​ 未来，我将继续推出一系列进阶教程，包括但不限于组件自定义方法、如何实现跨设备兼容性（即多端适配）等方面的深入探讨。此外，还将介绍一些最新的技术和工具，帮助开发者紧跟技术趋势，不断提升自己的技能水平。无论是希望深化现有知识还是探索新领域的开发者，都能从中受益匪浅。因此，请大家保持关注，不要错过任何更新！