239 lines
11 KiB
Swift
239 lines
11 KiB
Swift
import SwiftUI
|
||
|
||
struct UserInfo: View {
|
||
@Environment(\.dismiss) private var dismiss
|
||
|
||
// Sample user data - replace with your actual data model
|
||
@State private var userName = ""
|
||
@State private var userEmail = "memo@example.com"
|
||
@State private var notificationsEnabled = true
|
||
@State private var darkModeEnabled = false
|
||
@State private var showLogoutAlert = false
|
||
@State private var avatarImage: UIImage?
|
||
@State private var showUsername: Bool = false
|
||
|
||
// 添加一个状态来跟踪键盘是否显示
|
||
@State private var isKeyboardVisible = false
|
||
|
||
var body: some View {
|
||
ZStack {
|
||
// 背景色
|
||
Color.themeTextWhiteSecondary
|
||
.edgesIgnoringSafeArea(.all)
|
||
|
||
VStack(spacing: 0) {
|
||
// 固定的顶部导航栏
|
||
HStack {
|
||
Button(action: {
|
||
dismiss()
|
||
}) {
|
||
Image(systemName: "chevron.left")
|
||
.font(.system(size: 17, weight: .semibold))
|
||
.foregroundColor(.themeTextMessageMain)
|
||
}
|
||
.padding(.leading, 16)
|
||
|
||
Spacer()
|
||
|
||
Text("Complete Your Profile")
|
||
.font(Typography.font(for: .title2, family: .quicksandBold))
|
||
.foregroundColor(.themeTextMessageMain)
|
||
|
||
Spacer()
|
||
|
||
// 添加一个透明的占位视图来平衡布局
|
||
Color.clear
|
||
.frame(width: 24, height: 24)
|
||
.padding(.trailing, 16)
|
||
}
|
||
.padding(.vertical, 12)
|
||
.background(Color.themeTextWhiteSecondary)
|
||
.zIndex(1) // 确保导航栏在最上层
|
||
|
||
// 可滚动的内容区域
|
||
ScrollView {
|
||
VStack(spacing: 0) {
|
||
// 单行文本（键盘显示时）
|
||
if isKeyboardVisible {
|
||
HStack(spacing: 20) {
|
||
Text("Choose a photo as your avatar, and we'll generate a video mystery box for you.")
|
||
.font(Typography.font(for: .caption))
|
||
.foregroundColor(.black)
|
||
.frame(maxWidth: .infinity, alignment: .leading)
|
||
.lineLimit(1)
|
||
.padding(6)
|
||
.background(
|
||
LinearGradient(
|
||
gradient: Gradient(colors: [
|
||
Color(red: 1.0, green: 0.97, blue: 0.87),
|
||
.white,
|
||
Color(red: 1.0, green: 0.97, blue: 0.84)
|
||
]),
|
||
startPoint: .topLeading,
|
||
endPoint: .bottomTrailing
|
||
)
|
||
)
|
||
}
|
||
.padding(10)
|
||
.transition(AnyTransition.opacity.combined(with: .move(edge: .top)))
|
||
.animation(.easeInOut(duration: 0.4), value: isKeyboardVisible)
|
||
}
|
||
// 两行文本（键盘隐藏时）
|
||
else {
|
||
HStack(spacing: 20) {
|
||
Text("Choose a photo as your avatar, and we'll generate a video mystery box for you.")
|
||
.font(Typography.font(for: .caption))
|
||
.foregroundColor(.black)
|
||
.frame(maxWidth: .infinity, alignment: .leading)
|
||
.lineLimit(2)
|
||
.padding(6)
|
||
.background(
|
||
LinearGradient(
|
||
gradient: Gradient(colors: [
|
||
Color(red: 1.0, green: 0.97, blue: 0.87),
|
||
.white,
|
||
Color(red: 1.0, green: 0.97, blue: 0.84)
|
||
]),
|
||
startPoint: .topLeading,
|
||
endPoint: .bottomTrailing
|
||
)
|
||
)
|
||
}
|
||
.padding(10)
|
||
.transition(AnyTransition.opacity.combined(with: .move(edge: .top)))
|
||
.animation(.easeInOut(duration: 0.25), value: isKeyboardVisible)
|
||
}
|
||
|
||
if !isKeyboardVisible { Spacer() }
|
||
|
||
VStack(spacing: 20) {
|
||
// Title
|
||
Text(showUsername ? "Add Your Avatar" : "What‘s Your Name？")
|
||
.font(Typography.font(for: .body, family: .quicksandBold))
|
||
.frame(maxWidth: .infinity, alignment: .center)
|
||
|
||
// Avatar
|
||
ZStack {
|
||
AvatarPicker(
|
||
selectedImage: $avatarImage,
|
||
showUsername: $showUsername,
|
||
isKeyboardVisible: $isKeyboardVisible
|
||
)
|
||
}
|
||
.padding(.top, isKeyboardVisible ? 0 : 20)
|
||
|
||
if !showUsername {
|
||
Button(action: {
|
||
// Action for second button
|
||
}) {
|
||
Text("Take a Photo")
|
||
.font(Typography.font(for: .subtitle, family: .inter))
|
||
.fontWeight(.regular)
|
||
.frame(maxWidth: .infinity)
|
||
.padding()
|
||
.foregroundColor(.black)
|
||
.background(
|
||
RoundedRectangle(cornerRadius: 16)
|
||
.fill(Color.themePrimaryLight)
|
||
)
|
||
}
|
||
}
|
||
|
||
if showUsername {
|
||
TextField("Username", text: $userName)
|
||
.font(Typography.font(for: .subtitle, family: .inter))
|
||
.multilineTextAlignment(.center)
|
||
.frame(maxWidth: .infinity)
|
||
.padding()
|
||
.foregroundColor(.black)
|
||
.background(
|
||
RoundedRectangle(cornerRadius: 16)
|
||
.fill(Color.themePrimaryLight)
|
||
)
|
||
}
|
||
}
|
||
.padding()
|
||
.background(Color(.white))
|
||
.cornerRadius(20)
|
||
.padding(.horizontal)
|
||
|
||
if !isKeyboardVisible { Spacer() }
|
||
|
||
Button(action: {
|
||
showUsername = true
|
||
}) {
|
||
Text("Continue")
|
||
.font(Typography.font(for: .body))
|
||
.fontWeight(.bold)
|
||
.frame(maxWidth: .infinity)
|
||
.padding(16)
|
||
.foregroundColor(.black)
|
||
.background(
|
||
RoundedRectangle(cornerRadius: 25)
|
||
.fill(Color.themePrimary)
|
||
)
|
||
}
|
||
.padding()
|
||
.padding(.bottom, isKeyboardVisible ? 20 : 40)
|
||
}
|
||
}
|
||
.background(Color.themeTextWhiteSecondary)
|
||
}
|
||
.navigationBarHidden(true)
|
||
.navigationBarBackButtonHidden(true)
|
||
|
||
// 键盘出现时的半透明覆盖层
|
||
if isKeyboardVisible {
|
||
Color.black.opacity(0.001)
|
||
.edgesIgnoringSafeArea(.all)
|
||
.onTapGesture {
|
||
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
|
||
}
|
||
}
|
||
}
|
||
.onAppear {
|
||
NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { _ in
|
||
isKeyboardVisible = true
|
||
}
|
||
|
||
NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { _ in
|
||
isKeyboardVisible = false
|
||
}
|
||
}
|
||
.onDisappear {
|
||
NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
|
||
NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillHideNotification, object: nil)
|
||
}
|
||
}
|
||
}
|
||
|
||
// MARK: - Settings Row View
|
||
struct SettingsRow: View {
|
||
let icon: String
|
||
let title: String
|
||
let color: Color
|
||
|
||
var body: some View {
|
||
HStack {
|
||
Image(systemName: icon)
|
||
.resizable()
|
||
.aspectRatio(contentMode: .fit)
|
||
.frame(width: 20, height: 20)
|
||
.padding(6)
|
||
.background(color.opacity(0.1))
|
||
.foregroundColor(color)
|
||
.cornerRadius(6)
|
||
|
||
Text(title)
|
||
.padding(.leading, 5)
|
||
}
|
||
.padding(.vertical, 4)
|
||
}
|
||
}
|
||
|
||
// MARK: - Preview
|
||
struct UserInfo_Previews: PreviewProvider {
|
||
static var previews: some View {
|
||
UserInfo()
|
||
}
|
||
} |