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)?
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)")
}
}
Em vez de
background
e entãoclipShape
, usebackground(_:in:fillStyle:)
. Isso permite que você especifique umShape
no qual você quer que a cor de fundo preencha.Você pode escrever algo
Shape
assim:Estou simplesmente subtraindo o caminho criado por um retângulo arredondado inserido de um não inserido.
Então
subtracting
está 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.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:
com:
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:
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.
HStack
como vista base, como você já estava fazendo.HStack
ou aplique preenchimento para restringir seu tamanho dentro do espaço disponível.HStack
e aplique preenchimento conforme necessário.HStack
, trace sua borda com uma linha de espessura adequada.Spacer
interiorHStack
entã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: