如何让iPad上SwiftUI按钮的Hover高亮区域匹配按钮尺寸？

在iPad使用手写笔/鼠标时，SwiftUI Toolbar中的默认Button会出现Hover高亮区域与自定义边框/背景不对齐的问题，这是因为系统默认给Toolbar按钮添加了额外的内边距和交互区域。可以通过以下两种方式解决：

方法一：自定义ButtonStyle（推荐，完全控制外观） #

通过自定义ButtonStyle，可以完全掌控按钮在不同状态（正常、悬停、按下）下的样式，确保高亮区域与按钮可视尺寸完全匹配：

struct ToolbarCustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(8) // 自定义内边距，可按需调整
            .background(configuration.isHovered ? Color.gray.opacity(0.3) : Color.clear) // 自定义hover背景
            .border(Color.red) // 自定义边框
            .contentShape(Rectangle()) // 确保交互区域与可视区域一致
    }
}

struct SOQuestionView: View {
    var body: some View {
        NavigationStack {
            Text("Hello, World!")
                .toolbar {
                    ToolbarItemGroup(placement: .principal) {
                        Button("B") {}
                            .buttonStyle(ToolbarCustomButtonStyle())
                    }
                }
        }
    }
}

方法二：调整默认Button的交互区域 #

如果不想完全自定义样式，可以通过contentShape指定交互区域，并调整padding来对齐hover高亮：

struct SOQuestionView: View {
    var body: some View {
        NavigationStack {
            Text("Hello, World!")
                .toolbar {
                    ToolbarItemGroup(placement: .principal) {
                        Button("B") {}
                            .padding(8)
                            .border(Color.red)
                            .contentShape(Rectangle()) // 将交互区域设为按钮的可视矩形
                            .hoverEffect(.highlight) // 可选：指定hover效果类型，确保与自定义样式匹配
                    }
                }
        }
    }
}

关键说明 #

• contentShape(Rectangle())：强制将按钮的交互检测区域设置为其可视边界的矩形，解决系统默认扩展交互区域的问题。
• 自定义ButtonStyle时，可根据需求修改padding、background、border的参数，确保hover状态的背景与按钮实际背景完全对齐。

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