【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,Co 原创

卓伊凡

发布于 2025-4-1 01:10

浏览

0收藏

【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary，CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡

项目背景

本项目渊源已久，优雅草2025年发布，PC端已经发布，将在4月完成成品发布，目前由于考虑到鸿蒙端用户使用，毕竟新一代纯血鸿蒙harmonyos next已经不再支持安卓android，因此优雅草团队必须考虑把鸿蒙端也开发上，以下实战过程完整记录了整个开发过程，优雅草卓伊凡审核代码，记录并更新，再次感谢优雅草团队所有同事们的努力，鸿蒙端为了加速鸿蒙生态已经开源地址供查看，关于优雅草星云物联网AI智控系统可以关注优雅草官网，在本文梳理的过程中发现在后面的页面中，只需要直接写出代码并且附上注释，卓伊凡相信大家应该看得懂，针对比较复杂的部分会单独做独立解释

项目开源代码地址

https://gitee.com/youyacao/axharmonyos

【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,Co-鸿蒙开发者社区

鸿蒙端运行环境

deveco 5.0.4版本

实战过程

【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,Co-鸿蒙开发者社区

本次过后为了方便预览我们采用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启动配置",
        "通知媒介",
        "通知策略",
        "通知模板"
    ];

}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.

定义了共用的文字类，建立公共颜色类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();1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

这段代码定义了一个名为 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();1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.

此代码定义了一个名为 UIWindows 的类，用于管理窗口相关的属性和操作。该类提供了初始化窗口、获取窗口尺寸和状态栏、导航栏高度等功能。最后，导出了这个类的一个实例 uiWindows，以便在其他地方使用这些功能。注意代码里的 px2vp 函数未给出定义，它可能是一个用于将像素值转换为虚拟像素值的自定义函数。

接下来我们要写更多关于设置的页面：

【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,Co-鸿蒙开发者社区