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

来源：这里教程网时间：2026-02-21 17:34:46 作者：

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 主动通知，而不是等重启才生效。