SwiftUI中如何根据状态条件切换填充颜色与渐变？

问题场景 #

编写了如下SwiftUI代码，运行时出现类型转换错误，无法实现根据useGradient状态切换按钮的填充样式。

报错信息 #

Could not cast value of type 'SwiftUI.LinearGradient' (0x1f2bf7980) to 'SwiftUI.Color' (0x1f2c1b688).

原代码 #

struct TestContainer: View {
    @State var useGradient = false
    
    var body: some View {
        ZStack {
            Color.black
            
            Button {
                
                
            } label: {
                RoundedRectangle(cornerRadius: .infinity)
                    .fill(useGradient ? buttonGradient() as! Color : Color.green)
                    .overlay {
                        Text("Done")
                            .font(.system(size: 17, weight: .semibold))
                            .foregroundStyle(.white)
                        
                    }
                    .cornerRadius(.infinity)
                
            }
            .frame(height: 44)
            .padding(.horizontal, 40)
            
        }
    }
    
    private func buttonGradient() -> some View {
        
        return LinearGradient(
            stops: [
                Gradient.Stop(color: Color(red: 0.1, green: 0.2, blue: 0.2), location: 0.00),
                Gradient.Stop(color: Color(red: 0.1, green: 0.3, blue: 0), location: 1.00),
            ],
            startPoint: UnitPoint(x: 0, y: 1),
            endPoint: UnitPoint(x: 1, y: 0)
            )
    }
}

报错原因 #

LinearGradient和Color是SwiftUI中完全独立的类型，没有继承或可转换关系，强行用as! Color进行类型转换必然失败。而fill方法接受的参数类型是ShapeStyle，Color和LinearGradient都遵循这个协议，只需统一返回ShapeStyle类型即可解决类型不匹配问题。

解决方案 #

方案一：统一返回ShapeStyle类型 #

修改buttonGradient的返回类型为some ShapeStyle，并在fill中直接使用条件表达式：

struct TestContainer: View {
    @State var useGradient = false
    
    var body: some View {
        ZStack {
            Color.black
            
            Button {
                // 点击切换填充样式状态
                useGradient.toggle()
            } label: {
                RoundedRectangle(cornerRadius: .infinity)
                    .fill(useGradient ? buttonGradient() : Color.green)
                    .overlay {
                        Text("Done")
                            .font(.system(size: 17, weight: .semibold))
                            .foregroundStyle(.white)
                    }
                    .cornerRadius(.infinity)
            }
            .frame(height: 44)
            .padding(.horizontal, 40)
        }
    }
    
    private func buttonGradient() -> some ShapeStyle {
        LinearGradient(
            stops: [
                Gradient.Stop(color: Color(red: 0.1, green: 0.2, blue: 0.2), location: 0.00),
                Gradient.Stop(color: Color(red: 0.1, green: 0.3, blue: 0), location: 1.00),
            ],
            startPoint: UnitPoint(x: 0, y: 1),
            endPoint: UnitPoint(x: 1, y: 0)
        )
    }
}

方案二：使用闭包条件分支填充 #

如果不想修改方法返回类型，也可以直接在fill中用闭包进行条件判断，返回对应的填充样式：

struct TestContainer: View {
    @State var useGradient = false
    
    var body: some View {
        ZStack {
            Color.black
            
            Button {
                useGradient.toggle()
            } label: {
                RoundedRectangle(cornerRadius: .infinity)
                    .fill {
                        if useGradient {
                            buttonGradient()
                        } else {
                            Color.green
                        }
                    }
                    .overlay {
                        Text("Done")
                            .font(.system(size: 17, weight: .semibold))
                            .foregroundStyle(.white)
                    }
                    .cornerRadius(.infinity)
            }
            .frame(height: 44)
            .padding(.horizontal, 40)
        }
    }
    
    private func buttonGradient() -> some View {
        LinearGradient(
            stops: [
                Gradient.Stop(color: Color(red: 0.1, green: 0.2, blue: 0.2), location: 0.00),
                Gradient.Stop(color: Color(red: 0.1, green: 0.3, blue: 0), location: 1.00),
            ],
            startPoint: UnitPoint(x: 0, y: 1),
            endPoint: UnitPoint(x: 1, y: 0)
        )
    }
}

两种方案都能实现根据useGradient状态切换按钮的填充样式，且避免了类型转换错误。

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