更改可点击按钮区域的大小 – contentShape(_:) 不起作用

Posted 2023-02-24

【中文标题】更改可点击按钮区域的大小 – contentShape(_:) 不起作用

【英文标题】：Changing size of tappable Button area – contentShape(_:) not working

【发布时间】：2021-01-13 17:15:33

【问题描述】：

我正在使用 TabView(selection:) 在 SwiftUI 中创建一个自定义标签栏，并将默认标签隐藏在 ContentView 的 init 中（我知道这不是一个好习惯）。

我在标签视图中有两个标签按钮，如下所示：

HStack(spacing: 0) 
    Button(action:  selectedTab = .history  ) 
        EmptyView()
    
    .buttonStyle(TabButtonStyle(systemImage: "rectangle.stack.person.crop", tab: .history, currentTab: selectedTab))
    
    Spacer()
    
    Button(action:  selectedTab = .profile ) 
        EmptyView()
    
    .buttonStyle(TabButtonStyle(systemImage: "person.crop.circle", tab: .profile, currentTab: selectedTab))

.overlay(tapButton)
.padding(.horizontal, 50)
.padding(.vertical, 10)
.padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)
.ignoresSafeArea(.all, edges: .bottom)

tapButton 是覆盖在顶部的自定义选项卡按钮，填充用于重新创建默认选项卡栏的尺寸。

使用TabButtonStyle（当用户按下图像而不是松开手指后，图像切换到其填充选项的自定义行为所必需的）如下：

struct TabButtonStyle: ButtonStyle 
    let systemImage: String
    let tab: Tab
    var currentTab: Tab
    
    func makeBody(configuration: Configuration) -> some View 
        return Image(systemName: configuration.isPressed || tab == currentTab ? "\(systemImage).fill" : systemImage)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 25, height: 25)
    

虽然这就像一个魅力，但可点击区域最终只是图像，对于我们的手指来说太小而且太挑剔了。改变它的常用方法是添加 contentShape(_:) 修饰符 - 但是，当我添加它时（添加到 TabButtonStyle 或按钮本身之后），按钮不再可点击。无论我在参数中给出的形状如何，它都不会响应点击。

我在这里做错了什么，也许是因为EmptyView？即使没有contentShape(_:) 它也能正常工作？这可能是由于contentShape(_:) 的内部运作所致。

【参考方案1】：

添加填充适用于 Xcode 12.1 / ios 14.1

return Image(systemName: configuration.isPressed || tab == currentTab ? "\(systemImage).fill" : systemImage)
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 25, height: 25)
    .padding()                      // << here !!