SwiftUI中NavigationLink在Watch端出现多余内边距该如何解决

watchOS 上的 NavigationLink 默认继承了按钮的系统样式，会自动添加 8px 的默认内边距，这是系统预设的样式行为，不是代码逻辑错误。以下是比硬编码负内边距更稳妥的解决方案，按推荐优先级排序：

方案1：使用 PlainButtonStyle 清除默认样式（最推荐） #

直接给 NavigationLink 添加 .buttonStyle(.plain) 修饰符，即可移除系统默认按钮样式附加的所有额外内边距、默认高亮效果，完全保留自定义视图的尺寸和样式。
修改后的对应代码片段：

NavigationLink(destination: Text("")) {
    Text("BB . . . . . . . . . . . . . . . . . . . . . . .")
        .font(.title3)
        .foregroundColor(.white)
        .background(Color.blue)
}
.buttonStyle(.plain) // 新增该行即可
.background(Color.red)

方案2：使用 navigationDestination 声明式跳转（适用于 watchOS 8+/iOS 15+） #

不需要将视图封装到 NavigationLink 内部，通过绑定选中状态的方式实现跳转，从根源上避免 NavigationLink 自带样式的影响：
完整实现代码：

struct ContentView: View {
    let testArray = [1,2,3,4,5]
    @State private var selectedElement: Int? // 绑定选中的跳转目标
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    ForEach(testArray, id: \.self) { element in
                        Text("BB . . . . . . . . . . . . . . . . . . . . . . .")
                            .font(.title3)
                            .foregroundColor(.white)
                            .background(Color.blue)
                            .onTapGesture {
                                selectedElement = element // 点击赋值触发跳转
                            }
                    }
                }.background(Color.black)
            }.background(Color.gray)
            .navigationDestination(item: $selectedElement) { element in
                Text("目标页：\(element)") // 自定义对应目标视图
            }
        }
    }
}

方案3：修复 ZStack 变通方案的点击区域问题 #

如果你要继续使用 ZStack 类的变通方案，只需要给可点击区域添加 .contentShape(Rectangle()) 修饰符，即可让整个 ZStack 区域响应点击，不会只有小范围可点击：
对应代码片段：

@State private var isActive = false

// 视图部分
ZStack {
    NavigationLink(destination: Text(""), isActive: $isActive) {
        EmptyView()
    }
    Text("BB . . . . . . . . . . . . . . . . . . . . . . .")
        .font(.title3)
        .foregroundColor(.white)
        .background(Color.blue)
}
.contentShape(Rectangle()) // 新增该行，指定整个矩形区域响应点击
.onTapGesture {
    isActive = true
}

以上方案均为系统原生支持的实现方式，不会因为后续系统版本更新出现适配问题，稳定性远高于硬写 -8px 负内边距的临时规避方案。

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