Sou novo no SwiftUI e estou tendo problemas para colocar minhas pilhas na ordem certa para posicionar um botão no canto superior direito.
Aqui está o que tenho até agora:
import SwiftUI
struct MainMenu: View {
var body: some View {
ZStack {
Image("RangeCattle1")
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all)
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
VStack {
Button("Management") {
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.tint(.red)
Button("Calculator") {
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.tint(.red)
}
Spacer()
.font(.title)
}
}
}
#Preview {
MainMenu()
}
Eu tentei adicionar um Hstack dentro do Z, mas ele apenas o posiciona atrás dos botões existentes ou se eu adicionar um espaçador ele o empurra para a esquerda.
Alguma sugestão? Gostaria que estivesse no canto superior direito com os botões existentes onde estão.
[EDITAR] Fiz algumas alterações e é aqui que estou. O botão de logout precisa estar no canto superior direito.
import SwiftUI
struct MainMenu: View {
var body: some View {
ZStack {
Image("RangeCattle1")
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all)
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
VStack {
VStack {
HStack {
Button("Logout") {
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.tint(.red)
}
}
VStack {
Button("Management") {
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.tint(.red)
Button("Calculator") {
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.tint(.red)
}
}
}
}
}
#Preview {
MainMenu()
}
[Editar - V2]
import Amplify
import Authenticator
import AWSCognitoAuthPlugin
import SwiftUI
@main
struct MyApp: App {
init() {
do {
try Amplify.add(plugin: AWSCognitoAuthPlugin())
try Amplify.configure()
} catch {
print("Unable to configure Amplify \(error)")
}
}
var body: some Scene {
WindowGroup {
Authenticator(
headerContent: {
Image("Final")
.resizable()
.scaledToFit()
.containerRelativeFrame(.horizontal) { size, axis in
size * 0.8
}
},
footerContent: {
Text("© 2024 The PATG Group, Inc. All Rights Reserved")
.font(.subheadline)
}
) { _ in
MainMenu()
}
}
}
struct MainMenu: View {
var body: some View {
ZStack {
HStack {
Button("Logout") {
// Need Code here
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.tint(.red)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
.padding()
VStack(spacing: 40) {
Button("Management") {
// Need Code here
}
Button("Calculator") {
// Need Code here
}
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.tint(.red)
.font(.title)
}
.background {
Image("RangeCattle1")
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all)
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
}
}
}
#Preview {
MainMenu()
}
}
A edição mais recente inclui a visualização de login principal que, uma vez concluída, leva você para a próxima visualização. Não tenho certeza se essa é a maneira correta de fazer isso, mas está funcionando.
Eu queria dar a todos a chance de comentar uma última vez antes de marcá-lo como concluído.
Eu sugeriria desaninhar o botão Logout e mostrá-lo como um filho direto do arquivo
ZStack
. Então:.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
ao botão Logout, para empurrá-lo para o canto superior direito.Image
as.background
comoZStack
, para que não afete o layout doZStack
.UIScreen.main
e.edgesIgnoringSafeArea
ambos estão obsoletos. De qualquer forma, o.frame
não é necessário quando a imagem é aplicada como plano de fundo (porque o conteúdo doZStack
já está no tamanho máximo). Em vez de.edgesIgnoringSafeArea
, useignoresSafeArea
.VStack
que os contém, em vez de duplicar os modificadores de cada botão. Na verdade, seZStack
não tiver nenhum outro conteúdo, os modificadores poderão ser aplicadosZStack
e removidos também do botão Logout.