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。