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