设置页面
了解 EasyAppSwiftUI 设置页面模块

设置页面模块
Settings 模块提供了完整的应用设置功能,包括用户资料管理、订阅状态、系统配置、帮助信息等核心功能。
模块结构
Settings/
├── View/
│ └── SettingsView.swift # 主设置页面
└── SubPages/
├── UserProfile/ # 用户资料管理
│ ├── View/UserProfile.swift
│ ├── ViewModel/
│ └── Model/
├── About/ # 关于页面
│ └── View/AboutView.swift
├── Policy/ # 隐私政策
│ └── View/PrivacyPolicyView.swift
└── FQA/ # 常见问题
├── View/FQAView.swift
├── Model/
└── Datas/核心功能
1. 用户信息管理
功能特性:
- 用户头像展示和更新
- 用户名和邮箱信息
- 订阅状态显示
- 个人资料编辑
struct UserInfoView: View {
@EnvironmentObject private var authManager: AuthManager
var viewModel: UserProfileVM
var body: some View {
HStack {
AvatarImage(data: viewModel.avatarData, width: 40)
VStack(alignment: .leading) {
Text(viewModel.email)
.font(.headline)
Text(viewModel.username)
.font(.subheadline)
.foregroundColor(.secondary)
// 订阅状态显示
Text(
String(
format: String(localized: "current_membership_format"),
authManager.storeKitProduct?.displayName ?? String(localized: "free")
)
)
.font(.subheadline)
.foregroundColor(.secondary)
}
}
}
}2. 导航路由系统
使用枚举定义清晰的导航路径:
enum SettingsPath: Hashable, Equatable {
case userInfo // 用户信息
case inAppPurchases // 应用内购买
case policy // 隐私政策
case about // 关于页面
case fqa // 常见问题
}3. 分组设置布局
用户信息区域
Section(header: Text("user_information")) {
EANavigationLink(value: SettingsPath.userInfo) {
UserInfoView(viewModel: viewModel)
.redacted(if: viewModel.state.isLoading)
}
}应用内购买管理
Section(header: Text("in_app_purchases")) {
EANavigationLink(value: SettingsPath.inAppPurchases) {
HStack(spacing: 12) {
Image(systemName: "creditcard.fill")
.resizable()
.frame(width: 30, height: 30)
.foregroundStyle(Color.onboardingBackground)
VStack(alignment: .leading, spacing: 6) {
Text("in_app_purchases")
.font(.headline)
Text("manage_in_app_purchases")
.font(.subheadline)
.foregroundColor(.secondary)
}
}
}
}4. 系统设置集成
语言设置
EANavigationLink(action: {
OpenApp.openUrlOutsideApp(UIApplication.openSettingsURLString)
}) {
HStack {
Label("language", systemImage: "globe.americas.fill")
Spacer()
Image(systemName: "chevron.right")
.foregroundColor(Color(UIColor.tertiaryLabel))
}
}5. 用户资料页面
支持完整的用户资料管理:
struct UserProfileView: View {
@StateObject private var viewModel = UserProfileVM()
@EnvironmentObject private var authManager: AuthManager
var body: some View {
List {
// 头像选择区域
Section {
HStack {
Spacer()
Group {
if viewModel.uploadLoading {
ProgressView()
.frame(width: 100, height: 100)
} else {
AvatarImage(data: viewModel.avatarData, width: 100)
.onTapGesture {
viewModel.showPhotosPicker = true
}
}
}
Spacer()
}
}
// 用户信息编辑区域
// ...
}
.photosPicker(
isPresented: $viewModel.showPhotosPicker,
selection: $viewModel.imageSelection,
matching: .images
)
}
}6. 关于页面
展示应用基本信息和联系方式:
struct AboutView: View {
var body: some View {
ScrollView {
VStack(spacing: 24) {
// 应用图标
if let logo = UIImage(named: "appicon") {
Image(uiImage: logo)
.resizable()
.frame(width: 100, height: 100)
.circle()
.shadowCompat(radius: 2)
}
// 应用信息
VStack(spacing: 8) {
Text(AppData.appName)
.font(.title)
.bold()
Text(
String(
format: "version_build",
AppData.appVersion,
AppData.appBuildNumber
)
)
.font(.subheadline)
.foregroundColor(.secondary)
}
// 联系方式
SocialLinkView(
url: "mailto:\(AppData.supportEmail)",
image: "envelope",
title: "Support Email"
)
SocialLinkView(
url: AppData.websiteURL,
image: "globe",
title: "Website"
)
}
}
}
}7. 账户管理功能
登出功能
Section {
Button(action: {
showSignOutAlert.toggle()
}) {
Text("sign_out")
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity)
}
.tint(.red)
}删除账户功能
Section {
Button(action: {
showDeleteUserAlert.toggle()
}) {
Text("delete_user")
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity)
}
.tint(.red)
}8. 安全确认对话框
.alert("delete_user", isPresented: $showDeleteUserAlert) {
Button("cancel", role: .cancel) {
showDeleteUserAlert.toggle()
}
Button("ok", role: .destructive) {
Task {
await authManager.deleteUser()
}
}
}页面导航系统
使用 SwiftUI 的 NavigationStack 实现页面导航:
.navigationDestination(for: SettingsPath.self) { path in
switch path {
case .userInfo:
UserProfileView()
case .inAppPurchases:
InAppPurchasesView()
case .policy:
PrivacyPolicyView()
case .about:
AboutView()
case .fqa:
FQAView()
}
}特色功能
1. 订阅状态集成
- 支持 RevenueCat 和 StoreKit2 两种订阅管理
- 实时显示用户当前订阅状态
2. 头像管理
- 支持从相册选择头像
- 头像缓存和优化显示
3. 多语言支持
- 完整的国际化支持
- 系统语言设置跳转
- 本地化字符串管理
4. 状态管理
- 使用 MVVM 架构
- 响应式数据绑定
- 错误处理和重试机制
Last updated on