【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary，CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
项目背景
本项目渊源已久，优雅草2025年发布，PC端已经发布，将在4月完成成品发布，目前由于考虑到鸿蒙端用户使用，毕竟新一代纯血鸿蒙harmonyos next已经不再支持安卓android，因此优雅草团队必须考虑把鸿蒙端也开发上，以下实战过程完整记录了整个开发过程，优雅草卓伊凡审核代码，记录并更新，再次感谢优雅草团队所有同事们的努力，鸿蒙端为了加速鸿蒙生态已经开源地址供查看，关于优雅草星云物联网AI智控系统可以关注优雅草官网，在本文梳理的过程中发现在后面的页面中，只需要直接写出代码并且附上注释，卓伊凡相信大家应该看得懂，针对比较复杂的部分会单独做独立解释
项目开源代码地址
https://gitee.com/youyacao/axharmonyos
鸿蒙端运行环境
deveco 5.0.4版本
实战过程
本次过后为了方便预览我们采用previewer来预览项目，为了方便，因为真机运行目前需要的推荐配置是4G ram 8g rom 因此比较占用空间，虽然确实非常丝滑，但是一般我们留在最终测试的时候可以用。
建立公共文件src/main/ets/common/common.ets
import { FilterParams } from "@kit.ArkUI"; export class CommonConst { // log domain public static readonly LOG_ID: number = 0x8812; // 基础时间，超前 public static readonly BASE_TIME = Number.MAX_VALUE; // 全局大号行高 public static readonly FONT_LINE_HEIGHT: number = 32; public static readonly FONT_SIZE_SMALL: number = 12; // 卡片字体大小 public static readonly FONT_SIZE_MEDIUM: number = 14; // 阅读文字大小 public static readonly FONT_SIZE_LARGE: number = 16; // 二级标题 public static readonly FONT_SIZE_XLARGE: number = 18; // 一级标题 public static readonly FONT_SIZE_XXLARGE: number = 20; // 标题 public static readonly FONT_SIZE_TITLE_MEDIUM: number = 24; // 大标题 public static readonly FONT_SIZE_TITLE_LARGE: number = 28; // 全局左右内边距 public static readonly GLOBAL_PADDING_LEFT_RIGHT: number = 20; // 全局内边距 8 public static readonly GLOBAL_PADDING_8: number = 8; // 全局内边距 12 public static readonly GLOBAL_PADDING_12: number = 12; // 全局内边距 16 public static readonly GLOBAL_PADDING_16: number = 16; // 全局边距 超小 public static readonly GLOBAL_SPACE_EXTRA_SMALL: number = 3; // 全局边距 小 public static readonly GLOBAL_SPACE_SMALL: number = 5; // 全局边距 中 public static readonly GLOBAL_SPACE_MEDIUM: number = 10; // 全局边距 大 public static readonly GLOBAL_SPACE_LARGE: number = 20; // 满屏 public static readonly FULL_SCREEN: string = "100%"; // 组件间隔 public static readonly COMPONENT_SPACE_SMALL: number = 5; public static readonly COMPONENT_SPACE_MEDIUM: number = 10; public static readonly COMPONENT_SPACE_LARGE: number = 20; // 全局圆角 public static readonly GLOBAL_ROUND: number = 8; // 全局子圆角 public static readonly GLOBAL_SUB_ROUND: number = 3; // 全局字间距 public static readonly GLOBAL_LETTER_SPACING: number = 0; // 特小图标 public static readonly ICON_EXTRA_SMALL_SIZE: number = 16; // 小 图标 public static readonly ICON_SMALL_SIZE: number = 24; // 中 图标 public static readonly ICON_MEDIUM_SIZE: number = 32; // 大 图标 public static readonly ICON_LARGE_SIZE: number = 40; // 超短动画时长 public static readonly ANIMATION_EXTRA_SMALL_DURATION: number = 80; // 短动画时长 public static readonly ANIMATION_SHORT_DURATION: number = 300; // 中动画时长 public static readonly ANIMATION_MEDIUM_DURATION: number = 500; // 长动画时长 public static readonly ANIMATION_LONG_DURATION: number = 700; // 小插画 public static readonly IMAGE_SMALL_SIZE: number = 200; // 中插画 public static readonly IMAGE_MEDIUM_SIZE: number = 280; // 大插画 public static readonly IMAGE_LARGE_SIZE: number = 360; // 全局可见区间 public static readonly GLOBAL_VISIBLE_AREA: number[] = [0, 0.95]; // 全屏 public static readonly GLOBAL_FULL_SCREEN: string = "100%"; public static readonly SETTING_ITEM: string[] = [ "系统配置", "消息服务配置", "文件服务配置", "SSH启动配置", "通知媒介", "通知策略", "通知模板" ]; }
定义了共用的文字类，
建立公共颜色类src/main/ets/common/commonColor.ets
@ObservedV2 export class CommonColor { // brand @Trace public BRAND_COLOR: ResourceColor = "#008DF0" //$r('sys.color.brand'); // background public BACKGROUND_COLOR: ResourceStr = $r('sys.color.comp_background_gray'); //$r('app.color.comp_background_gray'); // Card background public CARD_BACKGROUND_COLOR: ResourceStr = $r('sys.color.comp_background_primary'); // CARD 二级背景 public CARD_BACKGROUND_SECONDARY_COLOR: ResourceStr = $r('sys.color.comp_background_tertiary'); // 前景颜色 public FOREGROUND_COLOR: ResourceStr = $r('sys.color.comp_foreground_primary'); // 文本 public FONT_COLOR: ResourceStr = $r('sys.color.font_primary'); // 辅助文本 public FONT_SECONDARY_COLOR: ResourceStr = $r('sys.color.font_secondary'); // 三级 public FONT_TERTIARY_COLOR: ResourceStr = "#999999"; // 3333 public FONT_3333_COLOR: ResourceStr = "#FF333333"; // #FF666666 public FONT_6666_COLOR: ResourceStr = "#FF666666"; // #FF2F3133 public FONT_2F3133_COLOR: ResourceStr = "#FF2F3133"; // #FF008DF0 public FONT_00DFF0_COLOR: ResourceStr = "#FF00DFF0"; // #FF999999 public FONT_9999_COLOR: ResourceStr = "#FF999999"; // 警告颜色 public WARNING_COLOR: ResourceStr = $r('sys.color.warning'); // 二级警告 public SECONDARY_WARNING_COLOR: ResourceStr = $r('sys.color.alert'); // 确认颜色 public CONFIRM_COLOR: ResourceStr = $r('sys.color.confirm'); // 白色 public WHITE_COLOR: ResourceStr = $r('sys.color.font_on_primary'); // #FF111111 背景 public BACKGROUND_111111_COLOR: ResourceStr = "#FF111111"; // #FFE6EBF0 public E6EBF0_COLOR: ResourceStr = "#FFE6EBF0"; // 黑色 public BLACK_COLOR: ResourceStr = "#FF000000"; // 将#34FFBB 格式转化为 rgba(52, 255, 187, 0.5) public hexToRgba(hex: string, alpha: number): string { const rgb = parseInt(hex.slice(1), 16); return `rgba(${rgb >> 16}, ${(rgb >> 8) & 0xff}, ${rgb & 0xff}, ${alpha})`; } } export const commonColor = new CommonColor();
这段代码定义了一个名为 CommonColor 的类，用于管理各种颜色常量和提供一个将十六进制颜色转换为 RGBA 颜色的方法。最后，导出了这个类的一个实例 commonColor，方便在其他地方使用这些颜色常量和方法。
继续我们在ComponentLibrary库建立定义弹窗框的类src/main/ets/common/UIWindows.ets
import { window, display } from '@kit.ArkUI'; import { KeyboardAvoidMode } from '@kit.ArkUI'; /** * UIWindows 类负责管理窗口的初始化及其属性 */ class UIWindows { public window?: window.Window; private windowHeight: number = 0; private windowWidth: number = 0; private barHeight: number = 0; private navigationHeight: number = 0; private TAG = 'UIWindows'; /** * 初始化窗口，包括设置键盘避免模式、全屏布局、系统栏属性以及获取窗口和导航栏的高度 * @param window 窗口对象 */ initWindow(window: window.Window): void { this.window = window; this.window.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET); this.window.setWindowLayoutFullScreen(true); this.window.setWindowSystemBarProperties({ statusBarContentColor: "#FFFFFF" }); this.barHeight = this.initWindowBarHeight(); this.navigationHeight = this.initWindowNavigationHeight(); this.windowHeight = this.initWindowHeight(); this.windowWidth = this.initWindowWidth(); } /** * 获取窗口高度 * @returns 窗口高度 */ public getWindowHeight(): number { return this.windowHeight; } /** * 获取窗口宽度 * @returns 窗口宽度 */ public getWindowWidth(): number { return this.windowWidth; } /** * 获取状态栏高度 * @returns 状态栏高度 */ public getBarHeight(): number { return this.barHeight; } /** * 获取导航栏高度 * @returns 导航栏高度 */ public getNavigationHeight(): number { return this.navigationHeight; } /** * 初始化窗口高度 * @returns 窗口高度 */ private initWindowHeight(): number { return Math.floor(px2vp(display.getDefaultDisplaySync().height)); } /** * 初始化窗口宽度 * @returns 窗口宽度 */ private initWindowWidth(): number { return Math.floor(px2vp(display.getDefaultDisplaySync().width)); } /** * 初始化状态栏高度 * @returns 状态栏高度 */ private initWindowBarHeight(): number { if (!this.window) { return 0; } const avoidArea = this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); return Math.floor(px2vp(avoidArea.topRect.height)); } /** * 初始化导航栏高度 * @returns 导航栏高度 */ private initWindowNavigationHeight(): number { if (!this.window) { return 0; } const avoidArea = this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR); return Math.floor(px2vp(avoidArea.bottomRect.height)); } } // 创建 UIWindows 实例 export const uiWindows = new UIWindows();
此代码定义了一个名为 UIWindows 的类，用于管理窗口相关的属性和操作。该类提供了初始化窗口、获取窗口尺寸和状态栏、导航栏高度等功能。最后，导出了这个类的一个实例 uiWindows，以便在其他地方使用这些功能。注意代码里的 px2vp 函数未给出定义，它可能是一个用于将像素值转换为虚拟像素值的自定义函数。
接下来我们要写更多关于设置的页面：
当然了这是我们的最终效果，显得非常的丝滑：
