macOS应用隐藏Menu指示器后按钮容器截断，如何保留悬停容器？

问题场景 #

在macOS应用的ToolbarItemGroup中使用Menu实现内容列表排序选项，代码如下：

Menu {
    ForEach(SortOption.allCases, id: \.self) { option in
        Toggle(isOn: Binding<Bool>(
            get: { userSettings.sortOption == option },
            set: { newValue in
                if newValue {
                    userSettings.sortOption = option
                }
            })) {
            Text(option.description)
        }
    }
}
label: {
    Image(systemName: "arrow.up.arrow.down")
}
.menuIndicator(.hidden)

使用.menuIndicator(.hidden)移除默认Chevron后，标签图片的悬停容器出现截断；保留指示器时，Chevron样式丑陋且与图标间距过近，需要在移除指示器的同时保持悬停容器完整。

解决方案 #

通过给Menu的label视图添加占位空间，补足原本指示器占用的宽度，即可让悬停容器恢复完整尺寸。

方案1：添加尾部内边距 #

直接给图标添加尾部padding，模拟指示器的空间：

Menu {
    ForEach(SortOption.allCases, id: \.self) { option in
        Toggle(isOn: Binding<Bool>(
            get: { userSettings.sortOption == option },
            set: { newValue in
                if newValue {
                    userSettings.sortOption = option
                }
            })) {
            Text(option.description)
        }
    }
}
label: {
    Image(systemName: "arrow.up.arrow.down")
        .padding(.trailing, 8) // 适配原指示器的宽度
}
.menuIndicator(.hidden)

方案2：用Spacer占位 #

通过HStack包裹图标和Spacer，更精准控制占位宽度：

Menu {
    ForEach(SortOption.allCases, id: \.self) { option in
        Toggle(isOn: Binding<Bool>(
            get: { userSettings.sortOption == option },
            set: { newValue in
                if newValue {
                    userSettings.sortOption = option
                }
            })) {
            Text(option.description)
        }
    }
}
label: {
    HStack(spacing: 0) {
        Image(systemName: "arrow.up.arrow.down")
        Spacer(minLength: 8) // 固定占位宽度
    }
}
.menuIndicator(.hidden)

原理说明 #

macOS的Menu组件默认会为指示器预留固定宽度的布局空间，隐藏指示器后该空间被自动收回，导致悬停容器的宽度被压缩。手动添加padding或Spacer后，label的整体宽度与带指示器时一致，悬停容器就能保持完整的交互区域尺寸。

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