SwiftUI自定义视图如何返回Label以正常使用.labelStyle修饰符

原因说明 #

你封装的自定义视图本质是普通View类型，外部设置的labelStyle修饰符会存入环境变量，原生Label虽然默认会读取这个环境变量调整布局，但在多层视图嵌套的场景下，部分SwiftUI版本会出现环境值读取失效的问题，导致样式不生效。

解决方法 #

我们可以给自定义视图扩展一个专属的labelStyle方法，直接把样式作用到内部的原生Label上，同时可以补充三个便捷初始化器，简化调用成本，不用每次手动传入type枚举值。

修改后的完整代码如下：

import SwiftUI

struct LabelWithColoredIcon: View {
    enum LabelType {
        case glyph
        case systemImage
        case image
    }
    
    let title: String
    let icon: String
    let color: Color
    let type: LabelType
    
    // 原始全参数初始化器
    init(title: String, icon: String, color: Color, type: LabelType) {
        self.title = title
        self.icon = icon
        self.color = color
        self.type = type
    }
    
    // 便捷初始化器1：自定义字形
    init(glyph: String, title: String, color: Color) {
        self.title = title
        self.icon = glyph
        self.color = color
        self.type = .glyph
    }
    
    // 便捷初始化器2：系统图标
    init(systemImage: String, title: String, color: Color) {
        self.title = title
        self.icon = systemImage
        self.color = color
        self.type = .systemImage
    }
    
    // 便捷初始化器3：资源图片
    init(image: String, title: String, color: Color) {
        self.title = title
        self.icon = image
        self.color = color
        self.type = .image
    }
    
    var body: some View {
        Label(title: { Text(title) },
              icon: {
                switch type {
                    case .glyph:
                        Text(icon)
                            .foregroundColor(color)
                    case .systemImage:
                        Image(systemName: icon)
                            .foregroundColor(color)
                    case .image:
                        Image(icon)
                            .foregroundColor(color)
                }
              })
    }
}

// 扩展实现labelStyle修饰符，直接作用到内部Label
extension LabelWithColoredIcon {
    func labelStyle<S: LabelStyle>(_ style: S) -> some View {
        self.body.labelStyle(style)
    }
}

// 预览测试
struct LabelWithColoredIcon_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            // 普通样式
            LabelWithColoredIcon(
                glyph: "🔥",
                title: "Contact Groups",
                color: .purple
            )
            // 仅图标样式，可正常生效
            LabelWithColoredIcon(
                systemImage: "person.3.fill",
                title: "Contact Groups",
                color: .purple
            )
            .labelStyle(.iconOnly)
        }
    }
}

验证说明 #

修改后直接调用.labelStyle(.iconOnly)即可正常生效，三个便捷初始化器也可以直接对应你需要的三种场景，不需要手动传枚举值。

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