SwiftUI Menu内嵌Picker：如何实现选中项展示（仿提醒APP）

想要在SwiftUI的Menu组件里内嵌Picker时，实现类似苹果提醒APP「Sort By」那样，在子Menu的标签上直接显示当前选中的选项，但现有代码无法达成这个效果。

修改思路 #

核心是让子Menu的标签文本动态绑定当前选中的Picker选项，而不是固定显示“Group By”或“Sort By”。通过状态变量group和sort的值，映射出对应的选中文本，替换原有的固定标签内容即可。

修改后的完整代码 #

// 假设你已在视图中声明以下状态变量（根据实际类型调整）
// @State private var group = 0
// @State private var sort = 0
// @State private var inboxList: SomeType?

// 用字典映射状态值与显示文本，后续扩展选项更方便
private let groupLabels = [0: "None", 1: "Type"]
private let sortLabels = [0: "Name", 1: "Priority"]

private func menuButton() -> some View {
    Menu {
        Menu {
            Picker(selection: $group, label: Text("Grouping options")) {
                Text("None").tag(0)
                Text("Type").tag(1)
            }
        } label: {
            // 动态显示当前选中的分组选项
            Label("\(groupLabels[group] ?? "None")", systemImage: "square.grid.3x1.below.line.grid.1x2")
        }
        Menu {
            Picker(selection: $sort, label: Text("Sorting options")) {
                Text("Name").tag(0)
                Text("Priority").tag(1)
            }
        } label: {
            // 动态显示当前选中的排序选项
            Label("\(sortLabels[sort] ?? "Name")", systemImage: "arrow.up.arrow.down")
        }
        Divider()
        Button {
            toggleInbox()
        } label: {
            Label(inboxList?.isHidden == false ? "Hide Inbox" : "Show Inbox", systemImage: inboxList?.isHidden == false ? "eye.slash" : "eye")
        }
    } label: {
        Image(systemName: "ellipsis.circle.fill")
            .font(.custom("Button", size: 22))
            .foregroundStyle(.blue, Color(UIColor.systemGray5))
    }
}

private func toggleInbox() {
    // 你的收件箱显示/隐藏逻辑
}

效果说明 #

1. 当选中Picker里的选项时，group或sort状态变量会更新，子Menu的标签文本会自动同步为当前选中的内容，和苹果提醒APP的「Sort By」效果完全一致。
2. 用字典映射状态值与文本的方式，后续新增选项时只需修改字典，无需调整多处代码，维护性更强。

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