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 方法的参数类型, 后续还会加入更多属性配置.

参数	说明	类型	默认值
designWidth	标识页面设计基准宽度	number	720
unit	全局尺寸单位, 可选值 vp、px、lpx	string	vp
fontUnit	全局字体单位, 可选值 vp、px、lpx、fp	string	fp

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对应的视窗尺寸。

参数	说明	类型	默认
primary	primary 反馈色	string	#3D8AF2
success	success 反馈色	string	#58DB6B
warning	warning 反馈色	string	#F29C73
danger	danger 反馈色	string	#DB3131
default	default 默认色	string	#FFFFFF
spaceMini	间距，一般用于 padding与 margin	string	2
spaceBase	间距，一般用于 padding与 margin	string	4
spaceXs	间距，一般用于 padding与 margin	string	8
spaceSm	间距，一般用于 padding与 margin	string	12
spaceMd	间距，一般用于 padding与 margin	string	16
spaceLg	间距，一般用于 padding与 margin	string	24
spaceXl	间距，一般用于 padding与 margin	string	32
fontSizeXs	文字大小	string	10
fontSizeSm	文字大小	string	12
fontSizeMd	文字大小	string	14
fontSizeLg	文字大小	string	16
fontSizeXl	文字大小	string	20
borderRadiusSm	圆角大小	string	2
borderRadiusMd	圆角大小	string	4
borderRadiusLg	圆角大小	string	8
borderRadiusMax	圆角大小	string	9999
animationDuration	动画时长，单位 ms，如Switch组件的切换动画时长	number	200

项目启动页面主题设置

• 在项目的启动页面中，通过调用 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用户界面的方法与技巧。这不仅涵盖了基础的搭建流程，还包括了一些实用的设计模式和最佳实践，旨在帮助初学者快速入门，并为有一定经验的开发者提供参考。为了更全面地理解和应用这一开发体系，我们建议读者结合官方文档进行学习，特别是那些涉及高级特性的部分，如性能优化、复杂布局管理等，这些内容对于创建高质量的应用程序至关重要。

未来，我将继续推出一系列进阶教程，包括但不限于组件自定义方法、如何实现跨设备兼容性（即多端适配）等方面的深入探讨。此外，还将介绍一些最新的技术和工具，帮助开发者紧跟技术趋势，不断提升自己的技能水平。无论是希望深化现有知识还是探索新领域的开发者，都能从中受益匪浅。因此，请大家保持关注，不要错过任何更新！