1
2
3
4
5

// 半透明色：不管背后是什么，永远是同一块灰
Text("浮动").padding().background(.white.opacity(0.5))

// 材质：会实时模糊背后的内容，并随明暗模式自动调整
Text("浮动").padding().background(.regularMaterial)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

VStack(spacing: 16) {
    Text("ultraThin").padding().background(.ultraThinMaterial)
    Text("thin").padding().background(.thinMaterial)
    Text("regular").padding().background(.regularMaterial)
    Text("thick").padding().background(.thickMaterial)
    Text("ultraThick").padding().background(.ultraThickMaterial)
    Text("bar").padding().background(.bar)          // 系统栏专用
}
.padding()
.background(.blue.gradient)     // ← 放个彩色背景，才看得出材质的模糊效果

1
2

Text("卡片").padding(16)
    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16))

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

struct AdaptivePanel<Content: View>: View {
    @Environment(\.accessibilityReduceTransparency) private var reduceTransparency
    @ViewBuilder var content: Content

    var body: some View {
        content
            .padding(16)
            .background(
                reduceTransparency ? AnyShapeStyle(.background) : AnyShapeStyle(.regularMaterial),
                in: RoundedRectangle(cornerRadius: 16)
            )
    }
}

1
2

Text("模糊").blur(radius: 4)                    // 高斯模糊，边缘半透明
Text("更实").blur(radius: 4, opaque: true)      // 不透明模糊：边缘不发虚

1
2
3

RoundedRectangle(cornerRadius: 12)
    .fill(.white)
    .shadow(color: .black.opacity(0.15), radius: 8, x: 0, y: 4)

1
2
3
4
5
6
7

// 🛑 阴影被裁掉了
content.clipShape(Circle()).shadow(radius: 10)

// ✅ 先裁内容，再加阴影
content.shadow(radius: 10).clipShape(Circle())    // 也不对
// ✅ 正确：阴影要加在"已经裁好的形状"外面
content.clipShape(Circle()).shadow(radius: 10)    // ← 其实这个是对的

1
2
3
4

ZStack {
    Color.blue
    Color.yellow.blendMode(.multiply)      // 正片叠底：结果偏暗
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Text("GLOW")
    .font(.system(size: 48, weight: .black))
    .foregroundStyle(.white)
    .overlay {
        Text("GLOW")
            .font(.system(size: 48, weight: .black))
            .foregroundStyle(.cyan)
            .blur(radius: 12)
            .blendMode(.plusLighter)         // 让光晕"加"上去，而不是盖住
    }

1
2
3
4
5

// 🚧 用 GeometryReader 测量，但它会改变布局
.background(GeometryReader { geo in
    Color.clear.preference(key: OffsetKey.self, value: geo.frame(in: .named("scroll")).minY)
})
.onPreferenceChange(OffsetKey.self) { offset = $0 }

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

ScrollView {
    VStack {
        ForEach(0..<30, id: \.self) { i in
            Text("第 \(i) 行")
                .padding()
                .frame(maxWidth: .infinity)
                .background(.blue.opacity(0.1), in: RoundedRectangle(cornerRadius: 8))
                // ✅ 在"视觉层"里读几何信息，不影响布局、不触发额外刷新
                .visualEffect { content, proxy in
                    let minY = proxy.frame(in: .scrollView).minY
                    let progress = min(max(minY / 200, 0), 1)
                    return content
                        .opacity(1 - progress * 0.6)
                        .scaleEffect(1 - progress * 0.1)
                }
        }
    }
    .padding()
}

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

struct Card: View {
    let index: Int
    init(_ i: Int) { index = i }
    var body: some View {
        RoundedRectangle(cornerRadius: 12)
            .fill(.blue.opacity(0.2))
            .overlay { Text("卡片 \(index)") }
            .padding(.horizontal, 8)
    }
}

struct HorizontalCards: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(0..<10) { i in
                    Card(i)
                        .containerRelativeFrame(.horizontal)     // ← 等于滚动容器的宽度
                }
            }
        }
    }
}

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

import SwiftUI

struct GlassButtons: View {
    @Namespace private var glassNamespace

    var body: some View {
        VStack(spacing: 16) {
            Text("普通玻璃")
                .padding()
                .glassEffect()

            Text("胶囊形状")
                .padding()
                .glassEffect(.regular, in: .capsule)

            // 多个玻璃元素可以"合并"成一块（相邻的玻璃会连起来）
            HStack(spacing: 8) {
                Button("收藏") { }.padding().glassEffect()
                Button("分享") { }.padding().glassEffect()
            }
            .glassEffectUnion(id: "toolbar", namespace: glassNamespace)   // 合并成一体
        }
    }
}

1
2
3

@available(iOS 26.0, macOS 26.0, tvOS 26.0, watchOS 26.0, *)
@available(visionOS, unavailable)
public func glassEffect(_ glass: Glass = .regular, in shape: some Shape = DefaultGlassEffectShape()) -> some View

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

struct GlassPanel<Content: View>: View {
    @ViewBuilder var content: Content

    var body: some View {
        if #available(iOS 26.0, macOS 26.0, *) {
            content.glassEffect()
        } else {
            content.background(.regularMaterial, in: Capsule())
        }
    }
}

  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
114
115
116
117
118
119
120
121
122
123
124
125
126
127

import SwiftUI

struct EffectsLab: View {
    @Environment(\.accessibilityReduceTransparency) private var reduceTransparency
    @State private var scrollAmount: CGFloat = 0

    var body: some View {
        ZStack {
            // 彩色背景：材质和模糊都要有东西可"作用"才看得出来
            LinearGradient(colors: [.purple, .blue, .teal],
                           startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            ScrollView {
                VStack(spacing: 24) {

                    // ① 五档材质对照
                    sectionTitle("材质（注意背景被模糊的程度）")
                    VStack(spacing: 10) {
                        ForEach([("ultraThin", Material.ultraThinMaterial),
                                 ("thin", Material.thinMaterial),
                                 ("regular", Material.regularMaterial),
                                 ("thick", Material.thickMaterial),
                                 ("ultraThick", Material.ultraThickMaterial)],
                                id: \.0) { name, material in
                            Text(name)
                                .font(.callout)
                                .frame(maxWidth: .infinity)
                                .padding(.vertical, 10)
                                .background(material, in: RoundedRectangle(cornerRadius: 10))
                        }
                    }

                    // ② 自适应：减少透明度时换成不透明
                    sectionTitle("尊重「减少透明度」")
                    Text(reduceTransparency ? "不透明背景（用户偏好）" : "材质背景")
                        .padding()
                        .background(
                            reduceTransparency
                                ? AnyShapeStyle(.background)
                                : AnyShapeStyle(.regularMaterial),
                            in: RoundedRectangle(cornerRadius: 12)
                        )

                    // ③ 发光文字：blur + blendMode
                    sectionTitle("发光文字（blur + plusLighter）")
                    Text("GLOW")
                        .font(.system(size: 44, weight: .black))
                        .foregroundStyle(.white)
                        .overlay {
                            Text("GLOW")
                                .font(.system(size: 44, weight: .black))
                                .foregroundStyle(.cyan)
                                .blur(radius: 12)
                                .blendMode(.plusLighter)
                        }

                    // ④ 阴影的三种"真实度"
                    sectionTitle("阴影（光源默认来自上方）")
                    HStack(spacing: 16) {
                        shadowSwatch("假的", .black, radius: 0, y: 3)
                        shadowSwatch("一般", .black.opacity(0.35), radius: 6, y: 3)
                        shadowSwatch("自然", .black.opacity(0.18), radius: 14, y: 6)
                    }

                    // ⑤ 滚动特效：visualEffect（不影响布局）
                    sectionTitle("滚动特效（visualEffect）")
                    ForEach(0..<12, id: \.self) { i in
                        Text("第 \(i) 行")
                            .padding()
                            .frame(maxWidth: .infinity)
                            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 8))
                            .visualEffect { content, proxy in
                                let minY = proxy.frame(in: .scrollView).minY
                                let p = min(max(minY / 400, 0), 1)
                                return content
                                    .opacity(1 - p * 0.7)
                                    .scaleEffect(1 - p * 0.12)
                            }
                    }
                }
                .padding()
            }
        }
    }

    func sectionTitle(_ s: String) -> some View {
        Text(s)
            .font(.footnote).bold()
            .foregroundStyle(.white.opacity(0.8))
            .frame(maxWidth: .infinity, alignment: .leading)
    }

    func shadowSwatch(_ label: String, _ color: Color, radius: CGFloat, y: CGFloat) -> some View {
        VStack(spacing: 8) {
            RoundedRectangle(cornerRadius: 10)
                .fill(.white)
                .frame(width: 70, height: 50)
                .shadow(color: color, radius: radius, y: y)
            Text(label).font(.caption2).foregroundStyle(.white.opacity(0.8))
        }
    }
}

#Preview("标准") {
    EffectsLab()
}

// ⚠️ accessibilityReduceTransparency 是只读环境值（`get`-only），
//    直接 `.environment(\.accessibilityReduceTransparency, true)` 会报
//    `cannot convert value of type 'any KeyPath<EnvironmentValues, Bool>' to
//     expected argument type 'WritableKeyPath<EnvironmentValues, Bool>'`
//    想看"减少透明度"下的样子，用模拟器/系统设置打开该开关，
//    或者像下面这样自定义一个可写的环境键位来做演示。
private struct DemoReduceTransparency: EnvironmentKey {
    static var defaultValue: Bool { false }
}
extension EnvironmentValues {
    var demoReduceTransparency: Bool {
        get { self[DemoReduceTransparency.self] }
        set { self[DemoReduceTransparency.self] = newValue }
    }
}

#Preview("减少透明度（模拟）") {
    EffectsLab().environment(\.demoReduceTransparency, true)
}