SwiftUI实现菜单选项选中图标前置（仿UIKit UIAction效果）

在SwiftUI中构建导航栏菜单时，默认选中状态的对勾图标会显示在文字右侧，与UIKit中UIAction的前置对勾效果不符。尝试通过HStack手动添加前置图标或使用Label组件，均无法覆盖系统默认的样式逻辑。

问题代码示例 #

用户尝试的两种实现方式均未达到预期：

方式1：使用Label组件

.navigationBarItems(
    leading: Button(action: { handleCloseClick() }) {
        Label("Close", systemImage: "xmark")
            .foregroundColor(Color("secondary"))
    },
    trailing:
    Menu(
        content: {
            Section(NSLocalizedString("filters", comment: "")) {
                Button(action: {}) {
                    Label(NSLocalizedString("a", comment: ""), systemImage: "checkmark")
                        .labelStyle(.titleAndIcon)
                }

                Button(action: {}) {
                    Label(NSLocalizedString("b", comment: ""), systemImage: "")
                }

                Button(action: {}) {
                    Label(NSLocalizedString("c", comment: ""), systemImage: "")
                }
            }

        },
        label: {
            Image(systemName: "line.3.horizontal.decrease.circle")
                .foregroundColor(Color("secondary"))
        }
    )
)

方式2：使用HStack组合图标与文本

Section(NSLocalizedString("filters", comment: "")) {
    Button(action: {}) {
        HStack {
            Image(systemName: "checkmark")
            Text(NSLocalizedString("A", comment: ""))
        }
    }
}

核心原因 #

SwiftUI的Menu组件会自动接管内部Button的选中状态样式，手动添加的图标会被系统默认的右侧对勾覆盖，且无法通过常规方式修改默认图标位置。

解决方法 #

通过手动维护选中状态+禁用系统默认样式的方式，实现前置对勾效果：

完整实现代码

// 定义选中状态变量
@State private var selectedFilter: String = "a"

// 导航栏菜单实现
.navigationBarItems(
    leading: Button(action: { handleCloseClick() }) {
        Label("Close", systemImage: "xmark")
            .foregroundColor(Color("secondary"))
    },
    trailing: Menu(
        content: {
            Section(NSLocalizedString("filters", comment: "")) {
                // 选项A
                Button(action: {
                    selectedFilter = "a"
                }) {
                    HStack {
                        if selectedFilter == "a" {
                            Image(systemName: "checkmark")
                        }
                        Text(NSLocalizedString("a", comment: ""))
                    }
                }
                .buttonStyle(PlainButtonStyle())
                
                // 选项B
                Button(action: {
                    selectedFilter = "b"
                }) {
                    HStack {
                        if selectedFilter == "b" {
                            Image(systemName: "checkmark")
                        }
                        Text(NSLocalizedString("b", comment: ""))
                    }
                }
                .buttonStyle(PlainButtonStyle())
                
                // 选项C
                Button(action: {
                    selectedFilter = "c"
                }) {
                    HStack {
                        if selectedFilter == "c" {
                            Image(systemName: "checkmark")
                        }
                        Text(NSLocalizedString("c", comment: ""))
                    }
                }
                .buttonStyle(PlainButtonStyle())
            }
        },
        label: {
            Image(systemName: "line.3.horizontal.decrease.circle")
                .foregroundColor(Color("secondary"))
        }
    )
)

代码说明

1. 状态维护：通过@State变量selectedFilter记录当前选中的菜单选项
2. 自定义布局：使用HStack将对勾图标与文本前置组合，根据选中状态控制图标显示
3. 禁用默认样式：给每个Button添加.buttonStyle(PlainButtonStyle())，取消系统默认的右侧对勾样式

优化封装（可选）

为了简化代码，可封装自定义菜单选项组件：

struct SelectableMenuItem: View {
    let title: String
    let isSelected: Bool
    let onTap: () -> Void
    
    var body: some View {
        Button(action: onTap) {
            HStack {
                if isSelected {
                    Image(systemName: "checkmark")
                }
                Text(title)
            }
        }
        .buttonStyle(PlainButtonStyle())
    }
}

使用时只需调用：

SelectableMenuItem(
    title: NSLocalizedString("a", comment: ""),
    isSelected: selectedFilter == "a",
    onTap: { selectedFilter = "a" }
)

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