Tenho uma visualização Toggle dentro de uma visualização 'meio arredondada' com fundo Material. Para obter o 'meio arredondado', uso .clipShape
with .rect
e o raio selecionado.
Parece que usar .clipShape
with (com parâmetros .rect
específicos ) está fazendo com que o perca a cor de fundo.radius
Toggle
Código:
ZStack {
Color.blue
Toggle("On", isOn: .constant(false))
.padding()
.frame(width: 150, height: 100)
.background(.thinMaterial)
.clipShape(
.rect(
topLeadingRadius: 20,
bottomLeadingRadius: 0,
bottomTrailingRadius: 0,
topTrailingRadius: 20
)
)
}
Se eu usar .clipShape
com RoundedRectangle(cornerRadius:)
, obtenho o fundo novamente, mas preciso que a parte inferior não seja arredondada.
Editar
Mais tarde, também precisei estender a visualização, permitindo que a parte inferior se estendesse, onde apenas o Material deveria ficar sob a área segura.
Resumindo, eu precisava incorporar o fundo 'material' dentro de outro modificador de fundo, onde eu aplico o 'material' em uma visualização 'clear color'.
Aqui está o código:
ZStack {
Color.blue
.ignoresSafeArea()
VStack {
Spacer()
Toggle("On", isOn: .constant(false))
.padding()
.frame(height: 100)
.background( // 'Regular background container
Color.clear // Apply the Material background with 'ignoresSafeArea'
.background(.thinMaterial,
in: .rect(
topLeadingRadius: 20,
bottomLeadingRadius: 0,
bottomTrailingRadius: 0,
topTrailingRadius: 20
))
.ignoresSafeArea()
)
}
}
Isso parece ser uma interação estranha entre como o SwiftUI recorta as coisas e como o UIKit renderiza o fundo do toggle. O fundo do toggle fica visível se você passar a forma que deseja para o
in:
parâmetro debackground
.