1
2
3
4
5

// 第 1 处
Text("余额").padding(12).background(.white, in: RoundedRectangle(cornerRadius: 10)).shadow(radius: 2)
// 第 2 处
Text("本月支出").padding(12).background(.white, in: RoundedRectangle(cornerRadius: 10)).shadow(radius: 2)
// 第 3 处……第 30 处

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import SwiftUI

struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(12)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.white, in: RoundedRectangle(cornerRadius: 10))
            .shadow(color: .black.opacity(0.08), radius: 2, y: 1)
    }
}

1

Text("余额").modifier(CardStyle())

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

struct A: ViewModifier {
    func body(content: Content) -> some View {
        content.padding()          // 内边距加在内容外面 ✅
    }
}
struct B: ViewModifier {
    func body(content: Content) -> some View {
        Color.red.overlay(content) // content 变成了"叠上去的那层"
    }
}

1
2
3
4
5

extension View {
    func cardStyle() -> some View {
        modifier(CardStyle())
    }
}

1
2

Text("余额").cardStyle()
Text("本月支出").cardStyle()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

struct BadgeStyle: ViewModifier {
    let color: Color
    var compact: Bool = false

    func body(content: Content) -> some View {
        content
            .font(compact ? .caption2 : .caption)
            .padding(.horizontal, compact ? 4 : 8)
            .padding(.vertical, 2)
            .background(color.opacity(0.15), in: Capsule())
            .foregroundStyle(color)
    }
}

extension View {
    func badge(_ color: Color = .blue, compact: Bool = false) -> some View {
        modifier(BadgeStyle(color: color, compact: compact))
    }
}

1
2

Text("新增").badge(.green)
Text("3").badge(.red, compact: true)

1

@ViewBuilder var content: Content      // 声明长这样，Content 是泛型参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

struct Row<Content: View>: View {              // ← 泛型参数
    var title: String
    @ViewBuilder var accessory: Content        // ← 存储属性用泛型参数

    var body: some View {
        HStack {
            Text(title)
            Spacer()
            accessory
        }
    }
}

1
2
3
4
5
6
7
8

VStack {
    Row(title: "静音") { Image(systemName: "speaker.slash") }
    Row(title: "纯文本") { }                    // 什么都不传也合法
    Row(title: "两个图标") {
        Image(systemName: "star")
        Image(systemName: "heart")
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 🛑 10 个 if/else 分支 —— 类型检查器要展开 9 层 ConditionalContent
@ViewBuilder var icon: some View {
    if kind == .a { Image(systemName: "a") }
    else if kind == .b { Image(systemName: "b") }
    // …… 再来 8 个
}

// ✅ 先算出名字，再走一个分支
var icon: some View {
    let name: String = switch kind {
        case .a: "a"
        case .b: "b"
        default: "questionmark"
    }
    Image(systemName: name)
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

struct StatusView: View {
    var isOn: Bool

    @ViewBuilder
    private var indicator: some View {          // 注意：计算属性上也能标
        if isOn {
            Label("运行中", systemImage: "checkmark.circle.fill").foregroundStyle(.green)
        } else {
            Label("已停止", systemImage: "pause.circle").foregroundStyle(.secondary)
        }
    }

    var body: some View {
        HStack { indicator; Spacer() }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

struct SectionCard<Content: View>: View {
    var title: String
    @ViewBuilder var content: Content

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .font(.headline)
            content                       // 调用方给的内容原样放进来
        }
        .padding(16)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(.background, in: RoundedRectangle(cornerRadius: 12))
        .overlay(RoundedRectangle(cornerRadius: 12).stroke(.separator, lineWidth: 1))
    }
}

1
2
3
4
5
6

SectionCard(title: "本月概览") {
    Text("支出 ¥3,240")
    Text("收入 ¥12,000")
    Divider()
    Text("结余 ¥8,760").bold()
}

1
2
3
4
5

struct SectionCard<Content: View>: View {     // ← 泛型参数
    var title: String
    @ViewBuilder var content: Content          // ← 用 @ViewBuilder 收多行
    var body: some View { /* ... */ }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// ✅ 计算属性 + some View：合法（有 body 表达式可供推断）
var badge: some View { Text("新") }

// ✅ 存储属性 + 泛型参数：合法（Content 是类型参数，由调用方确定）
struct Box<Content: View>: View {
    @ViewBuilder var content: Content
    var body: some View { content }
}

// 🛑 存储属性 + some View：不合法
struct Bad: View {
    @ViewBuilder var content: some View
    var body: some View { content }
}

1
2

error: property declares an opaque return type, but has no initializer expression
       from which to infer an underlying type [#OpaqueTypeInference]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

struct PressableButtonStyle: ButtonStyle {
    var tint: Color = .accentColor

    func makeBody(configuration: Configuration) -> some View {
        configuration.label                    // ← 按钮的内容（你写的那个 Label）
            .font(.headline)
            .foregroundStyle(.white)
            .padding(.horizontal, 20)
            .padding(.vertical, 12)
            .background(tint, in: RoundedRectangle(cornerRadius: 10))
            .scaleEffect(configuration.isPressed ? 0.96 : 1)      // ← 按下状态
            .opacity(configuration.isPressed ? 0.9 : 1)
            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
    }
}

1
2

Button("确认支付") { pay() }
    .buttonStyle(PressableButtonStyle(tint: .green))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

struct LongPressButtonStyle: PrimitiveButtonStyle {
    var minimumDuration: Double = 0.6

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 20).padding(.vertical, 12)
            .background(.red.opacity(0.15), in: RoundedRectangle(cornerRadius: 10))
            .onLongPressGesture(minimumDuration: minimumDuration) {
                configuration.trigger()          // ← 由你决定何时真正触发
            }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import SwiftUI

struct WidthKey: PreferenceKey {
    static var defaultValue: CGFloat { 0 }          // ⚠️ 用计算属性，别用存储属性（见下）
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())             // 多个子视图上报时怎么合并
    }
}

struct MeasuredWidth: View {
    @State private var width: CGFloat = 0

    var body: some View {
        Text("量我的宽度")
            .background(
                GeometryReader { geo in
                    Color.clear.preference(key: WidthKey.self, value: geo.size.width)
                }
            )
            .onPreferenceChange(WidthKey.self) { width = $0 }
            .overlay(alignment: .bottom) {
                Text("宽 \(width, specifier: "%.0f")pt")
                    .font(.caption2).foregroundStyle(.secondary)
            }
    }
}

1
2
3
4
5

struct WidthKey: PreferenceKey {
    static var defaultValue: CGFloat = 0            // 🛑
    // error: static property 'defaultValue' is not concurrency-safe because it is
    //        nonisolated global shared mutable state [#MutableGlobalVariable]
}

1

static var defaultValue: CGFloat { 0 }              // ✅ 零警告（放进 WidthKey 里）

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

import SwiftUI

// ① ViewModifier：一串修饰符起个名字
struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(16)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.background, in: RoundedRectangle(cornerRadius: 12))
            .overlay(RoundedRectangle(cornerRadius: 12).stroke(.separator, lineWidth: 1))
    }
}

extension View {
    func cardStyle() -> some View { modifier(CardStyle()) }
}

// ② 泛型容器：接收多行内容，按固定结构排列
struct SectionCard<Content: View>: View {
    var title: String
    @ViewBuilder var content: Content

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(title).font(.headline)
            content
        }
        .cardStyle()
    }
}

// ③ ButtonStyle：换外观，保行为
struct PressableButtonStyle: ButtonStyle {
    var tint: Color = .accentColor

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.headline)
            .foregroundStyle(.white)
            .frame(maxWidth: .infinity)
            .padding(.vertical, 12)
            .background(tint, in: RoundedRectangle(cornerRadius: 10))
            .scaleEffect(configuration.isPressed ? 0.97 : 1)
            .opacity(configuration.isPressed ? 0.9 : 1)
            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
    }
}

// ④ LabelStyle：图标和标题的排法
struct CompactLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack(spacing: 4) {
            configuration.icon
            configuration.title
        }
        .font(.subheadline)
    }
}

// ⑤ PreferenceKey：子视图把宽度报给祖先
struct WidthKey: PreferenceKey {
    static var defaultValue: CGFloat { 0 }
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

struct Chapter07Demo: View {
    @State private var measured: CGFloat = 0

    var body: some View {
        ScrollView {
            VStack(spacing: 16) {

                SectionCard(title: "本月概览") {
                    Label("支出 ¥3,240", systemImage: "arrow.up.right").labelStyle(CompactLabelStyle())
                    Label("收入 ¥12,000", systemImage: "arrow.down.left").labelStyle(CompactLabelStyle())
                    Divider()
                    Text("结余 ¥8,760").bold()
                }

                SectionCard(title: "测量的宽度") {
                    Text("这段文字的宽度会被量出来")
                        .background(
                            GeometryReader { geo in
                                Color.clear.preference(key: WidthKey.self, value: geo.size.width)
                            }
                        )
                    Text("实测宽 \(measured, specifier: "%.0f")pt")
                        .font(.caption).foregroundStyle(.secondary)
                }
                .onPreferenceChange(WidthKey.self) { measured = $0 }

                Button("确认支付") { }
                    .buttonStyle(PressableButtonStyle(tint: .green))

                Button(role: .destructive) { } label: {
                    Text("删除账户")
                }
                .buttonStyle(PressableButtonStyle(tint: .red))

                // 同一个 ButtonStyle，配上系统样式做对照
                Button("系统样式对照") { }
                    .buttonStyle(.borderedProminent)
            }
            .padding()
        }
    }
}

#Preview {
    Chapter07Demo()
}