Question

我正在使用 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(_:) 的内部工作原理。

Answer 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 !!

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

1 个答案: