Início / coding / Perguntas / 79135474
Accepted
CalebK
Asked: 2024-10-29 08:29:44 +0800 CST

Salvando um ShapeStyle em uma variável no Swift

  • 772

No meu aplicativo, tenho uma variedade de botões. Eles compartilham muitas qualidades, mas variam em cor. Estou tentando escrever uma classe que englobe cada um dos ButtonStyles, deixando claro que a única coisa que varia são suas cores.

O problema é que eu também gostaria de poder usar .tint para um deles. Mas isso é um ShapeStyleem vez de uma Cor.

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()
    }
}

O problema aqui é a incompatibilidade dos tipos de retorno e a declaração de var enabledColor: some ShapeStylecomo o compilador reclama queProperty declares an opaque return type, but has no initializer expression from which to infer an underlying type

Existe uma maneira de fazer com que essa variável armazene a Colorou a ShapeStylepara que eu possa fazer

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

e

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

2 respostas

  1. Best Answer

    Não é permitido. Porque .backgroundtem seu conteúdo como ShapeStyleou View, não ambos. Você pode fazer um pequeno experimento para verificar, algo como:

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

    Então, nesse cenário, .backgroundnão vai funcionar de jeito nenhum. Ele não pode ter dois tipos diferentes como seu conteúdo. Você deve encontrar uma solução para dividi-lo, dois .backgroundseparadamente de alguma forma.

    .background((isEnabled && configuration.isPressed) ?pressedColor : enabledColor)

    Obrigado ao @Mojitaba pela solução .

    A partir de agora, você pode fazer uma ifcondição como:

    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)
    )
}

    Saída:

    insira a descrição da imagem aqui

    • 2

  2. Usar um operador ternário para alternar o estilo de fundo não funciona, porque os tipos não correspondem.

    No entanto, você pode usar apenas background(alignment:content:)com um switch if-else. Este modificador recebe um closure, que é um ViewBuilder.

    Outros pontos:

    • Para passar o ShapeStylepara o seu personalizado ButtonStyle, o estilo personalizado precisa ser transformado em um genérico.

    • Em vez de aplicar .clipShape(Capsule()), você pode usar a Capsulecomo a forma a ser preenchida pelo fundo.

    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()
    }
}

    Seus dois exemplos agora são compilados e funcionam:

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

    Captura de tela

    • 1

relate perguntas