尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案

HarmonyOS7 多开关设置面板：用 ForEach 做好设置项

发布时间：2026/9/13 7:21:50来源：尧图网络资讯中心
首页/资讯中心/文章详情
HarmonyOS7 多开关设置面板：用 ForEach 做好设置项
文章目录前言适合放在哪些页面里页面结构拆一下核心逻辑说明完整代码最后提醒一句前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕Toggle 设置面板展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这里更适合从数据驱动角度看。数组变化之后ForEach负责把选项渲染出来。适合放在哪些页面里如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题Toggle 设置面板核心 APIForEach使用场景设置项文章侧重点数据驱动页面结构拆一下代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。核心逻辑说明先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。interfaceSettingsTogglePanelItem{label:stringicon:stringstate:stringcolor:string}EntryComponentstruct SettingsTogglePanel{StateisShow:booleantrueStatewifi:booleantrueStatebluetooth:booleanfalseStatelocation:booleantrueStatesilent:booleanfalseStateairplane:booleanfalsebuild(){Column(){这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。ForEach是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成SettingsTogglePanel共享颜色也内置到当前文件里单独复制出来读会更方便。constCOLOR_OPTIONS:Array{name:string;value:string}[{name:蓝色,value:#4D96FF},{name:绿色,value:#6BCB77},{name:黄色,value:#FFD93D},{name:红色,value:#FF6B6B},{name:紫色,value:#9B59B6},{name:橙色,value:#FFA500},{name:青色,value:#00BCD4},{name:粉色,value:#FF69B4},{name:灰蓝,value:#607D8B},{name:深色,value:#333333}]constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstSUBTEXT_COLOR:string#8A8A8AinterfaceSettingsTogglePanelItem{label:stringicon:stringstate:stringcolor:string}EntryComponentstruct SettingsTogglePanel{StateisShow:booleantrueStatewifi:booleantrueStatebluetooth:booleanfalseStatelocation:booleantrueStatesilent:booleanfalseStateairplane:booleanfalsebuild(){Column(){if(this.isShow){Scroll(){Column(){Text(Toggle 多开关 - 设置面板).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})ForEach([{label:Wi-Fi,icon:,state:wifi,color:COLOR_OPTIONS[5].value},{label:蓝牙,icon:,state:bluetooth,color:COLOR_OPTIONS[5].value},{label:定位服务,icon:,state:location,color:COLOR_OPTIONS[3].value},{label:静音模式,icon:Mute,state:silent,color:COLOR_OPTIONS[1].value},{label:飞行模式,icon:✈️,state:airplane,color:COLOR_OPTIONS[0].value}],(item:SettingsTogglePanelItem){Row(){Text(item.icon).fontSize(20)Column(){Text(item.label).fontSize(14).fontWeight(FontWeight.Medium)Text(this.getStatus(item.state)).fontSize(11).fontColor(SUBTEXT_COLOR)}.alignItems(HorizontalAlign.Start).margin({left:10}).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.getState(item.state)}).selectedColor(item.color).onChange((v:boolean){this.setState(item.state,v)})}.width(100%).padding({top:12,bottom:12}).border({width:{bottom:0.5},color:#F5F5F5})})}.width(100%).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}}Text(多开关设置面板Toggle 多开关 - 设置中心多开关控制).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}getState(key:string):boolean{switch(key){casewifi:returnthis.wifi;casebluetooth:returnthis.bluetooth;caselocation:returnthis.location;casesilent:returnthis.silent;caseairplane:returnthis.airplane;default:returnfalse}}setState(key:string,value:boolean){switch(key){casewifi:this.wifivalue;break;casebluetooth:this.bluetoothvalue;break;caselocation:this.locationvalue;break;casesilent:this.silentvalue;break;caseairplane:this.airplanevalue;break}}getStatus(key:string):string{switch(key){casewifi:returnthis.wifi?已连接:未连接;casebluetooth:returnthis.bluetooth?已开启:未开启;caselocation:returnthis.location?已授权:未授权;casesilent:returnthis.silent?已静音:正常;caseairplane:returnthis.airplane?已开启:已关闭;default:return}}}最后提醒一句继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。
RELATED

相关推荐

C++实现一维卡尔曼滤波：从原理到实战追踪匀速目标

C++实现一维卡尔曼滤波：从原理到实战追踪匀速目标

1. 项目概述：从雷达数据到稳定轨迹在雷达信号处理和目标跟踪领域，我们常常面临一个经典问题：传感器测量值充满了噪声，而目标本身的运动规律我们却有所预期。比如，一个空中交通管制雷达，每隔几秒扫描一次空域…

📅 2026/9/13 7:21:07
Python 利用 OpenCC 精准处理中文简繁转换与地区词差异

Python 利用 OpenCC 精准处理中文简繁转换与地区词差异

1. OpenCC 是什么？为什么需要它？如果你经常需要处理中文文本，尤其是需要在简体中文和繁体中文之间进行转换，那么 OpenCC 绝对是一个不可错过的工具。OpenCC 全称 Open Chinese Convert，是一个开源的中文简繁转换项目。…

📅 2026/7/18 17:16:02
Python __slots__ 内存优化实战：从原理到工程落地

Python __slots__ 内存优化实战：从原理到工程落地

1. 项目概述：为什么 slots 不是“语法糖”，而是内存优化的手术刀在 Python 项目做到中后期，你大概率会遇到一个安静却顽固的问题：对象实例越跑越多，内存占用曲线却像被胶水粘住一样持续上扬，psutil.Process…

📅 2026/9/12 4:56:36
MORE NEWS

更多资讯

📰

环境变量与 PATH 完全指南：从命令查找到 API 密钥安全的实战手册

环境变量与 PATH 完全指南：从命令查找到 API 密钥安全的实战手册 【免费下载链接】easy-vibe 💻 vibe coding 101｜The first course for AI-native product builders. 项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe 导读…
📰

MAA 更换主题任务全解析：从任务配置到源码级实现原理

MAA 更换主题任务全解析：从任务配置到源码级实现原理 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手，全日常一键长草！| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: https://gitc…
📰

用 fairseq 复现多样化机器翻译混合专家模型：unilm 仓库 translation_moe 实战解析

用 fairseq 复现多样化机器翻译混合专家模型：unilm 仓库 translation_moe 实战解析 【免费下载链接】unilm Large-scale Self-supervised Pre-training Across Tasks, Languages, and Modalities 项目地址: https://gitcode.com/GitHub_Trending/un/unilm 本…
📰

本地AI助手实战指南：开源代理框架实现零API费用办公自动化

1. 项目概述：为什么“本地运行AI助手”正在成为刚需最近三个月，我帮七八个不同行业的朋友部署过本地AI助手——有做科研的博士后，有接外包的前端工程师，还有自己开小工作室的设计总监。他们提得最多的一句话是：“API调…
📰

Tasmota Berry 动画框架振荡波形完全指南：oscillator_value 九种模式的原理、DSL 用法与实战效果

Tasmota Berry 动画框架振荡波形完全指南：oscillator_value 九种模式的原理、DSL 用法与实战效果 【免费下载链接】Tasmota Alternative firmware for ESP8266 and ESP32 based devices with easy configuration using webUI, OTA updates, automation using timers…
📰

BaaS平台选型：InsForge与Supabase、Firebase性能差多少？3组数据讲清楚

BaaS平台选型：InsForge与Supabase、Firebase性能差多少？3组数据讲清楚 【免费下载链接】InsForge The all-in-one, open-source backend platform for agentic coding. InsForge gives your coding agent database, auth, storage, compute, hosting, an…
TODAY

今日更新

🆕

AI驱动的自动化专利分析平台技术解析

1. 项目背景与核心价值在当今知识经济时代，专利资产已成为企业核心竞争力的重要组成部分。传统专利分析往往依赖人工阅读和专家经验，面对海量专利数据时存在效率低下、主观性强、成本高昂等问题。我们团队开发的AI驱动的自动化专利分析平台，正…
🆕

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析 【免费下载链接】LeetCode-Go ✅ Solutions to LeetCode by Go, 100% test coverage, runtime beats 100% | LeetCode 题解 项目地址: https://git…
🆕

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

简介：面向计算机相关专业需要完成毕业设计或课程设计的学生，这套Java实战项目以某学院在线答疑系统为业务场景，采用B/S架构并搭配MySQL数据库，完整实现在线答疑、课程申请、知识库精选与交流互动等核心功能。项目源码共449个文件&…
THIS WEEK

本周精选

📌

AI驱动的自动化专利分析平台技术解析

1. 项目背景与核心价值在当今知识经济时代，专利资产已成为企业核心竞争力的重要组成部分。传统专利分析往往依赖人工阅读和专家经验，面对海量专利数据时存在效率低下、主观性强、成本高昂等问题。我们团队开发的AI驱动的自动化专利分析平台，正…
📌

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析 【免费下载链接】LeetCode-Go ✅ Solutions to LeetCode by Go, 100% test coverage, runtime beats 100% | LeetCode 题解 项目地址: https://git…
📌

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

简介：面向计算机相关专业需要完成毕业设计或课程设计的学生，这套Java实战项目以某学院在线答疑系统为业务场景，采用B/S架构并搭配MySQL数据库，完整实现在线答疑、课程申请、知识库精选与交流互动等核心功能。项目源码共449个文件&…
THIS MONTH

本月热门

🔥

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

简介：本资源是一套面向本科毕业设计、课程设计及期末大作业的工业级焊缝缺陷检测实战方案，聚焦深度学习在焊接质量控制中的落地应用，解决传统人工检测效率低、主观性强等痛点。压缩包共26个文件，含9个C源码（如yolo_det…
🔥

分布式服务的决策记录

分布式服务的决策记录架构演进最怕只有结果没有理由。一次拆分、缓存或队列调整，都应写明当时的瓶颈、备选方案、选择原因和撤回条件。 记录的最小单位 用一页说明解决的任务、依赖、风险和验证方式即可。别把决定写成永远正确的准则；前提变化时&#xf…
🔥

创业产品的首版范围

创业产品的首版范围首版的任务是验证一个需求，不是展示全部能力。选择用户愿意反复完成、且结果容易判断的动作，把输入、输出和人工兜底都做清楚。 控制范围 先做可撤回、低风险的流程。权限不明、需要复杂协作或结果不可逆的部分先不自动化。 用反馈决定…

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

告诉我们您的行业与需求，资深顾问一对一梳理方案与报价，全程免费。

免费获取方案 400-888-6620
📞 💬