Início / coding / Perguntas / 78907466
Accepted
Douglas W. Palme
Asked: 2024-08-24 04:23:59 +0800 CST

A imagem do botão Swifui se estende por toda a rua

  • 772

Não tenho certeza de como fazer com que a imagem fique em um tamanho razoável, sendo novo no SwiftUI, não tenho dúvidas de que isso é totalmente minha culpa.

Captura de tela do botão

O código é o seguinte:

import SwiftUI

struct AnimalsView: View {
    var body: some View {
        NavigationStack {
            ZStack {
                VStack(spacing: 20) {
                    HStack {
                        Text("Hello")
                    }
                    HStack {
                            NavigationLink(destination: ManagementView()) {
                                ZStack {
                                    Image("Button-Normal")
                                        .resizable()
                                        .frame(width: 150, height: 50)
                                    Text("Breeding")
                                        .font(.title3)
                                        .foregroundColor(.black)
                                        .fontWeight(.medium)
                                }
                            }
                            NavigationLink(destination: AnimalsView()) {
                                ZStack {
                                    Image("Button-Normal")
                                        .resizable()
                                        .padding()
                                
                                    
                                    
                                    Text("Animals")
                                        .font(.title3)
                                        .foregroundColor(.black)
                                        .fontWeight(.medium)
                                }
                            }
                        }
                    HStack {
                        
                    }
                    HStack {
                        
                    }
                }
                
                .toolbar {
                    Button("Logout") {
                        Task {
                            let Signout = SignOutLocally()
                            await Signout.signOutLocally()
                        }
                    }
                }
            }
            .background {
                Image("Rancher1")
                    .resizable()
                    .scaledToFill()
                    .ignoresSafeArea()
            }
        }
    }
}


#Preview {
    AnimalsView()
}

O primeiro botão tem uma moldura definida com altura e largura, mas sei que a Apple sugere fortemente ficar longe disso.

Sei que alguns desenvolvedores preferem usar o NavigationLink como botão em si, e também tentei isso, mas nunca funciona corretamente. Qualquer ajuda seria apreciada.

button

1 respostas

  1. Best Answer

    Você precisa entender melhor os fundamentos do SwiftUI, como layout, combinação de visualizações e definição de estruturas. ZStacks são divertidos, mas não são a resposta para tudo.

    Tudo dentro do NavigationLink no seu caso deve ser uma estrutura que aceita um parâmetro de texto ou um botão estilizado.

    Você não precisa de um trilhão de ZStacks para este layout. Veja como fiz abaixo e compare. Observe o uso de apenas duas pilhas para atingir o layout pretendido. Deixei o fundo amarelo, você pode definir sua própria imagem como exercício.

    import SwiftUI

struct FarmView: View {
    
    @State private var path = NavigationPath()
    
    enum Destination: Hashable {
        case red
        case orange
    }
    var body: some View {
        NavigationStack(path: $path){
            VStack{
                Text("Select an interest:")
                HStack {
                    Button("Breeding"){
                        path.append(Destination.orange)
                    }
                    .buttonStyle(OrangeButtonStyle())
                    
                    Button("Animals"){
                        path.append(Destination.red)
                    }
                    .buttonStyle(OrangeButtonStyle())
                }
            }
            .toolbar {
                Button("Logout") {
                    //action here...
                }
                .tint(.black)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            .background{
                Color.yellow //or the image of your choice
                    .ignoresSafeArea()
            }
            .navigationTitle("Welcome")
            // .toolbarTitleDisplayMode(.inlineLarge)
            .navigationDestination(for: Destination.self) { destination in
                switch destination {
                    case .orange:
                        BreedingView()
                    case .red:
                        AnimalsView()
                }
            }
        }
        .tint(.white)
    }
}

struct OrangeButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundStyle(.black)
            .fontWeight(.semibold)
            .padding(.vertical, 8)
            .padding(.horizontal, 15)
            .foregroundStyle(.white)
            .background {
                LinearGradient(colors: [.white.opacity(0.9), .yellow, .orange, .orange], startPoint: .top, endPoint: .bottom)
            }
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .background {
                RoundedRectangle(cornerRadius: 12)
                    .stroke(.black.opacity(0.3), lineWidth: 10)
            }
            .scaleEffect(1.2)
            .padding()
    }
}

struct AnimalsView: View {
    var body: some View {
        ZStack{
            Color.red
                .ignoresSafeArea()
            .navigationTitle("Red View")
        }

    }
}

struct BreedingView: View {
    var body: some View {
        ZStack{
            Color.orange
                .ignoresSafeArea()
                .navigationTitle("Orange View")
        }
    }
}

#Preview {
    FarmView()
}

    Eu não usei um NavigationLink para usar um Button e mostrar como você pode controlar a navegação sem um link de navegação, o que lhe dá a flexibilidade de usar qualquer visualização, conforme necessário, ou nenhuma (e navegar alterando o caminho em uma função, como parte de qualquer lógica).

    Sugiro que você leia os tutoriais novamente e certifique-se de executar um layout básico como este sem problemas.

    insira a descrição da imagem aqui

    • 1

relate perguntas