feat: 更新FeedView、HomeView和MeView以增强用户界面和交互体验
- 在FeedView中添加加号按钮，允许用户进行操作。 - 更新HomeView以支持全屏显示和更好的布局。 - 在MeView中优化用户信息展示，增加用户ID显示。 - 调整底部导航栏样式，提升视觉效果和用户体验。 - 确保视图在安全区域内适配，增强整体布局的适应性。
This commit is contained in:
edwinQQQ
@@ -17,18 +17,18 @@ enum Tab: Int, CaseIterable {
|
||||
var iconName: String {
|
||||
switch self {
|
||||
case .feed:
|
||||
return "sparkles"
|
||||
return "feed unselected"
|
||||
case .me:
|
||||
return "person"
|
||||
return "me unselected"
|
||||
}
|
||||
}
|
||||
|
||||
var selectedIconName: String {
|
||||
switch self {
|
||||
case .feed:
|
||||
return "sparkles"
|
||||
return "feed selected"
|
||||
case .me:
|
||||
return "person.fill"
|
||||
return "me selected"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -43,31 +43,36 @@ struct BottomTabView: View {
|
||||
Button(action: {
|
||||
selectedTab = tab
|
||||
}) {
|
||||
VStack(spacing: 4) {
|
||||
Image(systemName: selectedTab == tab ? tab.selectedIconName : tab.iconName)
|
||||
.font(.system(size: 20))
|
||||
.foregroundColor(selectedTab == tab ? .purple : .gray)
|
||||
|
||||
Text(tab.title)
|
||||
.font(.caption2)
|
||||
.foregroundColor(selectedTab == tab ? .purple : .gray)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
Image(selectedTab == tab ? tab.selectedIconName : tab.iconName)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 30, height: 30)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(PlainButtonStyle())
|
||||
}
|
||||
}
|
||||
.padding(.vertical, 12)
|
||||
.padding(.horizontal, 8)
|
||||
.frame(height: 60)
|
||||
.padding(.horizontal, 16)
|
||||
.background(
|
||||
.ultraThinMaterial,
|
||||
in: Rectangle()
|
||||
)
|
||||
.overlay(
|
||||
Rectangle()
|
||||
.frame(height: 0.5)
|
||||
.foregroundColor(.black.opacity(0.2)),
|
||||
alignment: .top
|
||||
RoundedRectangle(cornerRadius: 30)
|
||||
.fill(.ultraThinMaterial)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 30)
|
||||
.stroke(Color.white.opacity(0.1), lineWidth: 0.5)
|
||||
)
|
||||
.shadow(
|
||||
color: Color.black.opacity(0.34),
|
||||
radius: 10.7,
|
||||
x: 0,
|
||||
y: 1.9
|
||||
)
|
||||
)
|
||||
.padding(.horizontal, 15)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
BottomTabView(selectedTab: .constant(.feed))
|
||||
.background(Color.purple) // 预览时添加背景色以便查看效果
|
||||
}
|
||||
|
||||
@@ -2,43 +2,57 @@ import SwiftUI
|
||||
|
||||
struct FeedView: View {
|
||||
var body: some View {
|
||||
ScrollView {
|
||||
VStack(spacing: 20) {
|
||||
// 顶部标题
|
||||
HStack {
|
||||
Spacer()
|
||||
Text("Enjoy your Life Time")
|
||||
.font(.system(size: 22, weight: .semibold))
|
||||
.foregroundColor(.white)
|
||||
Spacer()
|
||||
}
|
||||
.padding(.top, 20)
|
||||
|
||||
// 心脏图标
|
||||
Image(systemName: "heart.fill")
|
||||
.font(.system(size: 60))
|
||||
.foregroundColor(.red)
|
||||
.padding(.top, 40)
|
||||
|
||||
// 励志文字
|
||||
Text("The disease is like a cruel ruler,\nand time is our most precious treasure.\nEvery moment we live is a victory\nagainst the inevitable.")
|
||||
.font(.system(size: 16))
|
||||
.multilineTextAlignment(.center)
|
||||
.foregroundColor(.white.opacity(0.9))
|
||||
.padding(.horizontal, 30)
|
||||
.padding(.top, 20)
|
||||
|
||||
// 模拟动态卡片
|
||||
LazyVStack(spacing: 16) {
|
||||
ForEach(0..<3) { index in
|
||||
DynamicCardView(index: index)
|
||||
GeometryReader { geometry in
|
||||
ScrollView {
|
||||
VStack(spacing: 20) {
|
||||
// 顶部区域 - 标题和加号按钮
|
||||
HStack {
|
||||
Spacer()
|
||||
|
||||
// 标题
|
||||
Text("Enjoy your Life Time")
|
||||
.font(.system(size: 22, weight: .semibold))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Spacer()
|
||||
|
||||
// 右侧加号按钮
|
||||
Button(action: {
|
||||
// 加号按钮操作
|
||||
}) {
|
||||
Image("add icon")
|
||||
.frame(width: 36, height: 36)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
// .padding(.top, geometry.safeAreaInsets.top + 20)
|
||||
|
||||
// 心脏图标
|
||||
Image(systemName: "heart.fill")
|
||||
.font(.system(size: 60))
|
||||
.foregroundColor(.red)
|
||||
.padding(.top, 40)
|
||||
|
||||
// 励志文字
|
||||
Text("The disease is like a cruel ruler,\nand time is our most precious treasure.\nEvery moment we live is a victory\nagainst the inevitable.")
|
||||
.font(.system(size: 16))
|
||||
.multilineTextAlignment(.center)
|
||||
.foregroundColor(.white.opacity(0.9))
|
||||
.padding(.horizontal, 30)
|
||||
.padding(.top, 20)
|
||||
|
||||
// 模拟动态卡片
|
||||
LazyVStack(spacing: 16) {
|
||||
ForEach(0..<3) { index in
|
||||
DynamicCardView(index: index)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.top, 30)
|
||||
|
||||
// 底部安全区域 - 为底部导航栏和安全区域留出空间
|
||||
Color.clear.frame(height: geometry.safeAreaInsets.bottom + 100)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.top, 30)
|
||||
|
||||
// 底部安全区域
|
||||
Color.clear.frame(height: 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -50,43 +64,37 @@ struct DynamicCardView: View {
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
// 用户信息行
|
||||
HStack(spacing: 12) {
|
||||
// 头像
|
||||
// 用户信息
|
||||
HStack {
|
||||
Circle()
|
||||
.fill(Color.blue.opacity(0.6))
|
||||
.fill(Color.gray.opacity(0.3))
|
||||
.frame(width: 40, height: 40)
|
||||
.overlay(
|
||||
Text("👤")
|
||||
.font(.system(size: 20))
|
||||
Text("U\(index + 1)")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
)
|
||||
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
HStack {
|
||||
Text("NAMENAMENAME....")
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Spacer()
|
||||
|
||||
Text("ID:7271557")
|
||||
.font(.caption)
|
||||
.foregroundColor(.white.opacity(0.7))
|
||||
}
|
||||
Text("用户\(index + 1)")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Text("09/12")
|
||||
.font(.caption)
|
||||
.foregroundColor(.white.opacity(0.7))
|
||||
Text("2小时前")
|
||||
.font(.system(size: 12))
|
||||
.foregroundColor(.white.opacity(0.6))
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
|
||||
// 内容文字
|
||||
Text("这是动态内容 \(index + 1)。今天是美好的一天，分享一些生活中的点点滴滴。")
|
||||
.font(.system(size: 15))
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(nil)
|
||||
// 动态内容
|
||||
Text("今天是美好的一天，分享一些生活中的小确幸。希望大家都能珍惜每一个当下的时刻。")
|
||||
.font(.system(size: 14))
|
||||
.foregroundColor(.white.opacity(0.9))
|
||||
.multilineTextAlignment(.leading)
|
||||
|
||||
// 图片网格（模拟）
|
||||
// 图片网格
|
||||
LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 8), count: 3), spacing: 8) {
|
||||
ForEach(0..<3) { imageIndex in
|
||||
Rectangle()
|
||||
@@ -131,4 +139,8 @@ struct DynamicCardView: View {
|
||||
.cornerRadius(12)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
FeedView()
|
||||
}
|
||||
|
||||
@@ -10,53 +10,33 @@ struct HomeView: View {
|
||||
WithPerceptionTracking {
|
||||
GeometryReader { geometry in
|
||||
ZStack {
|
||||
// 使用 "bg" 图片作为背景
|
||||
// 使用 "bg" 图片作为背景 - 全屏显示
|
||||
Image("bg")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fill)
|
||||
.frame(width: geometry.size.width, height: geometry.size.height)
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.clipped()
|
||||
.ignoresSafeArea(.all)
|
||||
|
||||
VStack(spacing: 0) {
|
||||
// 顶部导航区域
|
||||
HStack {
|
||||
Spacer()
|
||||
|
||||
// 右上角加号按钮
|
||||
Button(action: {
|
||||
// 加号按钮操作
|
||||
}) {
|
||||
Image(systemName: "plus")
|
||||
.font(.system(size: 20, weight: .medium))
|
||||
.foregroundColor(.red)
|
||||
.frame(width: 36, height: 36)
|
||||
.background(
|
||||
Color.white.opacity(0.2)
|
||||
.cornerRadius(18)
|
||||
)
|
||||
}
|
||||
// 主要内容区域 - 全屏显示
|
||||
ZStack {
|
||||
switch selectedTab {
|
||||
case .feed:
|
||||
FeedView()
|
||||
.transition(.opacity)
|
||||
case .me:
|
||||
MeView()
|
||||
.transition(.opacity)
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.top, 10)
|
||||
|
||||
// 主要内容区域
|
||||
ZStack {
|
||||
// 根据选中的 tab 显示不同的视图
|
||||
switch selectedTab {
|
||||
case .feed:
|
||||
FeedView()
|
||||
.transition(.opacity)
|
||||
case .me:
|
||||
MeView()
|
||||
.transition(.opacity)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
|
||||
// 底部导航栏
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
|
||||
// 底部导航栏 - 悬浮在最上层
|
||||
VStack {
|
||||
Spacer()
|
||||
BottomTabView(selectedTab: $selectedTab)
|
||||
}
|
||||
.padding(.bottom, geometry.safeAreaInsets.bottom + 100)
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
|
||||
@@ -2,73 +2,76 @@ import SwiftUI
|
||||
|
||||
struct MeView: View {
|
||||
var body: some View {
|
||||
ScrollView {
|
||||
VStack(spacing: 20) {
|
||||
// 顶部标题
|
||||
HStack {
|
||||
Spacer()
|
||||
Text("我的")
|
||||
.font(.system(size: 22, weight: .semibold))
|
||||
.foregroundColor(.white)
|
||||
Spacer()
|
||||
}
|
||||
.padding(.top, 20)
|
||||
|
||||
// 用户头像区域
|
||||
VStack(spacing: 16) {
|
||||
Circle()
|
||||
.fill(Color.white.opacity(0.2))
|
||||
.frame(width: 80, height: 80)
|
||||
.overlay(
|
||||
Image(systemName: "person.fill")
|
||||
.font(.system(size: 40))
|
||||
.foregroundColor(.white)
|
||||
)
|
||||
|
||||
Text("用户昵称")
|
||||
.font(.system(size: 18, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Text("ID: 123456789")
|
||||
.font(.system(size: 14))
|
||||
.foregroundColor(.white.opacity(0.7))
|
||||
}
|
||||
.padding(.top, 30)
|
||||
|
||||
// 功能菜单
|
||||
VStack(spacing: 12) {
|
||||
MenuItemView(icon: "gearshape", title: "设置", action: {})
|
||||
MenuItemView(icon: "person.circle", title: "个人信息", action: {})
|
||||
MenuItemView(icon: "heart", title: "我的收藏", action: {})
|
||||
MenuItemView(icon: "clock", title: "浏览历史", action: {})
|
||||
MenuItemView(icon: "questionmark.circle", title: "帮助与反馈", action: {})
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.top, 40)
|
||||
|
||||
// 退出登录按钮
|
||||
Button(action: {}) {
|
||||
GeometryReader { geometry in
|
||||
ScrollView {
|
||||
VStack(spacing: 20) {
|
||||
// 顶部标题
|
||||
HStack {
|
||||
Image(systemName: "rectangle.portrait.and.arrow.right")
|
||||
.font(.system(size: 16))
|
||||
Text("退出登录")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
Spacer()
|
||||
Text("我的")
|
||||
.font(.system(size: 22, weight: .semibold))
|
||||
.foregroundColor(.white)
|
||||
Spacer()
|
||||
}
|
||||
.foregroundColor(.red)
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: 50)
|
||||
.background(
|
||||
Color.white.opacity(0.1)
|
||||
.cornerRadius(12)
|
||||
)
|
||||
.padding(.top, geometry.safeAreaInsets.top + 20)
|
||||
|
||||
// 用户头像区域
|
||||
VStack(spacing: 16) {
|
||||
Circle()
|
||||
.fill(Color.white.opacity(0.2))
|
||||
.frame(width: 80, height: 80)
|
||||
.overlay(
|
||||
Image(systemName: "person.fill")
|
||||
.font(.system(size: 40))
|
||||
.foregroundColor(.white)
|
||||
)
|
||||
|
||||
Text("用户昵称")
|
||||
.font(.system(size: 18, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Text("ID: 123456789")
|
||||
.font(.system(size: 14))
|
||||
.foregroundColor(.white.opacity(0.7))
|
||||
}
|
||||
.padding(.top, 30)
|
||||
|
||||
// 功能菜单
|
||||
VStack(spacing: 12) {
|
||||
MenuItemView(icon: "gearshape", title: "设置", action: {})
|
||||
MenuItemView(icon: "person.circle", title: "个人信息", action: {})
|
||||
MenuItemView(icon: "heart", title: "我的收藏", action: {})
|
||||
MenuItemView(icon: "clock", title: "浏览历史", action: {})
|
||||
MenuItemView(icon: "questionmark.circle", title: "帮助与反馈", action: {})
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.top, 40)
|
||||
|
||||
// 退出登录按钮
|
||||
Button(action: {}) {
|
||||
HStack {
|
||||
Image(systemName: "rectangle.portrait.and.arrow.right")
|
||||
.font(.system(size: 16))
|
||||
Text("退出登录")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
}
|
||||
.foregroundColor(.red)
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: 50)
|
||||
.background(
|
||||
Color.white.opacity(0.1)
|
||||
.cornerRadius(12)
|
||||
)
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.top, 30)
|
||||
|
||||
// 底部安全区域 - 为底部导航栏和安全区域留出空间
|
||||
Color.clear.frame(height: geometry.safeAreaInsets.bottom + 100)
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.top, 30)
|
||||
|
||||
// 底部安全区域
|
||||
Color.clear.frame(height: 100)
|
||||
}
|
||||
}
|
||||
.ignoresSafeArea(.container, edges: .top)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,4 +107,8 @@ struct MenuItemView: View {
|
||||
}
|
||||
.buttonStyle(PlainButtonStyle())
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
MeView()
|
||||
}
|
||||
Reference in New Issue
Block a user