鸿蒙多功能工具箱开发实战(十九)-应用设置页面开发前言设置页面是应用的标配功能包括主题切换、字体大小、缓存清理等。本文将讲解设置页面的实现。一、设置项设计1.1 设置项数据结构exportinterfaceSettingItem{key:stringtitle:stringsubtitle?:stringtype:switch|select|button|infovalue?:anyoptions?:Array{label:string,value:any}action?:()void}1.2 设置分组exportconstSETTINGS_GROUPS[{title:显示设置,items:[{key:theme,title:深色模式,type:switch,value:false},{key:Barrier-free,title:无障碍模式,type:switch,value:false},{key:fontSize,title:字体大小,type:select,value:medium,options:[{label:小,value:small},{label:中,value:medium},{label:大,value:large}]}]},{title:数据管理,items:[{key:cache,title:清除缓存,type:button,subtitle:0KB},{key:history,title:清除历史,type:button}]},{title:关于,items:[{key:version,title:版本号,type:info,value:1.0.0},{key:about,title:关于我们,type:button}]}]二、设置页面实现EntryComponentstruct SettingsPage{Statesettings:Mapstring,anynewMap()aboutToAppear(){this.loadSettings()}build(){Column(){NavBar({title:设置})List(){ForEach(SETTINGS_GROUPS,(group:any){ListItemGroup({header:this.GroupHeader(group.title)}){ForEach(group.items,(item:SettingItem){ListItem(){this.SettingItem(item)}})}})}.width(100%).layoutWeight(1)}}BuilderGroupHeader(title:string){Text(title).fontSize(14).fontColor(#999999).margin({top:16,bottom:8}).padding({left:16})}BuilderSettingItem(item:SettingItem){Row(){// 左侧标题Column(){Text(item.title).fontSize(16)if(item.subtitle){Text(item.subtitle).fontSize(12).fontColor(#999999).margin({top:4})}}.alignItems(HorizontalAlign.Start).layoutWeight(1)// 右侧内容if(item.typeswitch){Toggle({type:ToggleType.Switch,isOn:this.settings.get(item.key)||false}).onChange((isOn){this.updateSetting(item.key,isOn)})}elseif(item.typeselect){Row(){Text(this.getOptionLabel(item)).fontColor(#999999)Text(›).margin({left:8})}.onClick(()this.showSelectDialog(item))}elseif(item.typeinfo){Text(item.value).fontColor(#999999)}elseif(item.typebutton){Text(›).fontSize(20).fontColor(#999999)}}.width(100%).height(item.subtitle?64:56).padding({left:16,right:16}).backgroundColor(#FFFFFF).onClick((){if(item.typebuttonitem.keycache){this.clearCache()}elseif(item.typebuttonitem.keyhistory){this.clearHistory()}})}privateasyncloadSettings(){constprefsawaitPreferencesService.getInstance()this.settings.set(theme,awaitprefs.get(theme,false))this.settings.set(fontSize,awaitprefs.get(fontSize,medium))}privateasyncupdateSetting(key:string,value:any){constprefsawaitPreferencesService.getInstance()awaitprefs.put(key,value)this.settings.set(key,value)}privategetOptionLabel(item:SettingItem):string{constvaluethis.settings.get(item.key)||item.valueconstoptionitem.options?.find(oo.valuevalue)returnoption?.label||}privateclearCache(){AlertDialog.show({title:提示,message:确定要清除缓存吗,primaryButton:{value:取消,action:(){}},secondaryButton:{value:确定,action:async(){// 清除缓存逻辑prompt.showToast({message:缓存已清除})}}})}privateclearHistory(){AlertDialog.show({title:提示,message:确定要清除所有历史记录吗,primaryButton:{value:取消,action:(){}},secondaryButton:{value:确定,action:async(){consthistoryServicenewHistoryService()awaithistoryService.clear()prompt.showToast({message:历史已清除})}}})}}三、高级设置功能3.1 设置流程图是否用户修改设置验证设置值是否有效?保存到Preferences显示错误提示通知相关组件应用新设置3.2 主题切换// 主题管理classThemeManager{privatestaticcurrentTheme:ThemelightstaticsetTheme(theme:Theme){this.currentThemetheme// 保存设置PreferencesService.set(theme,theme)// 通知UI更新emitter.emit({eventId:themeChanged},{theme})}staticgetThemeColors():ThemeColors{returnthis.currentThemedark?DARK_THEME:LIGHT_THEME}}constLIGHT_THEME{background:#FFFFFF,text:#333333,primary:#007DFF}constDARK_THEME{background:#1A1A1A,text:#FFFFFF,primary:#4D90FF}3.3 语言切换classI18nManager{privatestaticcurrentLanguage:stringzhstaticsetLanguage(lang:string){this.currentLanguagelang PreferencesService.set(language,lang)emitter.emit({eventId:languageChanged},{lang})}statict(key:string):string{constmessagesI18N_MESSAGES[this.currentLanguage]returnmessages[key]||key}}四、设置项组件Componentstruct SettingItem{Proptitle:stringPropsubtitle?:stringBuilderParamcontent:()voidbuild(){Row(){Column(){Text(this.title).fontSize(16)if(this.subtitle){Text(this.subtitle).fontSize(12).fontColor(#999)}}.alignItems(HorizontalAlign.Start)Blank()this.content()}.padding({left:16,right:16,top:12,bottom:12})}}图 1 设置页面展示五、小结本文详细讲解了设置页面✅ 设置项数据结构✅ 设置分组展示✅ Switch开关✅ Select选择器✅ 缓存清理功能✅ 主题切换✅ 语言切换✅ 设置项组件系列文章导航下期预告鸿蒙多功能工具箱开发实战(二十)-性能优化与打包发布
鸿蒙多功能工具箱开发实战(十九)-应用设置页面开发
鸿蒙多功能工具箱开发实战(十九)-应用设置页面开发前言设置页面是应用的标配功能包括主题切换、字体大小、缓存清理等。本文将讲解设置页面的实现。一、设置项设计1.1 设置项数据结构exportinterfaceSettingItem{key:stringtitle:stringsubtitle?:stringtype:switch|select|button|infovalue?:anyoptions?:Array{label:string,value:any}action?:()void}1.2 设置分组exportconstSETTINGS_GROUPS[{title:显示设置,items:[{key:theme,title:深色模式,type:switch,value:false},{key:Barrier-free,title:无障碍模式,type:switch,value:false},{key:fontSize,title:字体大小,type:select,value:medium,options:[{label:小,value:small},{label:中,value:medium},{label:大,value:large}]}]},{title:数据管理,items:[{key:cache,title:清除缓存,type:button,subtitle:0KB},{key:history,title:清除历史,type:button}]},{title:关于,items:[{key:version,title:版本号,type:info,value:1.0.0},{key:about,title:关于我们,type:button}]}]二、设置页面实现EntryComponentstruct SettingsPage{Statesettings:Mapstring,anynewMap()aboutToAppear(){this.loadSettings()}build(){Column(){NavBar({title:设置})List(){ForEach(SETTINGS_GROUPS,(group:any){ListItemGroup({header:this.GroupHeader(group.title)}){ForEach(group.items,(item:SettingItem){ListItem(){this.SettingItem(item)}})}})}.width(100%).layoutWeight(1)}}BuilderGroupHeader(title:string){Text(title).fontSize(14).fontColor(#999999).margin({top:16,bottom:8}).padding({left:16})}BuilderSettingItem(item:SettingItem){Row(){// 左侧标题Column(){Text(item.title).fontSize(16)if(item.subtitle){Text(item.subtitle).fontSize(12).fontColor(#999999).margin({top:4})}}.alignItems(HorizontalAlign.Start).layoutWeight(1)// 右侧内容if(item.typeswitch){Toggle({type:ToggleType.Switch,isOn:this.settings.get(item.key)||false}).onChange((isOn){this.updateSetting(item.key,isOn)})}elseif(item.typeselect){Row(){Text(this.getOptionLabel(item)).fontColor(#999999)Text(›).margin({left:8})}.onClick(()this.showSelectDialog(item))}elseif(item.typeinfo){Text(item.value).fontColor(#999999)}elseif(item.typebutton){Text(›).fontSize(20).fontColor(#999999)}}.width(100%).height(item.subtitle?64:56).padding({left:16,right:16}).backgroundColor(#FFFFFF).onClick((){if(item.typebuttonitem.keycache){this.clearCache()}elseif(item.typebuttonitem.keyhistory){this.clearHistory()}})}privateasyncloadSettings(){constprefsawaitPreferencesService.getInstance()this.settings.set(theme,awaitprefs.get(theme,false))this.settings.set(fontSize,awaitprefs.get(fontSize,medium))}privateasyncupdateSetting(key:string,value:any){constprefsawaitPreferencesService.getInstance()awaitprefs.put(key,value)this.settings.set(key,value)}privategetOptionLabel(item:SettingItem):string{constvaluethis.settings.get(item.key)||item.valueconstoptionitem.options?.find(oo.valuevalue)returnoption?.label||}privateclearCache(){AlertDialog.show({title:提示,message:确定要清除缓存吗,primaryButton:{value:取消,action:(){}},secondaryButton:{value:确定,action:async(){// 清除缓存逻辑prompt.showToast({message:缓存已清除})}}})}privateclearHistory(){AlertDialog.show({title:提示,message:确定要清除所有历史记录吗,primaryButton:{value:取消,action:(){}},secondaryButton:{value:确定,action:async(){consthistoryServicenewHistoryService()awaithistoryService.clear()prompt.showToast({message:历史已清除})}}})}}三、高级设置功能3.1 设置流程图是否用户修改设置验证设置值是否有效?保存到Preferences显示错误提示通知相关组件应用新设置3.2 主题切换// 主题管理classThemeManager{privatestaticcurrentTheme:ThemelightstaticsetTheme(theme:Theme){this.currentThemetheme// 保存设置PreferencesService.set(theme,theme)// 通知UI更新emitter.emit({eventId:themeChanged},{theme})}staticgetThemeColors():ThemeColors{returnthis.currentThemedark?DARK_THEME:LIGHT_THEME}}constLIGHT_THEME{background:#FFFFFF,text:#333333,primary:#007DFF}constDARK_THEME{background:#1A1A1A,text:#FFFFFF,primary:#4D90FF}3.3 语言切换classI18nManager{privatestaticcurrentLanguage:stringzhstaticsetLanguage(lang:string){this.currentLanguagelang PreferencesService.set(language,lang)emitter.emit({eventId:languageChanged},{lang})}statict(key:string):string{constmessagesI18N_MESSAGES[this.currentLanguage]returnmessages[key]||key}}四、设置项组件Componentstruct SettingItem{Proptitle:stringPropsubtitle?:stringBuilderParamcontent:()voidbuild(){Row(){Column(){Text(this.title).fontSize(16)if(this.subtitle){Text(this.subtitle).fontSize(12).fontColor(#999)}}.alignItems(HorizontalAlign.Start)Blank()this.content()}.padding({left:16,right:16,top:12,bottom:12})}}图 1 设置页面展示五、小结本文详细讲解了设置页面✅ 设置项数据结构✅ 设置分组展示✅ Switch开关✅ Select选择器✅ 缓存清理功能✅ 主题切换✅ 语言切换✅ 设置项组件系列文章导航下期预告鸿蒙多功能工具箱开发实战(二十)-性能优化与打包发布
