SwiftUI 列表项同时包含Link与NavigationLink点击冲突如何解决？

问题原因 #

SwiftUI 的List默认会将整行的点击事件分发给行内所有可交互控件，Link和NavigationLink本质都属于按钮类组件，因此会出现点击行任意位置同时触发两个跳转的异常表现。

解决方案 #

给两个可交互组件单独指定无样式按钮类型，同时拦截整行的默认点击分发逻辑即可，修改后的代码如下：

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                HStack {
                    Link(
                        "Link",
                        destination: URL(string: "https://www.apple.com")!
                    )
                    // 仅组件自身区域被点击时才触发动作
                    .buttonStyle(.borderless)

                    NavigationLink(
                        "Other View",
                        destination: Text("Hello from other view")
                    )
                    .buttonStyle(.borderless)
                }
                // 拦截整行默认点击，避免全局触发所有行内控件
                .onTapGesture {}
            }
        }
    }
}

如果需要兼容iOS 14及更低版本，将.buttonStyle(.borderless)替换为.buttonStyle(PlainButtonStyle())即可实现相同效果。

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