【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary，CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
项目背景
本项目渊源已久，优雅草2025年发布，PC端已经发布，将在4月完成成品发布，目前由于考虑到鸿蒙端用户使用，毕竟新一代纯血鸿蒙harmonyos next已经不再支持安卓android，因此优雅草团队必须考虑把鸿蒙端也开发上，以下实战过程完整记录了整个开发过程，优雅草卓伊凡审核代码，记录并更新，再次感谢优雅草团队所有同事们的努力，鸿蒙端为了加速鸿蒙生态已经开源地址供查看，关于优雅草星云物联网AI智控系统可以关注优雅草官网，在本文梳理的过程中发现在后面的页面中，只需要直接写出代码并且附上注释，卓伊凡相信大家应该看得懂，针对比较复杂的部分会单独做独立解释
项目开源代码地址
鸿蒙端运行环境
deveco 5.0.4版本
实战过程
本次过后为了方便预览我们采用previewer来预览项目，为了方便，因为真机运行目前需要的推荐配置是4G ram 8g rom 因此比较占用空间，虽然确实非常丝滑，但是一般我们留在最终测试的时候可以用。
建立公共文件src/main/ets/common/common.ets
代码语言：javascript代码运行次数：0运行复制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
代码语言：javascript代码运行次数：0运行复制@ObservedV2
export class CommonColor {
// brand
@Trace public BRAND_COLOR: ResourceColor = "#008DF0" //$r('sys.color.brand');
// background
public BACKGROUND_COLOR: ResourceStr = $r('sys.colorp_background_gray'); //$r('app.colorp_background_gray');
// Card background
public CARD_BACKGROUND_COLOR: ResourceStr = $r('sys.colorp_background_primary');
// CARD 二级背景
public CARD_BACKGROUND_SECONDARY_COLOR: ResourceStr = $r('sys.colorp_background_tertiary');
// 前景颜色
public FOREGROUND_COLOR: ResourceStr = $r('sys.colorp_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
代码语言：javascript代码运行次数：0运行复制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 函数未给出定义，它可能是一个用于将像素值转换为虚拟像素值的自定义函数。
接下来我们要写更多关于设置的页面：
当然了这是我们的最终效果，显得非常的丝滑：
发布评论