如何调整SwiftUI菜单，让选中选项的复选标记显示在左侧？

我遇到两个问题：

• 尽管在HStack中把复选标记放在首位，但选中的Menu选项里它仍显示在右侧，希望让它显示在左侧。
• 曾尝试使用.menu样式的Picker，但无法更新选中索引，疑惑是否只能通过onReceive检测变化？

以下是当前的代码：

public struct DropDownRow<TitleContent: View, SubtitleContent: View>: View {
    private let titleContent: TitleContent
    private let subtitleContent: SubtitleContent
    private let menuOptions: [String]?
    @Binding private var selectedIndex: Int
    private var onSelection: ((Int, String) -> Void)?
    private var item: String?
    
    public var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                titleContent
                    .font(.title)
                    .foregroundColor(.white)
                    .fontWeight(.regular)
                subtitleContent
                    .font(.caption)
                    .foregroundColor(.gray)
                    .fontWeight(.regular)
            }
            Spacer()
            Menu {
                if let options = menuOptions {
                    ForEach(options.indices, id:\.self) { index in
                        Button {
                            self.selectedIndex = index
                            if let type = item {
                                self.onSelection?(index, type)
                            }
                        } label: {
                            HStack{
                                if index == selectedIndex {
                                    Image(systemName: "checkmark")
                                }
                                Text(options[index])
                                Spacer()
                            }
                        }
                    }
                }
            } label: {
                HStack {
                    Image(systemName: "chevron.down")
                        .resizable()
                        .renderingMode(.template)
                        .aspectRatio(contentMode: .fit)
                        .foregroundColor(.gray)
                        .frame(width: 16, height: 16, alignment: .trailing)
                }
                .padding(.leading, 16)
                .padding([.trailing, .vertical], 6)
            }
        }
        .padding(16)
        .cornerRadius(10)
        .accessibilityAddTraits(.isButton)
        .noListSeparators()
    }
}

解决方案 #

1. 调整Menu选项中复选标记的位置 #

SwiftUI的Menu Button默认会自动调整内部元素布局，把选中标记放在右侧。要让复选标记显示在文本左侧，只需给Button的label容器添加frame(maxWidth: .infinity, alignment: .leading)，强制内容左对齐并占满整个宽度：

修改后的Button部分代码：

Button {
    self.selectedIndex = index
    if let type = item {
        self.onSelection?(index, type)
    }
} label: {
    HStack(alignment: .center, spacing: 8) {
        if index == selectedIndex {
            Image(systemName: "checkmark")
                .foregroundColor(.accentColor) // 可选：设置复选标记的主题色
        }
        Text(options[index])
    }
    .frame(maxWidth: .infinity, alignment: .leading) // 关键：强制左对齐并占满宽度
}

2. 修复Picker的选中索引绑定问题 #

.menu样式的Picker可以直接通过@Binding更新选中索引，不需要用onReceive，只需确保给每个选项设置正确的tag值：

替代Menu的Picker实现示例：

// 替换原代码中的Menu部分
Picker("", selection: $selectedIndex) {
    if let options = menuOptions {
        ForEach(options.indices, id: \.self) { index in
            Text(options[index])
                .tag(index) // 必须设置与selectedIndex类型匹配的tag
        }
    }
}
.pickerStyle(.menu)
.onChange(of: selectedIndex) { newIndex in
    // 选中变化时触发回调
    if let type = item {
        onSelection?(newIndex, type)
    }
}
// 保持原有的label样式
.labelsHidden() // 隐藏Picker默认标签
.overlay(
    HStack {
        Image(systemName: "chevron.down")
            .resizable()
            .renderingMode(.template)
            .aspectRatio(contentMode: .fit)
            .foregroundColor(.gray)
            .frame(width: 16, height: 16)
    }
    .padding(.leading, 16)
    .padding([.trailing, .vertical], 6)
)

这样Picker会自动同步selectedIndex的变化，同时保持和原Menu一致的外观。

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