HarmonyOS ArkTS 的新手练手样例：用 Toggle、Checkbox、Slider 和 AlertDialog 做一个设置页-北京尧图网络

开头设置页看起来简单但它包含很多基础交互开关、勾选、滑动调节、确认弹窗。把这些控件练熟后面做个人中心、偏好设置、隐私设置都会顺手。这一篇我们做一个“阅读设置页”开启深色模式、勾选自动保存、调节字号点击按钮弹出确认框。本篇目标会用Toggle表示开关状态。会用Checkbox表示是否选择。会用Slider调节数值。会用AlertDialog做确认弹窗。示例代码EntryComponentstruct ReaderSettingsPage{StatedarkMode:booleanfalse;StateautoSave:booleantrue;StatefontSize:number18;Statemessage:string当前设置还没有保存;privatesaveSettings(){AlertDialog.show({title:保存设置,message:深色模式${this.darkMode?开启:关闭}\n自动保存${this.autoSave?开启:关闭}\n字号${this.fontSize},primaryButton:{value:确定,action:(){this.message设置已保存;}},secondaryButton:{value:取消,action:(){this.message取消保存;}}});}build(){Column({space:18}){Text(阅读设置).fontSize(28).fontWeight(FontWeight.Bold).width(100%)Row(){Text(深色模式).fontSize(16).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.darkMode}).onChange((isOn:boolean){this.darkModeisOn;})}.width(100%).height(48)Row(){Text(自动保存草稿).fontSize(16).layoutWeight(1)Checkbox().select(this.autoSave).onChange((value:boolean){this.autoSavevalue;})}.width(100%).height(48)Column({space:8}){Row(){Text(文章字号).fontSize(16).layoutWeight(1)Text(${Math.round(this.fontSize)}).fontSize(16).fontColor(#666666)}.width(100%)Slider({value:this.fontSize,min:14,max:28,step:1}).onChange((value:number){this.fontSizevalue;})}.width(100%)Text(预览文字这是一段阅读效果预览。).fontSize(this.fontSize).fontColor(this.darkMode?#F5F5F5:#222222).backgroundColor(this.darkMode?#222222:#F7F7F7).borderRadius(8).padding(12).width(100%)Text(this.message).fontSize(14).fontColor(#666666).width(100%)Button(保存设置).width(100%).height(48).onClick((){this.saveSettings();})}.width(100%).height(100%).padding(20)}}小白看懂代码Toggle适合表示“开/关”。比如深色模式、消息通知、是否允许定位。Checkbox适合表示“选中/未选中”。如果页面里有多个独立选项用它很合适。Slider适合调节数值。字号、音量、亮度、进度都可以用类似方式实现。AlertDialog.show()会弹出对话框。这里点击“保存设置”后把当前状态拼成提示内容再由用户确认。选择控件怎么判断用哪个如果只有两个状态而且更像“功能开关”用Toggle。如果是表单中的勾选项用Checkbox。如果是多个选项中只能选一个可以继续学习Radio。如果是从一段范围里选数值用Slider。新手常见错误第一种错误控件显示值和状态没有绑定。比如开关写死Toggle({type:ToggleType.Switch,isOn:false})这样你后续不好根据状态控制界面。更好的方式是绑定状态Toggle({type:ToggleType.Switch,isOn:this.darkMode})第二种错误滑块返回的是数字但展示时不处理小数。如果你设置了step: 1一般展示时可以用Math.round(this.fontSize)第三种错误弹窗里写太多逻辑。弹窗更适合做确认真正复杂的保存逻辑应该放到单独方法里。本篇小结设置页是练习基础控件的好地方。Toggle管开关Checkbox管勾选Slider管范围数值AlertDialog管确认反馈。等这些交互熟悉后你就能做出很多真实应用页面。附录项目设置与构建问题记录一、项目设置本篇配套一个独立 ArkTS 示例 App用于运行页面和截图建议用 DevEco Studio 打开项目后运行entry模块。项目定位是截图练习 Demo不依赖后端服务也不需要额外权限。建议新建或检查工程时保持以下设置Project typeApplication。TemplateEmpty Ability。LanguageArkTS。ModelStage。DevicePhone可按需要兼容 Tablet、2in1。Runtime OSHarmonyOS。二、SDK 版本本文主题面向 HarmonyOS ArkTS API 24。本次示例工程根目录build-profile.json5使用如下配置{ compatibleSdkVersion: 6.1.1(24), targetSdkVersion: 6.1.1(24), runtimeOS: HarmonyOS }如果本机 DevEco Studio SDK Manager 中安装的版本不同请按本机实际 API 24 SDK 调整compatibleSdkVersion和targetSdkVersion。三、项目目录说明核心目录如下HarmonyOS_ArkTS_API24_ControlsScreenshotApp/ ├── AppScope/ │ ├── app.json5 │ └── resources/ ├── entry/ │ ├── src/main/ets/entryability/EntryAbility.ets │ ├── src/main/ets/pages/ │ ├── src/main/resources/base/profile/main_pages.json │ ├── build-profile.json5 │ └── oh-package.json5 ├── build-profile.json5 ├── hvigorfile.ts └── oh-package.json5页面文件都在entry/src/main/ets/pages/路由注册文件在entry/src/main/resources/base/profile/main_pages.json五、创建项目过程打开 DevEco Studio。点击 Create Project。选择 Application。模板选择 Empty Ability。开发语言选择 ArkTS。模型选择 Stage。设置项目名称例如ArkTSControlsDemo。选择保存路径建议路径只包含英文、数字、下划线或连字符。选择 API 24 对应 SDK。点击 Finish等待工程创建完成。打开entry/src/main/ets/pages/Index.ets。运行默认工程确认模拟器或真机能打开。再逐个添加本文中的页面代码并截图。六、本次编译安装遇到的问题与解决办法1. 中文路径导致 Hvigor 拒绝构建问题现象Invalid project path. Current path does not match: D:\私人资料\CSDN\HarmonyOS_ArkTS_API24_ControlsScreenshotApp原因Hvigor 对工程路径有限制路径只能包含英文字母、数字、连字符、下划线、英文句点、英文括号、空格或。处理办法把项目复制到 ASCII 路径后构建D:\\HarmonyOS_ArkTS_API24_ControlsScreenshotApp2.DEVECO_SDK_HOME环境变量无效问题现象Invalid value of DEVECO_SDK_HOME in the system environment path.处理办法在当前命令会话中临时指定 DevEco SDK 根目录$env:DEVECO_SDK_HOMED:\Program Files\Huawei\DevEco Studio Beta\sdk3.hvigor-config.json5缺少dependencies问题现象Schema validate failed ... missingProperty: dependencies处理办法补齐hvigor/hvigor-config.json5{ modelVersion: 5.0.0, dependencies: { } }4. 打包阶段找不到 Java问题现象spawn java ENOENT处理办法使用 DevEco Studio 自带 JBR并停止旧的 Hvigor daemon 后重新构建$env:JAVA_HOMED:\Program Files\Huawei\DevEco Studio Beta\jbr$env:PathD:\Program Files\Huawei\DevEco Studio Beta\jbr\bin;$env:Pathhvigorw--stop-daemon5. 构建成功但有弃用警告构建时出现过router.pushUrl、router.back、AlertDialog.show的弃用警告但不影响本次截图 Demo 编译和安装。正式项目建议后续按当前 API 推荐方式替换。七、本次安装启动记录构建命令hvigorw--mode module-p moduleentrydefault-p productdefault assembleHap安装命令hdc install entry-default-unsigned.hap启动命令hdc shell aastart-a EntryAbility-b com.csdn.arkts.controls.screenshot验证结果HAP 构建成功。模拟器目标127.0.0.1:5555。安装结果install bundle successfully。启动结果start ability successfully。

HarmonyOS ArkTS 的新手练手样例：用 Toggle、Checkbox、Slider 和 AlertDialog 做一个设置页

相关推荐

Minecraft废弃服务器探索：技术分析、数据挖掘与合规实践

Flutter + AI 的融合实践：7月最成功的 5 个技术交叉点复盘

无障碍设计的月度共读：WCAG 2.2 全部标准的逐一解读与实践

更多资讯

OpenLayers 开发者指南：环境搭建、编码规范、测试流程与 npm link 调试全攻略

Type-C母座选型指南：6Pin到24Pin功能与引脚数详解

ProctorU在线监考如何运作？隐藏后台程序为何必定失败

离线语音AI芯片如何落地智能家居？蜂鸟系列实战解析

开源游戏掌机：嵌入式系统全栈开发实战沙盒

腾讯云轻量服务器六年演进：老用户升配实战指南

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？