macOS中NavigationLink选中状态区域超出底层视图问题求助

问题重现 #

在macOS双列NavigationSplitView的侧边栏中，使用NavigationLink包裹自定义CaseRow视图展示项目列表。为行添加浅灰色背景和悬停状态后，选中时NavigationLink的默认蓝色高亮区域比自定义行的灰色背景范围更大，导致选中/未选中状态下的行尺寸不一致。尝试过设置PlainButtonStyle()、调整padding、修改accentColor/tint等方法均无效。

解决方案 #

核心思路是让自定义行视图完全控制行的尺寸和背景，同时利用原生环境变量处理选中状态，避免系统默认的行内边距和高亮区域干扰：

1. 移除系统List行的默认内边距，让自定义视图直接填充行空间；
2. 通过环境变量@Environment(\.isSelected)获取行的选中状态，在自定义视图内统一处理背景色；
3. 用原生hoverEffect实现悬停状态，保持组件原生性以便后续移植iOS。

代码示例 #

自定义行视图CaseRow

struct CaseRow: View {
    let item: String
    // 利用环境变量获取当前行的选中状态
    @Environment(\.isSelected) private var isSelected
    
    var body: some View {
        HStack {
            Text(item)
                .padding(.vertical, 8)
                .padding(.horizontal, 12)
        }
        // 根据选中状态切换背景色
        .background(isSelected ? Color.blue : Color.gray.opacity(0.2))
        .cornerRadius(6)
        // 行与侧边栏边缘的间距
        .padding(4)
    }
}

侧边栏与NavigationSplitView布局

struct ContentView: View {
    let items = ["项目1", "项目2", "项目3"]
    @State private var selectedItem: String?
    
    var body: some View {
        NavigationSplitView {
            List(items, id: \.self, selection: $selectedItem) { item in
                NavigationLink(value: item) {
                    CaseRow(item: item)
                }
                // 移除系统默认的行内边距，让自定义视图完全控制行尺寸
                .listRowInsets(EdgeInsets())
                // 原生悬停高亮效果
                .hoverEffect(.highlight)
            }
            .listStyle(.sidebar)
        } detail: {
            Text(selectedItem != nil ? "详情：\(selectedItem!)" : "请选择一个项目")
                .padding()
        }
        .navigationSplitViewStyle(.balanced)
    }
}

为什么之前的方法无效？ #

• PlainButtonStyle()仅修改NavigationLink内部按钮的点击样式，不影响List行的默认内边距和高亮区域范围；
• 调整自定义视图的padding只是修改内部元素间距，系统List行仍保留默认的外部insets，导致高亮区域超出自定义背景；
• accentColor/tint在macOS侧边栏List中仅控制文本、图标等强调色，不影响选中行的背景高亮色；
• 直接给NavigationLink添加样式无法覆盖List行的原生布局逻辑，高亮区域仍由系统控制。

兼容性说明 #

该方案完全使用SwiftUI原生组件和环境变量，iOS端只需调整部分样式细节（如listStyle改为.insetGrouped等）即可快速移植，无需额外绑定跟踪选中状态。

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