如何将SwiftUI中的NavigationLink改为按钮样式实现页面跳转？

方法1：直接改造现有NavigationLink为按钮外观 #

给NavigationLink的内容添加按钮样式的UI属性，再移除默认的导航链接高亮效果：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Image("contegologo")
                
                NavigationLink(destination: ContentView2()) {
                    // 自定义按钮外观
                    Text("Tap to Begin")
                        .foregroundColor(.white)
                        .padding(.horizontal, 32)
                        .padding(.vertical, 12)
                        .background(Color.red)
                        .cornerRadius(8)
                }
                .buttonStyle(PlainButtonStyle()) // 移除导航链接默认的点击高亮
            }
        }
    }
}

方法2：用Button结合NavigationDestination（iOS 16+推荐） #

如果你的项目适配iOS 16及以上，用NavigationStack+Button+navigationDestination的组合，完全自定义按钮样式：

import SwiftUI

struct ContentView: View {
    @State private var shouldNavigate = false
    
    var body: some View {
        NavigationStack {
            VStack {
                Image("contegologo")
                
                Button(action: {
                    shouldNavigate = true
                }) {
                    Text("Tap to Begin")
                        .foregroundColor(.white)
                        .padding(.horizontal, 32)
                        .padding(.vertical, 12)
                        .background(Color.red)
                        .cornerRadius(8)
                        .shadow(radius: 2) // 可选：添加阴影增强按钮质感
                }
                .navigationDestination(isPresented: $shouldNavigate) {
                    ContentView2()
                }
            }
        }
    }
}

方法3：自定义可复用的ButtonStyle #

如果需要在多个页面复用相同按钮样式，可定义全局按钮样式：

import SwiftUI

// 自定义按钮样式
struct PrimaryButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .padding(.horizontal, 32)
            .padding(.vertical, 12)
            .background(configuration.isPressed ? Color.red.opacity(0.8) : Color.red)
            .cornerRadius(8)
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0) // 点击时缩放反馈
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Image("contegologo")
                
                NavigationLink(destination: ContentView2()) {
                    Text("Tap to Begin")
                }
                .buttonStyle(PrimaryButtonStyle())
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者TheBlazza