如何为自定义SwiftUI组件实现自定义修饰符？

要实现自定义组件的链式修饰符，核心是利用SwiftUI视图的值类型特性，通过返回新的视图实例传递配置参数，而非直接修改原有视图的状态。以下是针对MySlider的具体实现步骤：

1. 定义配置枚举 #

先明确方向枚举类型：

enum Orientation {
    case horizontal, vertical
}

2. 重构自定义组件 #

将原有的@State替换为普通存储属性，因为修饰符逻辑是创建新视图实例，而非修改原有状态：

struct MySlider: View {
    // 用普通存储属性保存配置，默认水平方向
    private let orientation: Orientation
    
    // 初始化器设置默认值
    init(orientation: Orientation = .horizontal) {
        self.orientation = orientation
    }
    
    var body: some View {
        // 根据方向渲染不同布局的滑块
        Group {
            Slider(value: .constant(0.5)) // 实际项目中替换为业务所需的@Binding
        }
        .frame(
            width: orientation == .vertical ? 40 : nil,
            height: orientation == .horizontal ? 40 : nil
        )
        .rotationEffect(orientation == .vertical ? .degrees(-90) : .zero)
    }
}

3. 实现自定义修饰符 #

添加返回新视图实例的修饰符方法，实现链式调用：

extension MySlider {
    func orientation(_ orientation: Orientation) -> MySlider {
        MySlider(orientation: orientation)
    }
}

4. 使用方式 #

现在可以像系统修饰符一样链式调用：

MySlider()
    .orientation(.vertical)

动态状态场景适配 #

如果需要让方向响应外部状态变化（比如父视图的@State），可将组件改为接受@Binding：

struct MySlider: View {
    @Binding var orientation: Orientation
    
    init(orientation: Binding<Orientation> = .constant(.horizontal)) {
        self._orientation = orientation
    }
    
    // 保持body渲染逻辑不变
    
    // 若需要用修饰符设置初始值，可添加如下方法
    func initialOrientation(_ orientation: Orientation) -> some View {
        self.onAppear {
            self.orientation = orientation
        }
    }
}

为什么之前的写法无效？ #

• SwiftUI视图是值类型，在视图方法中self默认是不可变的（let），无法直接修改内部属性。
• 修饰符必须返回新的视图实例，才能符合SwiftUI的视图更新机制，直接修改状态的写法违背了值类型的设计原则。

内容的提问来源于stack exchange，提问作者Baffo rasta