SwiftUI中实现点击图片按钮后打开新视图的方法

你当前写好的按钮视觉样式完全不需要调整，只需要在原本留空的action闭包里补上对应导航场景的触发逻辑即可，根据项目使用的导航体系不同，有三类常用的实现方式：

iOS16+ 主流 NavigationStack 状态化跳转 #

这是目前新项目普遍采用的状态驱动导航写法，不会破坏你已调整好的按钮布局，逻辑解耦的设计也方便后续做路由拦截、返回控制。
在父视图中按三步配置即可：

• 声明导航栈的路径状态变量
• 在按钮的action回调里将目标页面对应的路由标识加入导航路径
• 配置导航路由和实际目标视图的映射关系

示例代码：

// 父视图内部
@State private var navigationPath = NavigationPath()

var body: some View {
    NavigationStack(path: $navigationPath) {
        // 完全保留你原有样式的按钮，仅补全action逻辑
        Button(action: {
            // 触发跳转，将目标视图入栈
            navigationPath.append(GiftRoute.sendPage)
        }) {
            Image("gift")
            Text("Send")
                .padding(.horizontal)
        }
        .padding()
        .foregroundColor(.white)
        .background(Color.gray)
        .cornerRadius(.infinity)
        // 配置路由对应的目标页面
        .navigationDestination(for: GiftRoute.self) { route in
            switch route {
            case .sendPage:
                SendGiftView()
            }
        }
    }
}

// 简单的路由枚举定义，标识不同跳转页面
enum GiftRoute: Hashable {
    case sendPage
}

iOS15及以下版本兼容跳转 #

如果需要覆盖低版本系统，可以通过状态变量绑定隐藏的NavigationLink触发跳转，全程不会改动你现有按钮的外观效果。
示例代码：

@State private var isShowSendPage = false

var body: some View {
    NavigationView {
        // 原有按钮样式不变，补全action
        Button(action: {
            isShowSendPage = true
        }) {
            Image("gift")
            Text("Send")
                .padding(.horizontal)
        }
        .padding()
        .foregroundColor(.white)
        .background(Color.gray)
        .cornerRadius(.infinity)
        // 隐藏的导航链接，负责实际的push跳转
        .background {
            NavigationLink(
                destination: SendGiftView(),
                isActive: $isShowSendPage
            ) {
                EmptyView()
            }
            .hidden()
        }
    }
}

模态弹窗类跳转 #

如果需要以弹窗、半屏页的形式打开新视图，不需要嵌套导航栈结构，直接通过视图修饰符绑定跳转状态即可。
示例代码：

@State private var showSendSheet = false

var body: some View {
    // 原有按钮样式不变
    Button(action: {
        showSendSheet = true
    }) {
        Image("gift")
        Text("Send")
            .padding(.horizontal)
    }
    .padding()
    .foregroundColor(.white)
    .background(Color.gray)
    .cornerRadius(.infinity)
    // 绑定sheet半屏弹窗跳转，替换成fullScreenCover即可实现全屏弹窗效果
    .sheet(isPresented: $showSendSheet) {
        SendGiftView()
    }
}

踩坑提醒：别直接把你的自定义按钮块塞到NavigationLink的label参数里就完事，NavigationLink默认会给内部视图套上系统按钮的默认内边距、高亮反馈样式，大概率会把你调好的圆角、灰背景、白字效果冲没，用状态变量触发跳转是最稳妥、能100%保留按钮外观的实现方式。

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