MAUI怎么实现一个设置页面 MAUI Settings Page实战

10次阅读

MAUI 设置页推荐用 NavigationPage+ContentPage 实现导航,CollectionView 展示设置项,Preferences/SecureStorage 持久化数据,PushAsync 或 Shell 跳转子页,并通过 MessagingCenter 同步状态。

MAUI 怎么实现一个设置页面 MAUI Settings Page 实战

MAUI 实现设置页面不难,关键是用对组件、理清导航逻辑、保证数据持久化。下面直接上实用方案,不绕弯。

用 NavigationPage + ContentPage 搭建设置主界面

MAUI 默认不强制用 NavigationPage,但设置页通常需要返回上级,推荐显式启用:

  • 在 App.xaml.cs 的 MainPage 初始化时,用 new NavigationPage(new SettingsPage())
  • SettingsPage 继承 ContentPage,顶部自动带返回按钮(Android/iOS 都兼容)
  • 避免用 Shell 当主容器再嵌套 SettingsPage——容易导致 路由 混乱和状态丢失

用 CollectionView 做可点击的设置项列表

比 ListView 更现代、更轻量,支持模板、分组、下拉刷新(虽然设置页一般不用刷新):

  • 绑定一个 IEnumerable 数据源,比如:主题切换、通知开关、语言选择
  • 每个 SettingItem 包含 Title、Icon、IsToggled(布尔)、Command(跳转或触发动作)
  • 模板中用 Switch 或 CheckBox 控件绑定 IsToggled,用 TapGestureRecognizer 响应点击
  • 示例:点击“深色模式”项 → 触发命令 → 切换 App.Current.RequestedTheme 并保存到 Preferences

用 Preferences 和 SecureStorage 存储设置项

MAUI 内置 Microsoft.Maui.Storage,够用且跨平台:

  • Preferences.Set(“theme_mode”, “dark”) —— 存普通设置(字符串 / 布尔 / 数字)
  • SecureStorage.Default.SetAsync(“api_token”, token) —— 存敏感信息(如登录令牌)
  • 首次进入 SettingsPage 时,用 Preferences.Get(“theme_mode”, “light”) 初始化 UI 状态
  • 注意:SecureStorage 在 iOS 模拟器 可能报错,真机或 Android 模拟器测试更稳

跳转子设置页(比如“关于”“帮助”)用 Shell 或 PushAsync

简单场景用 PushAsync 更直接:

  • 点击“关于”→ await Navigation.PushAsync(new AboutPage())
  • AboutPage 同样继承 ContentPage,自带返回按钮
  • 如果整个 App 已用 Shell,可在 AppShell.xaml 中注册路由:Routing.RegisterRoute(“about”, typeof(AboutPage)),然后用 Shell.Current.GoToAsync(“about”)
  • 避免在 SettingsPage 里写太多业务逻辑——把每个子页拆成独立 Page,职责清晰

基本上就这些。不复杂但容易忽略的是状态同步:比如用户在设置页关了通知,回到主页后要立刻响应变化。可以用 MessagingCenter 或 CommunityToolkit.Mvvm 的 ObservableObject + OnPropertyChanged 主动通知,而不是等重启才生效。

text=ZqhQzanResources