Sou iniciante no SwiftUI e estou tentando entender como posso manter uma visualização centralizada horizontalmente na tela do dispositivo, ao mesmo tempo em que ancorar uma visualização adicional na borda posterior (sem descentralizar a visualização original).
Tenho um protótipo que funciona, mas é um pouco feio e depende de "onGeometryChange" para rastrear o tamanho da visualização centralizada a fim de deslocar a visualização adjacente na quantidade correta. O motivo pelo qual isso funciona é que usar offset não altera a geometria da ZStack que a contém, que considera que a visualização adjacente ocupa a mesma posição centralizada que a primeira.
Embora minha abordagem pareça funcionar, ela parece um pouco desastrosa, pois depende de vários ciclos de layout (um para criar o layout do ZStack e da visualização centralizada, depois ler a alteração da geometria e, por fim, atualizar a posição da visualização adjacente). Além disso, as dimensões do contêiner ZStack não incluem o deslocamento da visualização adjacente.
struct ContentView: View {
@State private var centeredLabelWidth: CGFloat = .zero
@State private var offsetLabelWidth: CGFloat = .zero
var body: some View {
ZStack {
Text("Centered Label")
.border(Color.blue)
.padding(1)
.onGeometryChange(for: CGFloat.self) { $0.size.width } action: {
centeredLabelWidth = $0
}
Text("Adjacent Label")
.border(Color.red)
.padding(1)
.onGeometryChange(for: CGFloat.self) { $0.size.width } action: {
offsetLabelWidth = $0
}
.offset(x: centeredLabelWidth / 2 + offsetLabelWidth / 2)
}
}
}
Agradeço muito qualquer contribuição da comunidade!
Em geral, isso pode ser feito colocando a visualização que você deseja mover como a
overlay
visualização que você deseja manter fixa, com alinhamento X, e então alterando o XalignmentGuide
da visualização de sobreposição para um guia de alinhamento Y diferente."Rótulo Adjacente" pode ser sobreposto ao "Rótulo Centralizado" com alinhamento
.trailing
. Isso sobrepõe os lados finais desses rótulos. Em seguida, você altera o guia de alinhamento final do "Rótulo Adjacente" para o seu lado inicial. Agora, o lado inicial do "Rótulo Adjacente" se sobrepõe ao lado final do "Rótulo Centralizado".Observe que a visualização de sobreposição ("Rótulo Adjacente") terá um tamanho proposto igual ao da visualização inferior ("Rótulo Centralizado"). Se isso causar efeitos indesejados na disposição da visualização de sobreposição, você pode aplicar modificadores a ela, fazendo com que ela ignore o tamanho proposto de uma forma ou de outra, como
fixedSize
, ou umframe
.Se a segunda vista for muito simples, você pode adicionar uma terceira vista invisível à esquerda.