主页 / coding / 问题 / 79135474
Accepted
CalebK
Asked: 2024-10-29 08:29:44 +0800 CST

将 ShapeStyle 保存到 swift 中的变量

  • 772

在我的应用中，我有各种按钮。它们有许多共同的特点，但颜色不同。我试图编写一个包含每个按钮样式的类，明确指出它们唯一的不同之处是颜色。

问题是我还想对其中一个使用 .tint。但那是一个ShapeStyle而不是一个 Color。

struct CommonButtonStyle: ButtonStyle {
    @Environment(\.isEnabled) var isEnabled: Bool
    
    @Environment(\.isFocused) var isFocused: Bool
    
    var labelColor: Color
    
    var enabledColor: some ShapeStyle
    var pressedColor: Color
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(size: 14, weight: .bold))
            .padding(.horizontal, 16)
            .padding(.vertical, 10)
            .foregroundStyle(labelColor)
            .frame(maxHeight: 40)
            .background((isEnabled && configuration.isPressed) ? pressedColor : enabledColor)
            .clipShape(Capsule())
            .containerShape(Capsule())
            .opacity(isEnabled ? 1 : 0.5)
            .focusable()
    }
}

这里的问题是不匹配的返回类型和声明，var enabledColor: some ShapeStyle因为编译器抱怨Property declares an opaque return type, but has no initializer expression from which to infer an underlying type

有没有办法让我得到这个变量来存储一个Color或一个，ShapeStyle以便我可以做

CommonButtonStyle(labelColor: .black, enabledColor: .tint, pressedColor: .white)

和

CommonButtonStyle(labelColor: .black, enabledColor: .blue, pressedColor: .white)
swift

2 个回答

  1. Best Answer

    这是不允许的。因为.background其内容为ShapeStyle或View，而不是两者。您可以做一个小实验来检查它，例如：

    func getSomeView() -> some View {
    if isEnabled {
        Text("Halo") //<- ❌ error here
    } else {
        Button {
        } label: {
            Text("Hello")
        }
    }
}

    因此，在这种情况下，.background根本行不通。它不能接受两种不同的类型作为其内容。您必须找到一种解决方案以.background某种方式将其拆分为两个。

    .background（（isEnabled && configuration.isPressed）？pressedColor：enabledColor）

    感谢@Mojitaba 提供的解决方案。

    从现在开始，您可以执行if如下条件：

    struct CommonButtonStyle<Background: ShapeStyle>: ButtonStyle {
    ...
    var enabledColor: Background
    var pressedColor: Color
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            ...
            .apply {
                if isEnabled && configuration.isPressed {
                    $0.background(pressedBg)
                } else {
                    $0.background(enableBg)
                }
            }
            ...
    }
}

var body: some View {
    Button {
    } label: {
        Text("Button 1")
    }
    .buttonStyle(CommonButtonStyle(
        labelColor: .black,
        enabledColor: LinearGradient(gradient: Gradient(colors: [.yellow, .purple]),
                                     startPoint: .leading,
                                     endPoint: .trailing),
        pressedColor: .white)
    )
}

    输出：

    在此处输入图片描述

    • 2

  2. 使用三元运算符切换背景样式不起作用，因为类型不匹配。

    但是，您可以改用background(alignment:content:)if-else 开关。此修饰符采用闭包，即ViewBuilder。

    其他要点：

    • 要将 传递ShapeStyle给您的自定义ButtonStyle，需要将自定义样式转变为通用样式。

    • 除了应用之外.clipShape(Capsule())，您还可以使用Capsule作为背景填充的形状。

    struct CommonButtonStyle<S>: ButtonStyle
where S: ShapeStyle {
    @Environment(\.isEnabled) var isEnabled: Bool
    @Environment(\.isFocused) var isFocused: Bool

    var labelColor: Color
    var enabledColor: S
    var pressedColor: Color

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(size: 14, weight: .bold))
            .padding(.horizontal, 16)
            .padding(.vertical, 10)
            .foregroundStyle(labelColor)
            .frame(maxHeight: 40)
            .background {
                if isEnabled && configuration.isPressed {
                    Capsule().fill(pressedColor)
                } else {
                    Capsule().fill(enabledColor)
                }
            }
            .containerShape(Capsule())
            .opacity(isEnabled ? 1 : 0.5)
            .focusable()
    }
}

    您的两个示例现在可以编译并运行：

    Button("Tinted") {}
    .buttonStyle(CommonButtonStyle(labelColor: .black, enabledColor: .tint, pressedColor: .white))
Button("Colored") {}
    .buttonStyle(CommonButtonStyle(labelColor: .black, enabledColor: .blue, pressedColor: .white))

    截屏

    • 1

相关问题