visionOS下SwiftUI NavigationLink仅显示图片的适配问题

问题解决方法 #

方法1：移除NavigationLink默认按钮样式

默认情况下NavigationLink会自带按钮样式，导致点击范围超出图片区域。只需给NavigationLink添加.buttonStyle(PlainButtonStyle())，即可消除额外的可点击区域，仅保留图片作为交互入口：

NavigationLink(destination: FenderXperience()) {
    Image("Fender II")
        .resizable()
        .scaledToFit()
        .frame(width: 300, height: 95)
        .overlay(
            RoundedRectangle(cornerRadius: 0)
                .stroke(Color.white, lineWidth: 2))
}
.buttonStyle(PlainButtonStyle()) // 新增该行，移除默认按钮样式

方法2：使用导航目标结合点击手势（更灵活）

如果需要完全脱离NavigationLink的布局约束，可以通过状态变量控制导航行为，给图片绑定点击手势：

1. 先在BrandImage结构体中添加状态变量：

struct BrandImage: View {
    @State private var shouldShowFenderView = false // 新增状态变量
    var body: some View {
        // ... 原有代码 ...
    }
}

2. 替换原有的NavigationLink为普通图片+点击手势，并在NavigationStack上绑定导航目标：

NavigationStack {
    // ... 其他品牌内容 ...
    
    Text("Fender")
        .font(.title)
        .padding(.bottom, -5)
    
    // 替换原NavigationLink为普通图片+点击手势
    Image("Fender II")
        .resizable()
        .scaledToFit()
        .frame(width: 300, height: 95)
        .overlay(
            RoundedRectangle(cornerRadius: 0)
                .stroke(Color.white, lineWidth: 2))
        .onTapGesture {
            shouldShowFenderView = true
        }
    
    // ... 其他品牌内容 ...
}
.navigationDestination(isPresented: $shouldShowFenderView) {
    FenderXperience()
}

两种方法都能实现仅图片可点击的需求：方法1简单直接，适合快速修改；方法2更灵活，便于后续扩展自定义交互逻辑。

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