HarmonyOS7 设置页面实战：Toggle 开关与 Slider 滑块的组合布局

发布时间：2026/9/25 2:27:53

HarmonyOS7 设置页面实战：Toggle 开关与 Slider 滑块的组合布局
文章目录前言效果展示实现原理代码详解分组标题Toggle 开关项Slider 滑块项完整代码进阶技巧设置项的即时反馈Slider 的离散值分组之间的视觉分隔写在最后前言每个 App 都有设置页面。通知开关、声音设置、字体大小调整……这些功能看起来简单但要把它们排得整齐、用着顺手还是需要花点心思的。今天用 ArkUI 实现一个设置页面包含 Toggle 开关组和 Slider 滑块重点讲讲分组布局和混合组件的排列技巧。效果展示设置页面分为两个分组通知设置推送通知Toggle声音提醒Toggle震动反馈Toggle通用设置自动更新Toggle字体大小Slider12px - 22px每个分组有小标题分组之间用间距分隔同一分组内的项目用 Divider 分隔。实现原理设置页面的布局核心是分组。每个分组是一个Column包含分组标题小字号灰色文字多个设置项Row Toggle/Slider项目之间的 Divider代码详解分组标题Text(通知设置).fontSize(13).fontColor(#999999).margin({left:8,top:12,bottom:8})分组标题不需要太醒目小字号灰色就够了。左边留 8vp 对齐内容区。Toggle 开关项Row(){Text(推送通知).fontSize(14).fontColor(#333333).width(70)Toggle({type:ToggleType.Switch,isOn:this.pushEnabled}).onChange((v:boolean){this.pushEnabledv}).selectedColor(#4D96FF)}.width(100%).padding({top:8,bottom:8})标准的 Row Toggle 布局跟之前讲过的一样。Slider 滑块项这是本案例的新组件——SliderRow(){Text(字体大小).fontSize(14).fontColor(#333333).width(70)Row(){Text(${this.fontSize}px).fontSize(14).fontColor(#333333)Slider({value:14,min:12,max:22,step:1}).width(60%).onChange((v:number){this.fontSizev}).layoutWeight(1)}.layoutWeight(1)}.width(100%).padding({top:8,bottom:8})Slider的关键参数参数说明本例值value初始值14min最小值12max最大值22step步长1滑块旁边放了一个文本标签实时显示当前数值如 “14px”。onChange回调在滑块移动时持续触发参数是当前的数值。完整代码EntryComponentstruct SettingsFormPage{StatepushEnabled:booleantrueStatesoundEnabled:booleantrueStatevibrationEnabled:booleanfalseStateautoUpdate:booleantrueStatefontSize:number14build(){Column(){Column(){Text(设置).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#333333).margin({bottom:20})Column(){// 通知设置分组Text(通知设置).fontSize(13).fontColor(#999999).margin({left:8,top:12,bottom:8})Row(){Text(推送通知).fontSize(14).fontColor(#333333).width(70)Toggle({type:ToggleType.Switch,isOn:this.pushEnabled}).onChange((v:boolean){this.pushEnabledv}).selectedColor(#4D96FF)}.width(100%).padding({top:8,bottom:8})Divider()Row(){Text(声音提醒).fontSize(14).fontColor(#333333).width(70)Toggle({type:ToggleType.Switch,isOn:this.soundEnabled}).onChange((v:boolean){this.soundEnabledv}).selectedColor(#4D96FF)}.width(100%).padding({top:8,bottom:8})Divider()Row(){Text(震动反馈).fontSize(14).fontColor(#333333).width(70)Toggle({type:ToggleType.Switch,isOn:this.vibrationEnabled}).onChange((v:boolean){this.vibrationEnabledv}).selectedColor(#4D96FF)}.width(100%).padding({top:8,bottom:8})Divider()// 通用设置分组Text(通用设置).fontSize(13).fontColor(#999999).margin({left:8,top:12,bottom:8})Row(){Text(自动更新).fontSize(14).fontColor(#333333).width(70)Toggle({type:ToggleType.Switch,isOn:this.autoUpdate}).onChange((v:boolean){this.autoUpdatev}).selectedColor(#4D96FF)}.width(100%).padding({top:8,bottom:8})Divider()Row(){Text(字体大小).fontSize(14).fontColor(#333333).width(70)Row(){Text(${this.fontSize}px).fontSize(14).fontColor(#333333)Slider({value:14,min:12,max:22,step:1}).width(60%).onChange((v:number){this.fontSizev}).layoutWeight(1)}.layoutWeight(1)}.width(100%).padding({top:8,bottom:8})}.width(100%).backgroundColor(#FFFFFF).borderRadius(12).padding(8)}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(12)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}进阶技巧设置项的即时反馈Toggle 开关在设置页面中通常是即时生效的。用户拨了开关功能就应该立即切换不需要点保存。可以在onChange里直接做业务逻辑.onChange((v:boolean){this.pushEnabledv// 立即调接口更新设置settingsApi.updatePushNotification(v)// 或者写入本地存储preferences.putSync(push_enabled,v)})Slider 的离散值Slider的step参数可以设置步长。比如字体大小只允许整数Slider({value:14,min:12,max:22,step:1})如果想要更大的步长比如音量每 10% 一格Slider({value:50,min:0,max:100,step:10})分组之间的视觉分隔两个分组之间可以加额外的间距// 通知设置的最后一项Row(){/* 震动反馈 */}.padding({top:8,bottom:8})// 不加 Divider靠分组标题的 margin 来分隔Text(通用设置).margin({left:8,top:12,bottom:8})写在最后设置页面的核心是分组 开关 滑块。把功能按逻辑分组每组给个小标题组内用 Divider 分隔——这个套路适用于几乎所有设置场景。Slider是个很实用的组件不仅能调字体大小亮度调节、音量调节、进度控制都能用到。记住它的四个关键参数value、min、max、step。

相关新闻

YOLOv8交通车辆检测系统全流程实现与优化

YOLOv8交通车辆检测系统全流程实现与优化

1. 项目概述与核心价值这个基于YOLOv8的交通车辆检测系统，是我在智能交通领域深耕多年后的一次技术实践总结。不同于市面上简单的Demo展示，这个项目完整实现了从数据准备、模型训练到应用部署的全流程闭环，特别针对12种常见车型进行了优化。为…

2026/9/24 15:08:20 阅读更多 →
B站用户行为数据分析架构演进与ClickHouse优化实践

B站用户行为数据分析架构演进与ClickHouse优化实践

1. 项目背景与核心挑战在当今互联网产品运营中，用户行为数据分析已成为驱动业务决策的关键引擎。作为国内领先的年轻人文化社区，B站面临着海量用户行为数据处理的严峻挑战：每天产生数千亿条行为事件，数据增量超过10TB，…

2026/9/24 7:41:15 阅读更多 →
Bring-up前的输入资料

Bring-up前的输入资料

Bring-up我们需要的RK3562 原理图、PCB 版本和参考设计差异DDR、PMIC、电源树和上电时序GPIO、复用引脚、上下拉和电平说明eMMC、SD、SPI NOR 等启动介质配置LCD、触摸、摄像头、音频、网络等外设型号Rockchip 对应 BSP、交叉编译工具链和烧录工具芯片、PMIC、PHY、屏幕等器件手…

2026/9/25 1:24:03 阅读更多 →

最新新闻

人事档案管理系统部署与导入导出实战：功能拆解及五大避坑指南

人事档案管理系统部署与导入导出实战：功能拆解及五大避坑指南

简介：人事档案管理系统破解版是一款面向中小企业人力资源与行政办公场景的绿色免安装管理工具，主要解决员工信息录入、查询、统计与批量导入导出等问题。系统界面友好，支持摄像头采集身份证信息并自动校验真伪，同时可区分学历、性…

2026/9/25 2:27:07 阅读更多 →
FAST 颜色工具 parseColorHexRGB 解析指南：十六进制颜色字符串与 ColorRGBA64 的转换

FAST 颜色工具 parseColorHexRGB 解析指南：十六进制颜色字符串与 ColorRGBA64 的转换

前端UI组件 【免费下载链接】fast The adaptive interface system for modern web experiences. 项目地址： https://gitcode.com/gh_mirrors/fa/fast 点击查看 免费下载 导读 parseColorHexRGB() 是 microsoft/fast-colors 包中用于把 #RRGGBB 或 #RGB 形式的十六…

2026/9/25 2:27:07 阅读更多 →
ST-LINK/V2调试接口详解：SWIM、SWD、JTAG连接与故障排查

ST-LINK/V2调试接口详解：SWIM、SWD、JTAG连接与故障排查

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/25 2:27:07 阅读更多 →
iOS相册多选与删除实战：权限、交互与PHPhotoLibrary避坑指南

iOS相册多选与删除实战：权限、交互与PHPhotoLibrary避坑指南

简介：本资源面向iOS开发初学者与中级开发者，聚焦相册图片多选与删除这一常见交互需求，适用于社交、图片编辑类应用的开发场景。内容围绕第三方库QBImagePickerController展开，讲解如何集成图片选择器、配置多选与最大选择数量、同…

2026/9/25 2:27:07 阅读更多 →
AI生成UI的工程边界：Solaris实测与前端工作流接入指南

AI生成UI的工程边界：Solaris实测与前端工作流接入指南

1. 当设计稿开始自己写代码：AI 生成 UI 到底改变了什么Runway Solaris 发布之后，我身边的前端群里炸了锅。有人兴奋地说“以后不用写 CSS 了”，也有人冷笑“又一个玩具”。我花了整整两周时间，把 Solaris 生成的各种 UI 界面往真实…

2026/9/25 2:27:07 阅读更多 →
Mac 磁盘工具说“无法修复“？试试这款磁盘修复工具：DiskWarrior 完整指南

Mac 磁盘工具说“无法修复“？试试这款磁盘修复工具：DiskWarrior 完整指南

Mac 磁盘工具说"无法修复"？试试这款磁盘修复工具：DiskWarrior 完整指南 【免费下载链接】awesome-macOS  A curated list of awesome applications, softwares, tools and shiny things for macOS. 项目地址: https://gitcode.com/GitHub…

2026/9/25 2:26:07 阅读更多 →

日新闻

AI元人文：从工具使用到思维重构的深度探索

AI元人文：从工具使用到思维重构的深度探索

最近半年我一直在琢磨一件事：AI元人文到底是什么？说白了，就是“用元视角重新审视人与AI的关系”，也在“探索AI如何反向逼着我们发现自己的思考边界”。标题里的“元探索”，在我看就是一层套一层的追问——当你用AI解决…

2026/9/25 0:00:41 阅读更多 →
Python+CNN车牌识别实战：从数据预处理到模型训练与部署

Python+CNN车牌识别实战：从数据预处理到模型训练与部署

简介：基于Python与卷积神经网络的车牌识别项目，面向计算机视觉初学者及智能交通开发者，目标是帮助用户掌握从数据预处理、模型构建到实际部署的完整流程。压缩包共25个文件，包含jpg/png图像样本、py训练脚本、md说明文档、dat数据…

2026/9/25 0:00:41 阅读更多 →
Vim基础操作全攻略：保存退出、模式切换与高频命令实战

Vim基础操作全攻略：保存退出、模式切换与高频命令实战

1. 项目概述1.1 核心需求解析今天聊聊Vim。写这个题目的原因是：几乎每个后端开发者、运维人员、数据工程师某天都会遇到一个场景——深夜加班，服务器登录界面只有黑底白字，编辑器只有vi/vim，你必须在五分钟内完成一次配置修改并保…

2026/9/25 0:00:41 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/24 14:34:13 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/24 9:10:42 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/24 14:33:56 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/24 12:50:34 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/24 14:33:48 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/24 12:49:17 阅读更多 →