SwiftUI技术问题：如何让List仅点击info图标触发NavigationLink？

SwiftUI的List组件会自动把包含NavigationLink的行整体变成可点击的导航触发区域，这就是你遇到整行都能跳转的原因。下面给你两种可行的解决办法：

办法一：给NavigationLink设置PlainButtonStyle #

给NavigationLink添加.buttonStyle(PlainButtonStyle())，可以取消List行的默认导航交互，让只有图标本身可点击：

NavigationStack(path: $navigationPath) {
    List {
        ForEach(aircraftVM.aircraftCollect, id: \.id) { aircraft in
            HStack{
                VStack(alignment: .leading) {
                    Text(aircraft.registration ?? "")
                    Text(aircraft.type ?? "")
                        .font(.callout)
                        .foregroundStyle(.secondary)
                    Text(aircraft.aircraftRemarks ?? "")
                        .font(.footnote)
                        .foregroundStyle(.secondary)
                }
            
                NavigationLink(value: aircraft) {
                    Image(systemName: "info.circle")
                }
                .buttonStyle(PlainButtonStyle()) // 关键代码
            }
        }
        .onDelete(perform: delete)
    }
    .navigationDestination(for: AircraftEntity.self) { aircraft in
        AircraftDatabaseDetailView(aircraft: aircraft)
    }
}

办法二：用Button手动控制导航跳转 #

如果觉得第一种方式不够灵活，可以改用Button，点击时手动往navigationPath里添加数据，同样能实现只有图标触发跳转：

NavigationStack(path: $navigationPath) {
    List {
        ForEach(aircraftVM.aircraftCollect, id: \.id) { aircraft in
            HStack{
                VStack(alignment: .leading) {
                    Text(aircraft.registration ?? "")
                    Text(aircraft.type ?? "")
                        .font(.callout)
                        .foregroundStyle(.secondary)
                    Text(aircraft.aircraftRemarks ?? "")
                        .font(.footnote)
                        .foregroundStyle(.secondary)
                }
            
                Button(action: {
                    navigationPath.append(aircraft) // 手动添加到导航路径
                }) {
                    Image(systemName: "info.circle")
                }
            }
        }
        .onDelete(perform: delete)
    }
    .navigationDestination(for: AircraftEntity.self) { aircraft in
        AircraftDatabaseDetailView(aircraft: aircraft)
    }
}

这两种方法都能让只有右侧的信息图标触发跳转，List的其他区域不会响应导航动作。

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