SwiftUI Tips 004：奇妙而强大的修饰符 (modifier) 4年前

在 SwiftUI 中，修饰符的功能类似于 CSS，用来在应用布局中定位和配置视图，如修改视图的大小、背景、添加动画、添加手势等等。View 协议通过扩展提供了大量的修饰符，它们以协议方法的形式给出，同时提供了默认实现。以我们熟悉的 frame() 为例，来看看它的声明：

copy
@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)extension View {    /// Positions this view within an invisible frame having the specified    /// width and/or height.    ///    /// Use this method to specify a fixed size for a view's width,    /// height, or both. If you only specify one of the dimensions, the    /// resulting view assumes this view's sizing behavior in the other    /// dimension.    ///    /// ...    @inlinable public func frame(width: CGFloat? = nil, height: CGFloat? = nil, alignment: Alignment = .center) -> some View    /// This function should never be used.    ///    /// It is merely a hack to catch the case where the user writes .frame(),    /// which is nonsensical.    @available(*, deprecated, message: "Please pass one or more parameters.")    @inlinable public func frame() -> some View}

类似的声明还有很多。可以说，修饰符在 SwiftUI 中起着举足轻重的作用。

与 CSS 类似，修饰符的效果具有传递性，也就是说，父视图上使用的修饰符也会影响到其所有子视图，除非子视图显式的调用修饰符来覆盖这种效果，如下所示：

copy
struct ContentView: View {    var body: some View {        VStack {            Text("Hello, world!").padding()            Text("Hello, iOS 14").font(.body)       // 覆盖 VStack 的字体大小设置        }        .font(.system(size: 60))    }}

一般情况下，每个修饰符的作用是特定的，如 font() 用于修改字体大小， frame() 用于修改视图大小。然而一个视图通常会有很多属性，同时修改多个属性时需要依赖于多个修饰符，这时我们就可以通过链式调用的方式将这些修饰符串连起来，以完成对同一个视图的多重修饰。如下代码所示：

copy
struct ContentView: View {    var body: some View {        VStack {            Text("Hello, world!")                .foregroundColor(.blue)                .padding(.all, 20)                .border(Color.yellow, width: 1)        }        .font(.system(size: 60))    }}

之所以能以链式的方式调用修饰符，是因为每个修饰符方法的返回值是 some View （如上面 frame() 的声明），仍然是一个视图，所以可以在新的视图的基础上继续调用修饰符。

需要注意的是，在链式调用的过程中，修饰符的顺序会对实际效果产生影响。相同的两个修饰符以不同的顺序调用，呈现的结果可能是不一样的。我们交换一下上面代码中 padding() 和 border() 的位置：

copy
struct ContentView: View {    var body: some View {        VStack {            Text("Hello, world!")                .foregroundColor(.blue)                .border(Color.yellow, width: 1)                .padding(.all, 20)        }        .font(.system(size: 60))    }}

可以看到边框位置的明显变化。实际上，如果我们稍微探索一下每一次调用修饰符所产生的视图，就会发现两者所生成的视图类型并不相同，我们将代码稍作修改：

copy
struct ContentView: View {    var body: some View {        VStack {            createText()        }        .font(.system(size: 60))    }        func createText() -> some View {        let text = Text("Hello, world!")            .foregroundColor(.blue)            .border(Color.yellow, width: 1)            .padding(.all, 20)        return text    }}

在第 14 行打上断点，分别运行，并通过 po type(of: text) 来查看 text 的类型，可以得到如下结果：

copy
// Text("Hello, world!").foregroundColor(.blue).border(Color.yellow, width: 1).padding(.all, 20) 的类型SwiftUI.ModifiedContent<SwiftUI.ModifiedContent<SwiftUI.Text, SwiftUI._PaddingLayout>, SwiftUI._OverlayModifier<SwiftUI._ShapeView<SwiftUI._StrokedShape<SwiftUI.Rectangle._Inset>, SwiftUI.Color>>>// Text("Hello, world!").foregroundColor(.blue).border(Color.yellow, width: 1).padding(.all, 20) 的类型SwiftUI.ModifiedContent<SwiftUI.ModifiedContent<SwiftUI.Text, SwiftUI._OverlayModifier<SwiftUI._ShapeView<SwiftUI._StrokedShape<SwiftUI.Rectangle._Inset>, SwiftUI.Color>>>, SwiftUI._PaddingLayout>

可以看到，两者有不同的嵌套结构。详细的结构我们会在其它 Tip 中分析。SwiftUI 提供了丰富的修饰符，让开发者能尽情地创建生动而奇妙的页面，同时 SwiftUI 还提供了方法让我们可以自定义修饰符，以满足开发者创造的渴望。我们同样也会在另外一个 Tip 中来介绍如何自定义修饰符。

本文分享自微信公众号 - 酷酷的哀殿（kukudeaidian）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。