如何在不丢失视图标识的前提下，为视图条件应用样式？

TL;DR
如何实现Label("something", systemImage: "star").labelStyle(state ? .iconOnly : .titleAndIcon)的效果，同时不丢失Label的视图标识？

完整问题 #

希望为视图条件应用样式，根据状态值让标签仅显示图标，或同时显示图标和文本，尝试的代码如下：

struct DemoView: View {
    
    @Binding var state: Bool
    var names: [String]
    
    var body: some View {
        List(names) { name in
            Label(name, systemImage: "star")
                .labelStyle(state ? .iconOnly : .titleAndIcon) // 错误代码行
        }
    }
}

但由于.iconOnly和.titleAndIcon不属于同一类型，上述代码无法运行。常见的分支写法会导致状态变化时丢失Label的视图标识，引发动画异常：

struct DemoView: View {
    
    @Binding var state: Bool
    var names: [String]
    
    var body: some View {
        List(names) { name in
            if state {
                Label(name, systemImage: "star")
                    .labelStyle(.iconOnly)
            } else {
                Label(name, systemImage: "star")
                    .labelStyle(.titleAndIcon)
            }
        }
    }
}

那么，如何为视图条件应用不同类型签名的样式，同时不丢失视图标识？

解决方案：自定义可切换的LabelStyle #

通过自定义一个遵循LabelStyle协议的结构体，将样式切换逻辑封装在内部，确保Label始终是同一个实例，从而保留视图标识：

struct ConditionalLabelStyle: LabelStyle {
    let isIconOnly: Bool
    
    func makeBody(configuration: Configuration) -> some View {
        if isIconOnly {
            Label(configuration)
                .labelStyle(.iconOnly)
        } else {
            Label(configuration)
                .labelStyle(.titleAndIcon)
        }
    }
}

// 扩展LabelStyle，简化调用语法
extension LabelStyle where Self == ConditionalLabelStyle {
    static func conditional(isIconOnly: Bool) -> ConditionalLabelStyle {
        ConditionalLabelStyle(isIconOnly: isIconOnly)
    }
}

在DemoView中直接使用该自定义样式：

struct DemoView: View {
    
    @Binding var state: Bool
    var names: [String]
    
    var body: some View {
        List(names) { name in
            Label(name, systemImage: "star")
                .labelStyle(.conditional(isIconOnly: state))
        }
    }
}

原理说明 #

• 自定义样式将条件切换逻辑内聚在LabelStyle实现中，外部仅需传递状态参数
• 状态变化时，Label本身不会被重建，仅会更新内部样式渲染逻辑，因此能完整保留视图标识，避免动画、列表复用等异常问题

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