SwiftUI 键盘工具栏按钮如何全屏显示？

2024-03-18 09:55:22

SwiftUI键盘工具栏中忽略水平安全区域

简介

在使用 ToolbarItem(placement: .keyboard) 在键盘上提供按钮时，我们可能会遇到一个问题：按钮不能在横向模式下实现 iPhone 的全屏。这可能导致按钮外观不佳，如上图所示。

问题原因

当使用 ToolbarItem(placement: .keyboard) 时，按钮会自动遵循系统的安全区域，这意味着它会在设备顶部留出一些空间，以容纳刘海或传感器等元素。在纵向模式下，这通常不是问题，因为安全区域的顶部和底部是相同的。然而，在横向模式下，安全区域的顶部变窄，而底部变宽。这导致按钮在顶部留出更多空间，导致其无法全屏显示。

解决方案

要解决此问题，我们需要一种方法来忽略按钮的水平安全区域。在 SwiftUI 中，我们可以使用 .ignoresSafeArea() 修饰符来实现这一目的。具体而言，我们可以使用以下代码：

.ignoresSafeArea(.all, edges: .horizontal)

这将告诉 SwiftUI 忽略按钮的水平安全区域，从而使其能够全屏显示。

代码示例

以下是一个经过更新的示例代码，演示如何使用 .ignoresSafeArea() 修饰符来忽略按钮的水平安全区域：

struct ContentView: View {

  @State private var text: String = ""
  @FocusState private var isTextFieldFocused: Bool

  var body: some View {
    VStack {
      Text("A Text Field Below.")
      TextField("Enter text here.", text: $text)
        .frame(height: 44)
        .textFieldStyle(.roundedBorder)
        .focused($isTextFieldFocused)
    }
    .onAppear {
      self.isTextFieldFocused = true
    }
    .toolbar {
      ToolbarItem(placement: .keyboard) {
        _keyboardDismissButton()
      }
    }
  }

  @ViewBuilder
  private func _keyboardDismissButton() -> some View {
    Button {
      self.isTextFieldFocused = false
    } label: {
      Image(systemName: "keyboard.chevron.compact.down")
        .foregroundColor(.secondary)
        .frame(height: 44)
        .frame(maxWidth: .infinity)
        .contentShape(Rectangle())
        .ignoresSafeArea(.all, edges: .horizontal)
    }
    .buttonStyle(.plain)
  }
}