【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
项目背景
本项目渊源已久，优雅草2025年发布，PC端已经发布，将在4月完成成品发布，目前由于考虑到鸿蒙端用户使用，毕竟新一代纯血鸿蒙harmonyos next已经不再支持安卓android，因此优雅草团队必须考虑把鸿蒙端也开发上，以下实战过程完整记录了整个开发过程，优雅草卓伊凡审核代码，记录并更新，再次感谢优雅草团队所有同事们的努力，鸿蒙端为了加速鸿蒙生态已经开源地址供查看，关于优雅草星云物联网AI智控系统可以关注优雅草官网，在本文梳理的过程中发现在后面的页面中，只需要直接写出代码并且附上注释，卓伊凡相信大家应该看得懂，针对比较复杂的部分会单独做独立解释，每一个页面都可以对应查看，基本都会截图，如果没有截图的那就是真的没截图
项目开源代码地址
https://gitee.com/youyacao/axharmonyos
鸿蒙端运行环境
deveco 5.0.4版本
实战过程
接下来完成所有的设置相关页面，src/main/ets/components/settings/SettingInputWidget.ets
import { commonColor } from "@wcmzllx/common-const-library" import { vp2 } from "../../common/NewVp" // 定义一个设置输入小部件组件 @ComponentV2 export struct SettingInputWidget { // 输入框标题，默认值为"系统语言" @Param title: string = "系统语言" // 是否为必填项，默认值为true @Param isMust: boolean = true // 输入框占位符，默认为空字符串 @Param placeholder: string = "" // 当输入内容变化时触发的事件 @Event onContentChange: (value: string) => void; // 是否为文本域，默认为false @Param isTextArea: boolean = false; // 文本域控制器 controller: TextAreaController = new TextAreaController() // 构建组件界面 build() { // 创建一个行容器，用于布局标题和输入框 Row({ space: vp2.vp2(5) }) { // 创建标题文本 Text(undefined) { // 如果是必填项，显示红色星号 if (this.isMust) { Span("*").fontColor("#FFFD0808") } // 显示标题文本 Span(this.title + "：") .fontColor(commonColor.FONT_3333_COLOR) } .fontSize(vp2.vp2(14)) .fontWeight(FontWeight.Regular) .lineHeight(vp2.vp2(16.41)) // 创建一个行容器，用于布局输入框 Row() { // 根据isTextArea参数决定使用TextArea还是TextInput if (this.isTextArea){ TextArea({ placeholder: this.placeholder, controller: this.controller }) .backgroundColor(Color.Transparent) .placeholderColor(commonColor.FONT_9999_COLOR) .placeholderFont({ size: vp2.vp2(14) }) .margin(0) .padding(0) .borderRadius(0) .height(vp2.vp2(160)) .fontSize(vp2.vp2(14)) .fontWeight(FontWeight.Regular) .lineHeight(vp2.vp2(16.41)) }else { TextInput({ placeholder: this.placeholder }) .backgroundColor(Color.Transparent) .placeholderColor(commonColor.FONT_9999_COLOR) .placeholderFont({ size: vp2.vp2(14) }) .margin(0) .padding(0) .borderRadius(0) .fontSize(vp2.vp2(14)) .fontWeight(FontWeight.Regular) .lineHeight(vp2.vp2(16.41)) .height(vp2.vp2(40)) .onChange(this.onContentChange) } } .padding(vp2.vp2(10)) .height(this.isTextArea ? vp2.vp2(160) : vp2.vp2(40)) .borderRadius(5) .layoutWeight(1) .borderWidth(vp2.vp2(1)) .borderColor("#FFE6EBF0") } .alignItems(this.isTextArea ? VerticalAlign.Top : VerticalAlign.Center) } }
新建接收对象页面，src/main/ets/components/settings/SettingMessageItem.ets
// 导入常用的常量和颜色库 import { CommonConst, commonColor } from "@wcmzllx/common-const-library" // 导入UI窗口工具库，用于获取导航栏高度等信息 import { uiWindows } from "../../common/UIWindows" // 导入新的视口处理库 import { vp2 } from "../../common/NewVp" // 导入设置消息小部件，用于展示设置消息列表项 import { SettingMessageWidget } from "./SettingMessageWidget" // 导入添加接收对象对话框组件 import { AddRecObjDialog } from "../../dialog/AddRecObjDialog" // 定义设置消息项组件，使用ComponentV2进行结构优化 @ComponentV2 export struct SettingMessageItem { // 设置消息项的标题，作为参数传入，默认为"新增接收对象" @Param title: string = "新增接收对象" // 本地状态，控制对话框的显示与隐藏 @Local isShowDialog: boolean = false; // 提供一个关闭对话框的方法，通过Provider注解使其可在模板中直接调用 @Provider("cancelDialog") cancelDialog: () => void = () => { this.isShowDialog = false; }; // 构建方法，定义组件的UI结构 build() { // 创建一个滚动视图，容纳设置消息项的内容 Scroll() { // 列布局，用于垂直排列子元素，设置元素之间的间距 Column({ space: vp2.vp2(15) }) { // 行布局，用于水平排列子元素 Row() { // 创建一个按钮，设置其样式和事件处理程序 Button(this.title, { type: ButtonType.Normal }) .borderRadius(5) .backgroundColor(commonColor.BRAND_COLOR) .width(vp2.vp2(302.5)) .height(vp2.vp2(40)) .fontSize(vp2.vp2(14)) .onClick(()=>{ this.isShowDialog = true; }) // 根据对话框的显示状态，条件渲染对话框内容 .bindContentCover($$this.isShowDialog, this.Dialog()) // 占位符，用于调整布局 Blank() // 刷新按钮，包含图标和文本 Text(undefined) { SymbolSpan($r("sys.symbol.arrow_clockwise")) .fontColor([commonColor.BRAND_COLOR]) Span("刷新") .fontColor(commonColor.BRAND_COLOR) } .fontWeight(FontWeight.Regular) .fontSize(vp2.vp2(14)) .lineHeight(vp2.vp2(16.41)) } // 设置行布局的内边距和宽度 .padding({ top: vp2.vp2(15), bottom: vp2.vp2(15) }) .width(CommonConst.GLOBAL_FULL_SCREEN) // 显示数据统计信息 Text(undefined) { Span("共 ") Span("3045") .fontColor(commonColor.BRAND_COLOR) Span(" 条数据") } .fontColor("#FF8D9094") .fontWeight(FontWeight.Regular) .fontSize(vp2.vp2(15)) .lineHeight(vp2.vp2(11)) .width(CommonConst.GLOBAL_FULL_SCREEN) .textAlign(TextAlign.Start) // 使用ForEach循环生成设置消息小部件 ForEach([1, 2, 3, 4, 5], (item: number) => { SettingMessageWidget() }) } // 设置列布局的下边距和宽度，考虑到底部导航栏的高度 .padding({ bottom: uiWindows.getNavigationHeight() + vp2.vp2(10) }) .width(CommonConst.GLOBAL_FULL_SCREEN) } // 设置滚动视图的滚动条状态、对齐方式和高度 .scrollBar(BarState.Off) .align(Alignment.Top) .height(CommonConst.GLOBAL_FULL_SCREEN) } // 定义对话框内容构建方法 @Builder Dialog(){ // 堆叠布局，用于放置对话框组件 Stack(){ AddRecObjDialog() } .width(CommonConst.GLOBAL_FULL_SCREEN) .height(CommonConst.GLOBAL_FULL_SCREEN) } }
系统配置页面src/main/ets/components/settings/SettingRadioWidget.ets
/* * Copyright (c) 2025.成都市一颗优雅草科技有限公司 * author：卓伊凡-优雅草技术总监 * project：优雅草星云物联网智控AI系统 */ // 导入常用颜色常量 import { commonColor } from "@wcmzllx/common-const-library" // 导入视觉比例转换工具 import { vp2 } from "../../common/NewVp" // 导入自定义按钮组件 import { ButtonWidget } from "../common/ButtonWidget"; // 定义设置单选组件 @ComponentV2 export struct SettingRadioWidget { // 标题参数，默认值为"系统语言" @Param title: string = "系统语言" // 是否必填参数，默认值为true @Param isMust: boolean = true // 切换事件参数 @Event onSwitchChange: (isOn: boolean) => void; // 选项列表参数，默认值为["选项1", "选项2"] @Param selectList: string[] = ["选项1", "选项2"] // 当前选中索引，默认值为0 @Local selectIndex: number = 0 // 按钮宽度参数 @Param widthB: number = 89.83 // 构建组件界面 build() { // 使用Row组件布局，设置间距 Row({ space: vp2.vp2(5) }) { // 显示标题和必填标记 Text(undefined) { if (this.isMust) { Span("*").fontColor("#FFFD0808") } Span(this.title + "：") .fontColor(commonColor.FONT_3333_COLOR) } .fontSize(vp2.vp2(14)) .fontWeight(FontWeight.Regular) .lineHeight(vp2.vp2(16.41)) // 使用Row组件布局选项列表，设置间距 Row({ space: vp2.vp2(4) }) { // 循环生成选项按钮 ForEach(this.selectList, (item: string, index: number) => { ButtonWidget({ title: item, index: index, fColor: this.selectIndex == index ? commonColor.WHITE_COLOR : commonColor.BRAND_COLOR, bColor: this.selectIndex == index ? commonColor.BRAND_COLOR : Color.Transparent, widthB: this.widthB, onClickEvent: (selectIndex) => { this.selectIndex = selectIndex; } }) .borderRadius(vp2.vp2(5)) .borderWidth(vp2.vp2(1)) .borderColor(this.selectIndex == index ? Color.Transparent : "#FFE4E4E4") }) } //.justifyContent(FlexAlign.End) // .padding(vp2.vp2(10)) .height(vp2.vp2(40)) .layoutWeight(1) } } } // 自定义单选按钮样式类 class MyRadioStyle implements ContentModifier<RadioConfiguration> { type: number = 0 title: string = "" constructor(numberType: number, title: string) { this.type = numberType this.title = title } applyContent(): WrappedBuilder<[RadioConfiguration]> { return wrapBuilder(buildRadio) } } // 构建自定义单选按钮 @Builder function buildRadio(config: RadioConfiguration) { Button((config.contentModifier as MyRadioStyle).title) .borderRadius(5) .borderWidth(vp2.vp2(1)) .borderColor(config.checked ? Color.Transparent : "#FFE4E4E4") .fontColor(config.checked ? commonColor.WHITE_COLOR : commonColor.BRAND_COLOR) .padding(0) .fontWeight(FontWeight.Regular) .backgroundColor(config.checked ? commonColor.BRAND_COLOR : Color.Transparent) .height(vp2.vp2(40)) .fontSize(vp2.vp2(14)) .width(vp2.vp2(89.83)) .type(ButtonType.Normal) .onClick(() => { if (config.checked) { config.triggerChange(false) return; } config.triggerChange(true) }) }
系统配置页面对应的选择src/main/ets/components/settings/SettingSelectWidget.ets
/* * Copyright (c) 2025.成都市一颗优雅草科技有限公司 * author：卓伊凡-优雅草技术总监 * project：优雅草星云物联网智控AI系统 */ import { commonColor, CommonConst } from "@wcmzllx/common-const-library" import { vp2 } from "../../common/NewVp" @Extend(Select) function selectOption(text: string) { .value(text) .font({ size: 14, weight: FontWeight.Regular }) .fontColor(commonColor.FONT_9999_COLOR) .backgroundColor(Color.Transparent) .padding(vp2.vp2(10)) .margin(0) .borderRadius(0) } @ComponentV2 export struct SettingSelectWidget { @Param title: string = "系统语言" @Param data: SelectOption[] = [ { value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }, { value: 'ddd' }] @Param isMust: boolean = true @Local index: number = 0; @Local text: string = ""; aboutToAppear(): void { try{ this.text = this.data[0].value as string }catch (e) { this.text = "请选择"; } } build() { Row({ space: vp2.vp2(5) }) { Text(undefined) { if (this.isMust) { Span("*").fontColor("#FFFD0808") } Span(this.title + "：") .fontColor(commonColor.FONT_3333_COLOR) } .fontSize(vp2.vp2(14)) .fontWeight(FontWeight.Regular) .lineHeight(vp2.vp2(16.41)) Stack() { Row() { Select(this.data) .selectOption(this.text) .onSelect((index: number, text?: string | undefined) => { }) .height(CommonConst.GLOBAL_FULL_SCREEN) .width("200%") } .height(CommonConst.GLOBAL_FULL_SCREEN) .width(CommonConst.GLOBAL_FULL_SCREEN) .zIndex(1) Row() { Image($r("app.media.ic_input_select")) .height(vp2.vp2(16)) .aspectRatio(1) } .justifyContent(FlexAlign.End) .padding(vp2.vp2(10)) .hitTestBehavior(HitTestMode.Transparent) .zIndex(2) .height(CommonConst.GLOBAL_FULL_SCREEN) .width(CommonConst.GLOBAL_FULL_SCREEN) } .clip(true) .height(vp2.vp2(40)) .borderRadius(5) .layoutWeight(1) .borderWidth(vp2.vp2(1)) .borderColor("#FFE6EBF0") } } }
系统设置 选择组件src/main/ets/components/settings/SettingSettingItem.ets
/* * Copyright (c) 2025.成都市一颗优雅草科技有限公司 * author：卓伊凡-优雅草技术总监 * project：优雅草星云物联网智控AI系统 */ // 导入常用的常量、颜色、设置项模型和数组模型 import { CommonConst, commonColor, SettingsItemModel, SettingsArrayModel } from "@wcmzllx/common-const-library" // 导入统一的UI窗口工具 import { uiWindows } from "../../common/UIWindows" // 导入可视区域计算工具 import { vp2 } from "../../common/NewVp" // 导入设置输入组件 import { SettingInputWidget } from "./SettingInputWidget" // 导入设置选择组件 import { SettingSelectWidget } from "./SettingSelectWidget" // 导入设置开关组件 import { SettingSwitchWidget } from "./SettingSwitchWidget" // 定义一个设置项组件，用于展示和编辑设置 @ComponentV2 export struct SettingSettingItem { // 接受一个设置数组模型的参数 @Param item: SettingsArrayModel[] = [] // 构建UI界面 build() { // 创建一个滚动视图，用于容纳可能超出屏幕的设置项 Scroll() { // 创建一个垂直布局，用于排列设置项 Column({ space: vp2.vp2(15) }) { // 添加一个空白视图，用于调整布局间距 Blank().height(vp2.vp2(13)) // 遍历设置数组，动态生成设置项 ForEach(this.item, (item: SettingsArrayModel) => { // 如果设置项有标题，则显示标题 if (item.title) { // 创建一个水平布局，用于显示设置项的标题 Row({ space: vp2.vp2(5) }) { // 添加一个彩色条，用于装饰标题 Column().width(vp2.vp2(4.5)).height(vp2.vp2(19.5)).backgroundColor(commonColor.BRAND_COLOR) // 显示设置项的标题 Text(item.title) .fontColor(commonColor.FONT_3333_COLOR) .fontSize(vp2.vp2(15)) .fontWeight(FontWeight.Bold) .lineHeight(vp2.vp2(17.58)) } //.margin({ top: vp2.vp2(10) }) .justifyContent(FlexAlign.Start) .width(CommonConst.GLOBAL_FULL_SCREEN) .height(vp2.vp2(24)) } // 遍历设置项，根据类型显示不同的设置组件 ForEach(item.item, (item: SettingsItemModel) => { // 如果是开关类型设置项 if (item.type == "switch") { // 显示开关组件 SettingSwitchWidget({ title: item.title, isMust: item.isMust, isOn: item.isOn, onSwitchChange: item.onSwitchChange }) } else if (item.type == "select") { // 如果是选择类型设置项，显示选择组件 SettingSelectWidget({ title: item.title, isMust: item.isMust })// , data: item.data // SettingSelectWidget() } else if (item.type == "input") { // 如果是输入类型设置项，显示输入组件 SettingInputWidget({ title: item.title, isMust: item.isMust, onContentChange: item.onInputChange }) } }) }) // 添加一个确认更新按钮 Button("确认更新", { type: ButtonType.Normal }) .borderRadius(5) .backgroundColor(commonColor.BRAND_COLOR) .width(vp2.vp2(372)) .height(vp2.vp2(40)) .fontSize(vp2.vp2(14)) .margin({ top: vp2.vp2(35) }) } // 设置滚动视图的底部填充，以适应不同设备的导航栏高度 .padding({ bottom: uiWindows.getNavigationHeight() + vp2.vp2(10) }) .width(CommonConst.GLOBAL_FULL_SCREEN) } // 关闭滚动条，提升用户体验 .scrollBar(BarState.Off) .align(Alignment.Top) .height(CommonConst.GLOBAL_FULL_SCREEN) } }
定义开关 src/main/ets/components/settings/SettingSwitchWidget.ets 这块主要是针对颜色变化
/* * Copyright (c) 2025.成都市一颗优雅草科技有限公司 * author：卓伊凡-优雅草技术总监 * project：优雅草星云物联网智控AI系统 */ // 导入常用颜色常量库 import { commonColor } from "@wcmzllx/common-const-library" // 导入统一的视觉和布局参数库 import { vp2 } from "../../common/NewVp" // 定义一个设置开关组件，用于在界面上展示一个带开关的设置项 @ComponentV2 export struct SettingSwitchWidget { // 设置项的标题，默认值为"系统语言" @Param title: string = "系统语言" // 是否为必填项，用于标记设置项的重要性 @Param isMust: boolean = true // 开关的初始状态，true表示开启，false表示关闭 @Param isOn: boolean = true; // 当开关状态改变时触发的事件，接收一个布尔值参数，表示新的开关状态 @Event onSwitchChange: (isOn: boolean) => void; // 组件的构建方法，用于定义组件的UI结构 build() { // 使用Row组件来布局设置项的标题和开关，设置它们之间的间距 Row({ space: vp2.vp2(5) }) { // 使用Text组件来显示设置项的标题，如果设置项为必填，则在标题前加一个红色的星号 Text(undefined) { if (this.isMust) { Span("*").fontColor("#FFFD0808") } Span(this.title + "：") .fontColor(commonColor.FONT_3333_COLOR) } .fontSize(vp2.vp2(14)) .fontWeight(FontWeight.Regular) .lineHeight(vp2.vp2(16.41)) // 使用Row组件来布局开关，并设置其对齐方式和样式 Row() { // 使用Toggle组件来显示一个开关按钮，并设置其类型、初始状态、大小、选中颜色以及状态改变时的事件处理函数 Toggle({ type: ToggleType.Switch, isOn: this.isOn }) .size({ width: vp2.vp2(44.44), height: vp2.vp2(25) }) .selectedColor(commonColor.BRAND_COLOR) .onChange(this.onSwitchChange) .borderRadius(vp2.vp2(12.5)) } .justifyContent(FlexAlign.End) .padding(vp2.vp2(10)) .height(vp2.vp2(40)) //.borderRadius(5) .layoutWeight(1) // .borderWidth(vp2.vp2(1)) // .borderColor("#FFE6EBF0") } } }
src/main/ets/components/settings/TabsBarWidget.ets
/* * Copyright (c) 2025.成都市一颗优雅草科技有限公司 * author：卓伊凡-优雅草技术总监 * project：优雅草星云物联网智控AI系统 */ // 导入常用常量和颜色配置 import { CommonConst, commonColor } from "@wcmzllx/common-const-library" // 导入自定义的vp2工具函数 import { vp2 } from "../../common/NewVp" // 定义一个组件，使用ComponentV2装饰器标记 @ComponentV2 export struct TabsBarWidget { // 定义一个参数，表示当前选中的标签页索引 @Param index: number = 0 // 定义一个事件，当标签页索引发生变化时触发 @Event $index: (index: number) => void; // 定义一个依赖项，需要一个TabsController实例 @Require @Param controller: TabsController; // 定义一个私有成员，用于滚动列表 private listScroller: ListScroller = new ListScroller() // 监视index属性变化，当index变化时，滚动列表到对应的项 @Monitor("index") onIndexChange() { this.listScroller.scrollToIndex(this.index); } // 构建组件UI build() { // 创建一个列表，使用listScroller进行滚动，设置项之间的间距 List({ scroller: this.listScroller, space: vp2.vp2(31) }) { // 遍历设置项，生成每个标签页项 ForEach(CommonConst.SETTING_ITEM, (item: string, index: number) => { ListItem() { Stack({ alignContent: Alignment.Center }) { // 根据当前索引是否与项索引一致，决定是否显示选中状态 if (this.index == index) { // 显示选中状态，包括下划线和文本颜色变化 Stack({ alignContent: Alignment.Bottom }) { Divider() .width(vp2.vp2(46)) .strokeWidth(vp2.vp2(1.5)) .color("#FF008DF0") } .height(CommonConst.GLOBAL_FULL_SCREEN) Text(item) .fontColor(commonColor.FONT_00DFF0_COLOR) .fontSize(vp2.vp2(14)) .fontWeight(600) .lineHeight(vp2.vp2(16.41)) .offset({ y: vp2.vp2(5.25) * -1 }) } else { // 未选中状态，文本颜色不同 Text(item) .fontColor(commonColor.FONT_6666_COLOR) .fontSize(vp2.vp2(14)) .fontWeight(FontWeight.Regular) .lineHeight(vp2.vp2(16.41)) } } .height(CommonConst.GLOBAL_FULL_SCREEN) // 点击事件，改变当前索引并触发事件 .onClick(() => { this.controller.changeIndex(index); this.$index(index) }) } }) } // 设置列表滚动方向，关闭滚动条，设置宽度和高度 .listDirection(Axis.Horizontal) .scrollBar(BarState.Off) .width(CommonConst.GLOBAL_FULL_SCREEN) .height(vp2.vp2(30)) } }
ok 基本上 设置相关页面基本就完成了，
