Início / coding / Perguntas / 78984884
Accepted
Deepak Sharma
Asked: 2024-09-14 18:27:36 +0800 CST

Preenchendo apenas uma parte do SwiftUI com cor de fundo

  • 772

Estou tentando projetar uma visualização de aparador de vídeo no SwiftUI da seguinte forma. O resultado é este. Minha pergunta é se posso ter a parte do meio (ou seja, tudo, exceto 20 pontos à esquerda e à direita e 5 pontos para cima e para baixo) transparente para que eu possa mostrar miniaturas atrás delas (talvez tendo um formato de clipe personalizado)?

insira a descrição da imagem aqui

  var body: some View {
    HStack(spacing: 10) {
        Image(systemName: "chevron.compact.left")
            .frame(height:70)
        
        Spacer()
        
        Image(systemName: "chevron.compact.right")
    }
    .foregroundColor(.black)
    .font(.title3.weight(.semibold))
    .padding(.horizontal, 7)
    .padding(.vertical, 3)
    .background(.yellow)
    .clipShape(RoundedRectangle(cornerRadius: 7))
    .frame(width: 300)
    .onGeometryChange(for: CGFloat.self) { proxy in
        proxy.size.width
    } action: { width in
        print("width = \(width)")
    }

}

2 respostas

  1. Best Answer

    Em vez de backgrounde então clipShape, use background(_:in:fillStyle:). Isso permite que você especifique um Shapeno qual você quer que a cor de fundo preencha.

    Você pode escrever algo Shapeassim:

    struct VideoTrimmerBackgroundShape: Shape {
    func path(in rect: CGRect) -> Path {
        RoundedRectangle(cornerRadius: 7)
            .path(in: rect)
            .subtracting(
                RoundedRectangle(cornerRadius: 7)
                    .path(in: rect.insetBy(dx: 20, dy: 5))
            )
    }
}

    Estou simplesmente subtraindo o caminho criado por um retângulo arredondado inserido de um não inserido.

    Então

    .background(.yellow, in: VideoTrimmerBackgroundShape())
// you don't need clipShape anymore!

    subtractingestá disponível desde o iOS 17. Se precisar oferecer suporte a uma versão anterior, você pode simplesmente adicionar o retângulo arredondado menor como um subcaminho, mas usar o preenchimento par-ímpar.

    struct VideoTrimmerBackgroundShape: Shape {
    func path(in rect: CGRect) -> Path {
        var p = RoundedRectangle(cornerRadius: 7)
            .path(in: rect)
        p.addPath(
            RoundedRectangle(cornerRadius: 7)
                .path(in: rect.insetBy(dx: 20, dy: 5))
        )
        return p
    }
}

    .background(.yellow, in: VideoTrimmerBackgroundShape(), fillStyle: .init(eoFill: true))
    • 2

  2. Outra maneira de cortar parte do fundo é usar uma sobreposição com .blendMode(.destinationOut). Também é necessário aplicar .compositingGroup()no resultado, para evitar que o blend mode queime em camadas mais profundas.

    Substitua estes modificadores:

    .background(.yellow)
.clipShape(RoundedRectangle(cornerRadius: 7))

    com:

    .background {
    RoundedRectangle(cornerRadius: 7)
        .fill(.yellow)
        .overlay {
            Rectangle()
                .padding(.vertical, 5)
                .padding(.horizontal, 20)
                .blendMode(.destinationOut)
        }
        .compositingGroup()
}

    Captura de tela

    Você mencionou em um comentário à resposta que já aceitou que gostaria que os chevrons parecessem centralizados. Como você está aplicando padding de 7 nas laterais, isso significa aplicar padding (ou espaçamento) de 7 no lado interno também.

    Uma maneira de conseguir isso seria mover os chevrons para a sobreposição. Então, de fato, toda a visualização pode ser simplificada:

    var body: some View {
    RoundedRectangle(cornerRadius: 7)
        .fill(.yellow)
        .frame(width: 300, height: 76)
        .overlay {
            HStack(spacing: 7) {
                Image(systemName: "chevron.compact.left")
                Rectangle()
                    .padding(.vertical, 5)
                    .blendMode(.destinationOut)
                Image(systemName: "chevron.compact.right")
            }
            .padding(.horizontal, 7)
            .font(.title3.weight(.semibold))
            .foregroundStyle(.black)
        }
        .compositingGroup()
}

    Captura de tela

    EDIT Neste caso em particular, você está preenchendo com uma cor sólida e a parte do meio é um retângulo quadrado. Isso significa que seria possível construir a visualização apenas com técnicas básicas - não há necessidade de usar o modo de mesclagem, nem formas personalizadas.

    • Use uma HStackcomo vista base, como você já estava fazendo.
    • Corrija o tamanho do HStackou aplique preenchimento para restringir seu tamanho dentro do espaço disponível.
    • Crie imagens com altura total HStacke aplique preenchimento conforme necessário.
    • Dê às imagens um fundo amarelo.
    • Em vez de preencher o fundo do HStack, trace sua borda com uma linha de espessura adequada.
    • O Spacerinterior HStackentão fornece o "buraco" automaticamente.

    Para dar os cantos arredondados, você pode usar um retângulo arredondado para o traço. No entanto, isso significaria ajustar o preenchimento das imagens, para que seus cantos quadrados não apareçam. Como alternativa, use uma borda retangular e, em seguida, aplique uma forma de clipe, como você estava fazendo originalmente:

    var body: some View {
    HStack {
        Image(systemName: "chevron.compact.left")
            .frame(maxHeight: .infinity)
            .padding(.horizontal, 7)
            .background(.yellow)
        Spacer()
        Image(systemName: "chevron.compact.right")
            .frame(maxHeight: .infinity)
            .padding(.horizontal, 7)
            .background(.yellow)
    }
    .font(.title3.weight(.semibold))
    .foregroundStyle(.black)
    .frame(width: 300, height: 76)
    .border(.yellow, width: 5)
    .clipShape(RoundedRectangle(cornerRadius: 7))
}
    • 1

relate perguntas