Modifier 修饰符的种类

SwiftUI 通过 Modifiers 去修改各个 view 的样式，使用“点语法”呼叫方法，存取修饰器。它有以下特点：

• 链式：支持链式修改器的串联，修改器添加的顺序会影响效果；
• 重复：同样的修改器可以重复添加叠加，但有优先级
• 所有动画都是可中断的

// 同样的修饰符还可以添加多次（每个修饰符都只是添加到以前的任何内容上）：
Text("Hello, world!")
    .padding()
    .background(.red)
    .padding()
    .background(.blue)
    .padding()
    .background(.green)

按照不同的维度，修饰符分为以下几种类别：

环境修饰符

• 有些修饰器加到父节点那，可以继承到其内部各个子节点。这种叫【环境修饰符】；
• 使用环境修饰符时，当子节点的修饰器和父节点的重合，则子视图优先，它会覆盖父节点的效果；

//例如：以下代码的 Gryffindor 字体就会覆盖父节点的 title
VStack {
    Text("Gryffindor")
        .font(.largeTitle)
    Text("Hufflepuff")
    Text("Ravenclaw")
    Text("Slytherin")
}
.font(.title)

常规修饰符

但有些修改器就不是环境修饰符，对常规修饰符来说，应用于子视图的任何模糊都会添加到 VStack 的模糊中，而不是替换它。目前除了阅读每个修改器的单独文档并希望被提及之外，没有办法提前知道哪些修改器是环境修改器，哪些是常规修改器。

//例如 blur() ，以下代码中，子视图的 blur 就没有覆盖父视图的，反而是叠加上去
VStack {
    Text("Gryffindor")
        .blur(radius: 0)
    Text("Hufflepuff")
    Text("Ravenclaw")
    Text("Slytherin")
}
.blur(radius: 5)

原地 modifier

像是 font，foregroundColor 这样定义在具体类型 (比如例中的 Text) 上，然后返回同样类型 (Text) 的，称为原地 modifier。

封装类 modifier

像是 padding，background 这样定义在 View extension 中，将原来的 View进行包装并返回新的 View 的，称为封装类 modifier。

<aside> 💡 原地 modifier 一般来说对顺序不敏感，对布局也不关心，它们更像是针对对象 View 本身的属性的修改。而与之相反，封装类的 modifier 的顺序十分重要。封装类修饰符的逻辑是：每个修饰符都创建一个应用了该修饰符的新 struct，而不是在视图上设置一个属性。所以修饰符的顺序非常关键。

</aside>

visualEffect 修饰符

visualEffect() 修饰符可以在不使用 GeometryReader 的情况下读取视图的几何代理，某种程度上可以代替 GeometryReader

• visualEffect() 允许改变某些东西的外观效果，它们影响视图的渲染方式，但无法影响视图的实际布局位置或框架。其名称应该清楚地表明所做的任何调整都只会改变视图外观；如果您想使用它来调整视图内容，那么就找错了地方
• visualEffect() 有很多修饰符可供使用，包括 rotationEffect() 、 rotation3DEffect() 、offset()
• 我们向这个修饰符传递一个要运行的闭包，然后将获得正在修改的 content 以及它的 GeometryProxy
• 闭包参数 content：正在修改的 content 就是添加了该修饰符的视图本身，但我们不能做任何影响视图布局位置的事情
• 闭包参数 proxy：代表使用该修饰符的视图的几何代理

// 例如，以下代码将滚动视图中的每个视图模糊一定的模糊量，该模糊量是根据视图距其滚动视图中心的距离计算的。这意味着垂直中心附近的视图很少或没有模糊，而外部的视图则严重模糊：
struct ContentView: View {
    var body: some View {
        ScrollView {
            ForEach(0..<100) { i in
                Text("Row \\(i)")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity)
                    // 使用 visualEffect 可以自动获得 proxy 对象，传入方法
                    .visualEffect { content, proxy in
                        content.blur(radius: blurAmount(for: proxy))
                    }
            }
        }
    }

    func blurAmount(for proxy: GeometryProxy) -> Double {
        let scrollViewHeight = proxy.bounds(of: .scrollView)?.height ?? 100
        // 调用 proxy.frame(in: .scrollView) 可在包含该视图的最内层滚动视图中查找该视图的大小
        let ourCenter = proxy.frame(in: .scrollView).midY
        let distanceFromCenter = abs(scrollViewHeight / 2 - ourCenter)
        return Double(distanceFromCenter) / 100
    }
    
}

// 这些视觉效果适用于任何类型的位置，包括通过动画生成的位置。例如，这使得网格中的一系列圆圈旋转，每个圆圈根据色调旋转动态重新着色：
struct ContentView: View {
    @State private var rotationAmount = 0.0
    var body: some View {
        Grid {
            ForEach(0..<3) { _ in
                GridRow {
                    ForEach(0..<3) { _ in
                        Circle()
                            .fill(.green)
                            .frame(width: 100, height: 100)
                            .visualEffect { content, proxy in
                                content.hueRotation(.degrees(proxy.frame(in: .global).midY / 2))
                            }
                    }
                }
            }
        }
        .rotationEffect(.degrees(rotationAmount))
        .onAppear {
            withAnimation(.linear(duration: 5).repeatForever(autoreverses: false)) {
                rotationAmount = 360
            }
        }
    }
}

// 例如使用 3D 旋转效果
ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 0) {
        ForEach(1..<20) { num in
            Text("Number \\(num)")
                .font(.largeTitle)
                .padding()
                .background(.red)
                .frame(width: 200, height: 200)
                .visualEffect { content, proxy in
                    content
                        .rotation3DEffect(.degrees(-proxy.frame(in: .global).minX) / 8, axis: (x: 0, y: 1, z: 0))
                }

        }
    }
}

和使用 GeometryReader 对比：

// 例如：创建一个简单的 CoverFlow 风格的效果，可以水平滑动来查看在 3D 空间中移动的视图
// 使用了 GeometryReader 读取滚动视图中每个 Text 视图在全局的位置，
// 重点是：需要添加显式的 frame 修饰符，指定宽度和高度（等于Text视图尺寸），以阻止 GeometryReader 自动扩展占据所有可用空间
// 如果没有给 GeometryReader 后面添加 frame 修饰符，则 GeometryReader 会撑满屏幕，那所有 Text 的坐标都靠左上角，就都一样
ScrollView(.horizontal, showsIndicators: false) {
		HStack(spacing: 0) {
				ForEach(1..<20) { num in
						GeometryReader { 
								proxy in
								Text("Number \\(num)")
										.font(.largeTitle)
                    .padding()
                    .background(.red)
                    .rotation3DEffect(.degrees(-proxy.frame(in: .global).minX) / 8, axis: (x: 0, y: 1, z: 0))
                    .frame(width: 200, height: 200)
						}
						.frame(width: 200, height: 200)
				}
		}
}

<aside> 💡 总结：用 visualEffect 也能获得 GeometryProxy。这种写法比使用 GeometryReader 更简洁，因为不再需要添加 frame() 修饰符来阻止 GeometryReader 内容占据全屏。

</aside>

常用修饰符索引

content
    .rotation3DEffect(.degrees(-proxy.frame(in: .global).minX) / 8, axis: (x: 0, y: 1, z: 0))

} | visualEffect() 有很多修饰符可供使用，包括 rotationEffect() 、 rotation3DEffect() 、offset() ；尽管它们影响视图的渲染方式，但它们不会改变视图的框架 用 visualEffect 也能获得 GeometryProxy | | | | |