SwiftUI之Modifer与ViewModifer

上一篇我们讲了ViewBuilder，今天我们来讲讲Modifer和ViewModifer。

要了解ViewModifer，我们先来了解一下Modifer。

Modifer修饰器

1、Modifer介绍

修饰器用来调整一个视图的特性，也就是用来改变视图View的外观，每个修饰符都会创建一个应用了该修饰符的新结构体，而不是 在视图上设置属性。

2、Modifer使用

2.1、一个简单的示例

Text("Hello, World!")
    .foregroundColor(.red) // Display red text.

2.2、通过链式调用实现复杂效果

Text("Hello World!")
    .foregroundColor(.red)
    .frame(width: 200)
    .border(.gray)

3、自定义modifer

3.1、使用扩展给Text组件扩展一个自定义的版本

extension Text {
    func customTitleText() -> Text {
        self
            .fontWeight(.black)
            .font(.system(size: 36))
    }
}

3.2、在代码中调用自定义的版本

struct TestViewModiferView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .customTitleText()
            .foregroundColor(.red)
    }
}

4、实践总结

可以将同一类的修饰属性封装到一个自定义的修饰器里面，这样可以实现全局通过。

当然，封装Struct也可以实现类似功能。

下面再来看看VIewModifer

ViewModifer视图修饰器

1、ViewModifer的描述

A modifer that you apply to a view or another view modifer, producing a different version of the original value.

翻译一下：应用于视图或其他视图修饰器的修饰器，生成原始值的不同版本。

2、ViewModifer的定义

protocol ViewModifier

3、ViewModifer的解释

ViewModifer是一个协议，要使用ViewModifer，必须要实现这个协议。

4、自定义ViewModifer的格式

自定义ViewModifer需要实现两点：1，继承ViewModifer，2，实现ViewModifer的body方法

struct CustomModifer: ViewModifier {
    func body(content: Content) -> some View {
        content
            .foregroundColor(.red)
    }
}

5、自定义ViewModifer实战

定义一个视图修饰器结构体，用来修饰一个按钮的外观

/// - 自定义一个ViewModifer
struct PrimaryButtonModifer: ViewModifier {
    func body(content: Content) -> some View {
        content
            .foregroundColor(.white)
            .font(.headline)
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
            .background(RoundedRectangle(cornerRadius: 15, style: .continuous).fill(Color.green))
            .padding(.bottom)
    }
}

6、自定义ViewModifer的使用

6.1、使用modifer()方法调用

Text("Login Button")
    .modifier(PrimaryButtonModifer())
    .padding(.horizontal)

6.2、扩展View协议增加便利方法调用

6.2.1、使用extension扩展给View增加一个方法

extension View {
    func primaryButton() -> ModifiedContent<Self, PrimaryButtonModifer> {
        return modifier(PrimaryButtonModifer())
    }
}

6.2.2、调用View协议的扩展方法

Text("Register Button")
    .primaryButton()
    .padding(.horizontal)

相比调用modifer()方法，扩展View协议增加方法的方式更具有可扩展性。

ViewModifer高阶示例

1、复杂ViewModifer定义

struct StyledButton: ViewModifier {
    enum ButtonColor {
        case green
        case blue
        
        func backgroundColor() -> Color {
            switch self {
            case .green:
                return Color.green
            case .blue:
                return Color.blue
            }
        }
        
        func borderColor() -> Color {
            switch self {
            case .green:
                return Color(red: 7/255,
                             green: 171/255,
                             blue: 67/255)
            case .blue:
                return Color(red: 7/255,
                             green: 42/255,
                             blue: 171/255)
            }
        }
    }
    
    let buttonColor: ButtonColor
    
    func body(content: Content) -> some View {
        return content
            .foregroundColor(.white)
            .background(buttonColor.backgroundColor())
            .border(buttonColor.borderColor(),
                    width: 5)
    }
}

2、ViewModifer使用

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button Pressed")
        }, label: {
            Text("Button").padding()
        })
        .modifier(StyledButton(buttonColor: .blue))
    }
}