SwiftUI列表行点击不同区域跳转对应导航目标的实现问题

初始实现的列表行效果：

需求为列表行分区域触发不同导航：

• 点击头像：压入ProfileView跳转个人主页
• 点击列表行其余位置：压入PostDetailView跳转帖子详情

尝试过程遇到的问题 #

1. 直接给头像添加NavigationLink时，头像frame被异常修改，列表自动追加展开指示箭头，对应代码：

NavigationLink {
  ProfileView(user: post.user)
} label: {
  ProfileImage(url: post.user.profileImage)
}

对应异常效果：

2. 给整个PostView追加导航链接后，列表行出现两个展开指示箭头，对应代码：

NavigationLink {
  PostDetailView(post: post)
} label: {
  PostView(post: post)
}

对应异常效果：

3. 尝试hack方案隐藏箭头：将PostView和透明度为0的空NavigationLink嵌套在ZStack中，但导航触发逻辑不稳定，点击后随机跳转两个页面，无法达到预期，对应代码：

ZStack {
  PostView(post: post)

  NavigationLink {
    PostDetailView(post: post)
  } label: {
    EmptyView()
  }
  .opacity(0.0) //workaround to hide disclosure indicator
}

List默认会自动给行内的NavigationLink添加展开箭头、调整布局，同一行放多个NavigationLink还会出现事件冲突，不要直接在内容层嵌套多个带Label的NavigationLink，用状态绑定+隐藏导航触发器+手势控制点击的方式实现即可：

1. 给列表行设置 plain 按钮样式、隐藏默认分割线，消除系统默认的导航链接样式干扰
2. 定义两个布尔状态分别控制两个页面的导航激活
3. 放置两个无UI的NavigationLink绑定对应状态，作为导航触发器
4. 头像和其余内容区域分别添加点击手势，触发对应状态变更，同时给可点击区域设置contentShape(Rectangle())保证点击范围正确，避免事件穿透

完整实现代码：

struct PostListCell: View {
    let post: Post
    // 导航激活状态
    @State private var goToProfile = false
    @State private var goToPostDetail = false

    var body: some View {
        ZStack(alignment: .leading) {
            // 隐藏的导航触发器 不参与布局
            NavigationLink(isActive: $goToProfile) {
                ProfileView(user: post.user)
            } label: { EmptyView() }
            
            NavigationLink(isActive: $goToPostDetail) {
                PostDetailView(post: post)
            } label: { EmptyView() }

            // 单元格实际内容
            HStack(alignment: .top, spacing: 12) {
                // 头像单独响应点击
                ProfileImage(url: post.user.profileImage)
                    .onTapGesture {
                        goToProfile = true
                    }
                    .contentShape(Rectangle())

                // 其余内容区域
                VStack(alignment: .leading, spacing: 6) {
                    Text(post.user.nickname)
                        .font(.subheadline.bold())
                    Text(post.content)
                        .font(.body)
                    // 其他帖子内容组件
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .contentShape(Rectangle())
                .onTapGesture {
                    goToPostDetail = true
                }
            }
            .padding(.vertical, 10)
        }
        // 消除List默认单元格样式影响
        .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
        .buttonStyle(.plain)
        .listRowSeparator(.hidden)
    }
}

iOS16+版本也可以用navigationDestination(for:)配合路由枚举实现，逻辑一致，核心是把导航触发逻辑和UI内容分离，避免List对行内NavigationLink的默认处理导致样式和交互异常。

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