SwiftUI中List内嵌Menu实现整行可点击且菜单位置正常的方案

问题分析 #

在List中直接嵌入Menu时，默认仅文本区域可触发菜单；扩展点击区域至整行后，又会出现菜单弹窗位置偏移的问题——这是因为Menu的弹窗锚点默认绑定到label的整体范围，而非原文本位置。

原生实现方案（无需自定义Menu） #

苹果「提醒事项」的效果可通过SwiftUI原生API实现，分版本适配：

1. iOS 17+ 最优解：使用menuAnchor修饰符 #

利用iOS 17新增的menuAnchor(_:)可以直接指定菜单的弹出锚点，结合扩展点击区域的设置，完美解决需求：

List {
    Menu {
        Button("标记为完成") { /* 执行操作 */ }
        Button("移至文件夹") { /* 执行操作 */ }
        Button("删除") { /* 执行操作 */ }
    } label: {
        // 用HStack+Spacer让文本左对齐，同时占满整行宽度
        HStack {
            Text("待办事项")
            Spacer()
        }
        // 扩展点击区域到整个HStack范围
        .contentShape(Rectangle())
        // 让label占满整行高度
        .frame(maxHeight: .infinity)
    }
    // 去掉行内边距，让点击区域完全覆盖List行
    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
    // 指定菜单从文本左侧位置弹出，和原生应用一致
    .menuAnchor(.leading)
}

2. iOS 16及以下兼容方案 #

对于低版本系统，可以通过ZStack分离点击区域与菜单锚点，让整行可点击的同时，菜单锚点保持在文本位置：

List {
    ZStack(alignment: .leading) {
        // 透明的整行点击触发层
        Color.clear
            .contentShape(Rectangle())
            .onTapGesture {
                isMenuPresented = true
            }
        
        // 菜单的实际label，用于锚定弹窗位置
        Menu(isPresented: $isMenuPresented) {
            Button("标记为完成") { /* 执行操作 */ }
            Button("移至文件夹") { /* 执行操作 */ }
            Button("删除") { /* 执行操作 */ }
        } label: {
            Text("待办事项")
        }
    }
    .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)) // 保持系统默认边距
    .frame(maxHeight: .infinity)
}
@State private var isMenuPresented = false

关键说明 #

• 扩展点击区域时，需使用.contentShape(Rectangle())确保整个视图范围可响应点击
• iOS 17+的menuAnchor支持多种锚点位置（如.leading、.trailing、.center），可根据需求调整
• 兼容方案中通过isMenuPresented绑定菜单的显隐，实现点击整行触发菜单，同时弹窗锚点绑定到原文本

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