如何在 SwiftUI 中使整个底部工具栏可点击？

Question

我正在尝试制作一个带有可点击文本的底部工具栏，但它不起作用。

我尝试这样做：

ToolbarItem(placement: .bottomBar) {
    Button(action: {
        print("toolbar tapped!")
    }) {
        HStack {
            Spacer()
            Text("Toolbar")
            Spacer()
        }
    }
}   

但是底栏内容完全消失了

Answer 1

您可以使用自定义

ButtonStyle

将样式应用到工具栏按钮。例如：

struct ToolbarButton: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundStyle(.link)
            .opacity(configuration.isPressed ? 0.5 : 1)
            .padding(.vertical)
            .frame(maxWidth: .infinity)
            .background(.yellow)
            .contentShape(Rectangle())
    }
}

如果注释掉黄色背景，仍然可以在工具栏的整个宽度上点击该按钮。这是由于修饰符

.contentShape

造成的。所以如果按钮没有背景，这个修饰符就很重要。

使用示例：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("Toolbar example")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button("Toolbar") {
                            print("toolbar tapped!")
                        }
                        .buttonStyle(ToolbarButton())
                    }
                }
        }
    }
}