164 lines
4.3 KiB
Swift
164 lines
4.3 KiB
Swift
//
|
||
// NaviHeader.swift
|
||
// wake
|
||
//
|
||
// Created by Junhui on 2025/8/19.
|
||
//
|
||
|
||
import SwiftUI
|
||
|
||
/// 导航头组件，包含返回按钮和标题
|
||
struct NaviHeader: View {
|
||
let title: String
|
||
let onBackTap: () -> Void
|
||
var showBackButton: Bool = true
|
||
var titleStyle: TypographyStyle = .title
|
||
var backgroundColor: Color = Color.clear
|
||
var rightContent: AnyView? = nil
|
||
|
||
var body: some View {
|
||
ZStack {
|
||
// 标题居中显示
|
||
Text(title)
|
||
.font(Typography.font(for: titleStyle, family: .quicksandBold))
|
||
.fontWeight(.bold)
|
||
.foregroundColor(.primary)
|
||
|
||
// 左右按钮层
|
||
HStack {
|
||
// 左侧返回按钮
|
||
if showBackButton {
|
||
ReturnButton(action: onBackTap)
|
||
} else {
|
||
Color.clear
|
||
.frame(width: 30)
|
||
}
|
||
|
||
Spacer()
|
||
|
||
// 右侧内容
|
||
if let rightContent = rightContent {
|
||
rightContent
|
||
} else {
|
||
Color.clear
|
||
.frame(width: 30)
|
||
}
|
||
}
|
||
}
|
||
.padding(.horizontal, 20)
|
||
.padding(.top, 10)
|
||
.padding(.bottom, 20)
|
||
.background(backgroundColor)
|
||
}
|
||
}
|
||
|
||
/// 带右侧按钮的导航头组件
|
||
struct NaviHeaderWithAction: View {
|
||
let title: String
|
||
let onBackTap: () -> Void
|
||
let rightButtonTitle: String
|
||
let onRightButtonTap: () -> Void
|
||
var showBackButton: Bool = true
|
||
var titleStyle: TypographyStyle = .title
|
||
var rightButtonStyle: TypographyStyle = .body
|
||
var backgroundColor: Color = Color.clear
|
||
|
||
var body: some View {
|
||
ZStack {
|
||
// 标题居中显示
|
||
Text(title)
|
||
.font(Typography.font(for: titleStyle, family: .quicksandBold))
|
||
.fontWeight(.bold)
|
||
.foregroundColor(.primary)
|
||
|
||
// 左右按钮层
|
||
HStack {
|
||
// 左侧返回按钮
|
||
if showBackButton {
|
||
ReturnButton(action: onBackTap)
|
||
} else {
|
||
Color.clear
|
||
.frame(width: 30)
|
||
}
|
||
|
||
Spacer()
|
||
|
||
// 右侧按钮
|
||
Button(action: onRightButtonTap) {
|
||
Text(rightButtonTitle)
|
||
.font(Typography.font(for: rightButtonStyle, family: .quicksandBold))
|
||
.fontWeight(.semibold)
|
||
.foregroundColor(.blue)
|
||
}
|
||
}
|
||
}
|
||
.padding(.horizontal, 20)
|
||
.padding(.top, 10)
|
||
.padding(.bottom, 20)
|
||
.background(backgroundColor)
|
||
}
|
||
}
|
||
|
||
/// 简洁版导航头组件
|
||
struct SimpleNaviHeader: View {
|
||
let title: String
|
||
let onBackTap: () -> Void
|
||
|
||
var body: some View {
|
||
ZStack {
|
||
// 标题居中显示
|
||
Text(title)
|
||
.font(Typography.font(for: .title, family: .quicksandBold))
|
||
.fontWeight(.bold)
|
||
.multilineTextAlignment(.center)
|
||
|
||
// 返回按钮左对齐
|
||
HStack {
|
||
ReturnButton(action: onBackTap)
|
||
Spacer()
|
||
}
|
||
}
|
||
.padding(.horizontal, 20)
|
||
.padding(.vertical, 16)
|
||
}
|
||
}
|
||
|
||
#Preview("基础导航头") {
|
||
VStack(spacing: 0) {
|
||
NaviHeader(title: "Settings") {
|
||
print("返回")
|
||
}
|
||
.background(Color(.systemBackground))
|
||
|
||
Spacer()
|
||
}
|
||
.background(Color(.systemGroupedBackground))
|
||
}
|
||
|
||
#Preview("带右侧按钮导航头") {
|
||
VStack(spacing: 0) {
|
||
NaviHeaderWithAction(
|
||
title: "Profile",
|
||
onBackTap: { print("返回") },
|
||
rightButtonTitle: "Save",
|
||
onRightButtonTap: { print("保存") }
|
||
)
|
||
.background(Color(.systemBackground))
|
||
|
||
Spacer()
|
||
}
|
||
.background(Color(.systemGroupedBackground))
|
||
}
|
||
|
||
#Preview("简洁导航头") {
|
||
VStack(spacing: 0) {
|
||
SimpleNaviHeader(title: "About") {
|
||
print("返回")
|
||
}
|
||
.background(Color(.systemBackground))
|
||
|
||
Spacer()
|
||
}
|
||
.background(Color(.systemGroupedBackground))
|
||
}
|