如何在macOS平台的SwiftUI中对齐带勾选标记的菜单项

解决方案 #

核心思路是让选中和未选中状态的左侧区域始终占用相同宽度的空间，避免未选中状态因缺少图标导致文本左移。

方案1：用透明度控制图标显隐（最简洁）

直接移除if-else判断，让勾选图标始终存在，未选中时设置为透明即可，图标会天然占用相同的布局空间：

struct SelectionRow: View {
    var title: String
    var isSelected: Bool
    var action: () -> Void

    var body: some View {
        Button(action: self.action) {
            HStack {
                Image("checkmark")
                    .resizable()
                    .renderingMode(.template)
                    .scaledToFit()
                    // 选中时显示，未选中时透明隐藏，始终占用布局空间
                    .opacity(isSelected ? 1 : 0)
                Text(self.title)
            }
        }.foregroundColor(Color.black)
    }
}

方案2：显式添加同尺寸占位

如果需要保留if-else分支逻辑，可以在else块中添加和勾选图标尺寸一致的透明占位：

struct SelectionRow: View {
    var title: String
    var isSelected: Bool
    var action: () -> Void
    // 统一勾选图标尺寸，避免不同资源尺寸导致的偏移
    private let iconSize: CGFloat = 16

    var body: some View {
        Button(action: self.action) {
            HStack {
                if self.isSelected {
                    Image("checkmark")
                        .resizable()
                        .renderingMode(.template)
                        .scaledToFit()
                        .frame(width: iconSize, height: iconSize)
                } else {
                    // 透明占位，和图标尺寸完全一致
                    Color.clear
                        .frame(width: iconSize, height: iconSize)
                }
                Text(self.title)
            }
        }.foregroundColor(Color.black)
    }
}

两种方案都可以实现所有菜单项文本完全对齐的效果，不需要额外调整Spacer或者文本对齐属性。

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