主页 / coding / 问题 / 78907466
Accepted
Douglas W. Palme
Asked: 2024-08-24 04:23:59 +0800 CST

Swifui 按钮图像横跨整个街道

  • 772

我不确定如何让图像保持合理的大小，作为 SwiftUI 的新手，我毫不怀疑这完全是我的错。

按钮的屏幕截图

代码如下：

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()
}

第一个按钮有一个定义了高度和宽度的框架，但我知道苹果强烈建议不要这样做。

我知道有些开发人员更喜欢使用 NavigationLink 作为按钮本身，我也尝试过，但它总是无法正常工作。任何帮助都将不胜感激。

button

1 个回答

  1. Best Answer

    您需要更好地掌握 SwiftUI 基础知识，例如布局、组合视图和定义结构。ZStacks 很有趣，但它们并不是解决所有问题的答案。

    在您的情况下，NavigationLink 内的所有内容都应该是接受文本参数的结构或样式按钮。

    您不需要一万亿个 ZStack 来实现此布局。查看下面我是如何做的并进行比较。请注意，仅使用两个堆栈即可实现预期的布局。我将背景保留为黄色，您可以设置自己的图像作为练习。

    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()
}

    我没有使用 NavigationLink 来使用按钮，而是展示了如何在没有导航链接的情况下控制导航，这使您可以灵活地根据需要使用任何视图，或者根本不使用任何视图（并通过更改函数中的路径进行导航，作为任何逻辑的一部分）。

    我建议您再次阅读教程并确保您可以毫无困难地执行这样的基本布局。

    在此处输入图片描述

    • 1

相关问题