SwiftUI中如何禁用List行交互但允许行内元素响应交互？

问题 #

在SwiftUI的List条目行内放置两个NavigationLink按钮时，遇到以下问题：

• 点击按钮会显示默认蓝色边框，交互行为异常
• 点击条目行时，两个按钮会同时被触发
  由于需要实现行的展开折叠功能，无法将List替换为ScrollView，同时不想使用TapGesture。

相关代码：

var body: some View {
    List {
        HStack {
            NavigationLink("First Button") {
            }
            .background(.red)
            Spacer(minLength: 20)
            
            NavigationLink("Second Button") {
            }
            .background(.orange)
        }
        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        .listRowBackground(Color.clear)
    }
}

解决方法 #

通过以下调整可以解决问题：

• 给每个NavigationLink添加.buttonStyle(.plain)，移除默认的蓝色边框和系统按钮样式
• 给List行设置.listRowSelectionDisabled(true)，禁用行的选中行为，避免点击行时触发所有链接

修改后的代码：

var body: some View {
    List {
        HStack {
            NavigationLink("First Button") {
                // 填写目标页面内容
            }
            .background(.red)
            .buttonStyle(.plain)
            
            Spacer(minLength: 20)
            
            NavigationLink("Second Button") {
                // 填写目标页面内容
            }
            .background(.orange)
            .buttonStyle(.plain)
        }
        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        .listRowBackground(Color.clear)
        .listRowSelectionDisabled(true)
        // 可选：隐藏行分隔线，按需启用
        // .listRowSeparator(.hidden)
    }
}

说明 #

• .buttonStyle(.plain)让NavigationLink仅保留跳转功能，去除了系统默认的高亮边框和按钮交互样式，点击时只会触发自身跳转
• .listRowSelectionDisabled(true)关闭了List行的默认选中逻辑，避免点击行区域时误触内部所有NavigationLink，确保只有点击具体按钮才会触发对应跳转

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