如何为SwiftUI嵌套视图部分应用View Modifier？

问题 #

我实现了一个可复用的TaskButton，点击后会显示加载spinner，直到异步任务完成。每个按钮需要不同外观，可通过View Modifier设置，但当前修饰的是按钮而非内部标签，导致点击区域未改变。请问如何将修饰符应用到嵌套标签上？是否可通过传递泛型ViewModifier作为参数？

解决方案 #

方案1：传递泛型ViewModifier作为参数 #

可以通过给TaskButton添加泛型的ViewModifier参数，将修饰符直接应用到内部的内容容器上，确保点击区域和视觉修饰的区域一致。修改后的代码如下：

import SwiftUI

struct TaskButton<ContentModifier: ViewModifier>: View {
    var text: String
    var task: ((@escaping () -> Void) -> Void)
    var loaderTint: Color = .white
    var contentModifier: ContentModifier
    
    @State private var isLoading = false
    
    func onClick() {
        isLoading = true
        task() {
            isLoading = false
        }
    }
    
    var body: some View {
        Button(action: onClick) {
            VStack {
                if isLoading {
                    ProgressView().tint(loaderTint)
                } else {
                    Text(text)
                }
            }
            .modifier(contentModifier) // 将修饰符应用到内部内容容器
        }
    }
    
    // 带修饰符参数的初始化方法
    init(text: String, task: @escaping ((@escaping () -> Void) -> Void), loaderTint: Color = .white, contentModifier: ContentModifier) {
        self.text = text
        self.task = task
        self.loaderTint = loaderTint
        self.contentModifier = contentModifier
    }
    
    // 提供默认无修饰符的初始化重载，方便快速使用
    init(text: String, task: @escaping ((@escaping () -> Void) -> Void), loaderTint: Color = .white) where ContentModifier == EmptyModifier {
        self.init(text: text, task: task, loaderTint: loaderTint, contentModifier: EmptyModifier())
    }
}

#Preview {
    TaskButton(
        text: "Click here!",
        task: { cb in
            DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                cb()
            }
        },
        contentModifier: bpLargeButtonStyleEnabled()
            .frame(height: 18)
            .padding()
            .font(.sourceSans3Regular(size: 16))
    )
}

方案2：自定义内容闭包（更灵活） #

如果需要更高的灵活性，允许调用者完全自定义按钮的内容布局（比如添加图标、调整排版），可以让TaskButton接收一个返回自定义View的闭包，闭包会传入当前的加载状态。这样修饰符可以直接应用到自定义内容上，确保点击区域和视觉区域匹配：

import SwiftUI

struct TaskButton<Content: View>: View {
    var task: ((@escaping () -> Void) -> Void)
    @ViewBuilder var content: (Bool) -> Content // 闭包接收加载状态，返回自定义内容
    
    @State private var isLoading = false
    
    func onClick() {
        isLoading = true
        task() {
            isLoading = false
        }
    }
    
    var body: some View {
        Button(action: onClick) {
            content(isLoading)
        }
    }
}

#Preview {
    TaskButton(task: { cb in
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            cb()
        }
    }) { isLoading in
        VStack {
            if isLoading {
                ProgressView().tint(.white)
            } else {
                Text("Click here!")
            }
        }
        .frame(height: 18)
        .modifier(bpLargeButtonStyleEnabled())
        .padding()
        .font(.sourceSans3Regular(size: 16))
    }
}

方案对比 #

• 方案1：适合需要固定内容结构（仅Text+ProgressView）、只调整样式的场景，调用方式简洁。
• 方案2：灵活性拉满，支持任意自定义内容布局，满足复杂的UI需求。

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