【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))
    }
}