VisionOS中如何修改NavigationLink的圆角半径？已尝试.buttonBorderShape无效

在VisionOS开发场景下，想要减小NavigationLink的圆角半径（注意是链接而非按钮），尝试了.buttonBorderShape(.roundedRectangle(radius: 10))但未生效，目标是实现类似小圆角/直角的外观。

问题原因 #

.buttonBorderShape是针对Button控件的样式修饰符，NavigationLink的默认样式逻辑和普通Button不同，直接给内部子视图添加这个修饰符不会生效。

可行解决方案 #

方法1：重置NavigationLink样式+自定义视图圆角

先给NavigationLink添加.navigationLinkStyle(.plain)取消默认链接样式，再在内部视图上直接设置圆角，同时可添加背景色明确点击区域：

修改后的DetailsPlalistView代码：

struct DetailsPlalistView: View {
    @Binding var mode: stateMode
    var playlist: PlayListModel
    var reader: GeometryProxy
    var body: some View {
        VStack{
            modeIcon
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)
                .padding()
                .foregroundColor(.white)
            Text(playlist.playlistName)
                .font(.headline)
                
        }
        .frame(width: reader.size.width/4 , height: reader.size.height/4)
        .background(Color.gray.opacity(0.2)) // 明确点击区域背景
        .cornerRadius(10) // 设置目标圆角半径
    }
    
    private var modeIcon: Image {
        switch mode {
        case .deleteMode:
            return Image(systemName: "trash.circle.fill")
        case .updateMode:
            return Image(systemName: "arrow.clockwise.circle.fill")
        case .normalMode:
            return Image(systemName: "tv")
        }
    }
}

修改NavigationLink的使用代码：

ScrollView {
    LazyVGrid(columns: columns, spacing: 20) {
        ForEach(playlists) { playlist in
            NavigationLink(value: playlist, label: {
                DetailsPlalistView(mode: $mode, playlist: playlist, reader: reader)
            })
            .navigationLinkStyle(.plain) // 取消默认链接样式
        }
    }
}

方法2：自定义NavigationLink的ButtonStyle

如果需要保留原生点击交互反馈，可自定义ButtonStyle控制圆角：

struct CustomNavigationLinkStyle: ButtonStyle {
    let radius: CGFloat
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(configuration.isPressed ? Color.gray.opacity(0.4) : Color.gray.opacity(0.2))
            .cornerRadius(radius)
    }
}

// 使用方式
NavigationLink(value: playlist, label: {
    DetailsPlalistView(mode: $mode, playlist: playlist, reader: reader)
})
.buttonStyle(CustomNavigationLinkStyle(radius: 10))

说明 #

方法1简单直接，适合完全自定义外观的场景；方法2保留了原生点击反馈，更贴近系统控件体验，可根据需求选择。

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