124 lines
3.3 KiB
Swift
124 lines
3.3 KiB
Swift
//
|
||
// ReturnButton.swift
|
||
// wake
|
||
//
|
||
// Created by Junhui on 2025/8/19.
|
||
//
|
||
|
||
import SwiftUI
|
||
|
||
/// 返回按钮组件，用于左上角导航返回
|
||
struct ReturnButton: View {
|
||
let action: () -> Void
|
||
var iconName: String = "chevron.left"
|
||
var iconSize: TypographyStyle = .title
|
||
var iconColor: Color = .primary
|
||
|
||
var body: some View {
|
||
Button(action: action) {
|
||
Image(systemName: iconName)
|
||
.font(Typography.font(for: iconSize))
|
||
.fontWeight(.medium)
|
||
.foregroundColor(iconColor)
|
||
.padding(10) // 增加内边距来扩大点击区域
|
||
.contentShape(Rectangle()) // 使整个区域可点击
|
||
}
|
||
.buttonStyle(PlainButtonStyle())
|
||
}
|
||
}
|
||
|
||
/// 带文字的返回按钮组件
|
||
struct ReturnButtonWithText: View {
|
||
let action: () -> Void
|
||
let text: String
|
||
var iconName: String = "chevron.left"
|
||
var spacing: CGFloat = 4
|
||
var textStyle: TypographyStyle = .body
|
||
var iconColor: Color = .primary
|
||
var textColor: Color = .primary
|
||
|
||
var body: some View {
|
||
Button(action: action) {
|
||
HStack(spacing: spacing) {
|
||
Image(systemName: iconName)
|
||
.font(Typography.font(for: textStyle, family: .quicksandRegular))
|
||
.fontWeight(.medium)
|
||
.foregroundColor(iconColor)
|
||
|
||
Text(text)
|
||
.font(Typography.font(for: textStyle, family: .quicksandRegular))
|
||
.foregroundColor(textColor)
|
||
}
|
||
}
|
||
.buttonStyle(PlainButtonStyle())
|
||
}
|
||
}
|
||
|
||
/// 圆形背景的返回按钮组件
|
||
struct CircularReturnButton: View {
|
||
let action: () -> Void
|
||
var iconName: String = "chevron.left"
|
||
var size: CGFloat = 40
|
||
var backgroundColor: Color = Color(.systemBackground)
|
||
var iconColor: Color = .primary
|
||
var shadowRadius: CGFloat = 4
|
||
|
||
var body: some View {
|
||
Button(action: action) {
|
||
Image(systemName: iconName)
|
||
.font(Typography.font(for: .body, family: .quicksandRegular))
|
||
.foregroundColor(iconColor)
|
||
.frame(width: size, height: size)
|
||
.background(backgroundColor)
|
||
.clipShape(Circle())
|
||
.shadow(color: Color.black.opacity(0.1), radius: shadowRadius, x: 0, y: 2)
|
||
}
|
||
.buttonStyle(PlainButtonStyle())
|
||
}
|
||
}
|
||
|
||
#Preview("基础返回按钮") {
|
||
VStack(spacing: 20) {
|
||
HStack {
|
||
ReturnButton {
|
||
print("返回")
|
||
}
|
||
Spacer()
|
||
}
|
||
.padding()
|
||
|
||
Spacer()
|
||
}
|
||
.background(Color(.systemGroupedBackground))
|
||
}
|
||
|
||
#Preview("带文字返回按钮") {
|
||
VStack(spacing: 20) {
|
||
HStack {
|
||
ReturnButtonWithText(action: {
|
||
print("返回")
|
||
}, text: "Back")
|
||
Spacer()
|
||
}
|
||
.padding()
|
||
|
||
Spacer()
|
||
}
|
||
.background(Color(.systemGroupedBackground))
|
||
}
|
||
|
||
#Preview("圆形返回按钮") {
|
||
VStack(spacing: 20) {
|
||
HStack {
|
||
CircularReturnButton {
|
||
print("返回")
|
||
}
|
||
Spacer()
|
||
}
|
||
.padding()
|
||
|
||
Spacer()
|
||
}
|
||
.background(Color(.systemGroupedBackground))
|
||
}
|