SwiftUI中点击TextField外部时触发onSubmit的实现问题

核心思路 #

利用@FocusState跟踪TextField的焦点状态，在点击外部区域（包括按钮）时，判断TextField是否处于聚焦状态，若处于聚焦则先触发提交逻辑，再取消焦点。

1. 同组件内实现 #

直接在当前视图中管理焦点状态，处理按钮和空白区域的点击事件：

struct ContentView: View {
  @State var name = "whatever"
  // 跟踪TextField的焦点状态
  @FocusState private var isTextFieldFocused: Bool

  // 抽离提交逻辑，便于复用
  private func submitTextField() {
    print("TextField onSubmit")
  }

  var body: some View {
    VStack {
        TextField("", text: $name)
          .onSubmit(submitTextField) // 保留原有提交触发（比如回车）
          .focused($isTextFieldFocused) // 绑定焦点状态
          .padding()

        Button(action: {
          // 点击按钮时，若TextField聚焦则先提交再取消焦点
          if isTextFieldFocused {
            submitTextField()
            isTextFieldFocused = false
          }
          print("Button")
        }) {
          Text("CLICKY")
        }
      }
      // 点击空白区域时触发提交并取消焦点
      .onTapGesture {
        if isTextFieldFocused {
          submitTextField()
          isTextFieldFocused = false
        }
      }
    }
}

2. 跨组件实现 #

如果TextField和按钮分属不同子组件，可以通过绑定传递或EnvironmentObject共享两种方式实现焦点状态的同步：

方式一：绑定传递

父组件持有焦点状态和提交逻辑，通过绑定传递给子组件：

// 父组件
struct ParentView: View {
  @State var name = "whatever"
  @FocusState private var isTextFieldFocused: Bool

  private func submitTextField() {
    print("TextField onSubmit")
  }

  var body: some View {
    VStack {
      // 传递焦点绑定和提交方法给TextField子组件
      TextFieldSubview(name: $name, isFocused: $isTextFieldFocused, onSubmit: submitTextField)
      // 传递点击逻辑给按钮子组件
      ButtonSubview(onTap: {
        if isTextFieldFocused {
          submitTextField()
          isTextFieldFocused = false
        }
        print("Button")
      })
    }
    .onTapGesture {
      if isTextFieldFocused {
        submitTextField()
        isTextFieldFocused = false
      }
    }
  }
}

// TextField子组件
struct TextFieldSubview: View {
  @Binding var name: String
  @FocusState.Binding var isFocused: Bool
  let onSubmit: () -> Void

  var body: some View {
    TextField("", text: $name)
      .onSubmit(onSubmit)
      .focused($isFocused)
      .padding()
  }
}

// Button子组件
struct ButtonSubview: View {
  let onTap: () -> Void

  var body: some View {
    Button(action: onTap) {
      Text("CLICKY")
    }
  }
}

方式二：EnvironmentObject共享（适合复杂层级）

通过ObservableObject共享焦点状态和提交逻辑，无需逐层传递绑定：

// 焦点管理类
class FocusManager: ObservableObject {
  @Published var isTextFieldFocused = false
  var onSubmit: (() -> Void)? // 存储提交逻辑
}

// 父组件
struct ParentView: View {
  @StateObject private var focusManager = FocusManager()
  @State var name = "whatever"

  private func submitTextField() {
    print("TextField onSubmit")
  }

  var body: some View {
    VStack {
      TextFieldSubview(name: $name)
      ButtonSubview()
    }
    .environmentObject(focusManager) // 注入环境对象
    .onAppear {
      focusManager.onSubmit = submitTextField // 绑定提交逻辑
    }
    .onTapGesture {
      if focusManager.isTextFieldFocused {
        focusManager.onSubmit?()
        focusManager.isTextFieldFocused = false
      }
    }
  }
}

// TextField子组件
struct TextFieldSubview: View {
  @Binding var name: String
  @EnvironmentObject var focusManager: FocusManager

  var body: some View {
    TextField("", text: $name)
      .onSubmit {
        focusManager.onSubmit?()
      }
      .focused($focusManager.isTextFieldFocused)
      .padding()
  }
}

// Button子组件
struct ButtonSubview: View {
  @EnvironmentObject var focusManager: FocusManager

  private func handleTap() {
    if focusManager.isTextFieldFocused {
      focusManager.onSubmit?()
      focusManager.isTextFieldFocused = false
    }
    print("Button")
  }

  var body: some View {
    Button(action: handleTap) {
      Text("CLICKY")
    }
  }
}

关键说明 #

• @FocusState是SwiftUI专门用于管理焦点的属性包装器，支持跨组件传递绑定或通过环境共享。
• 抽离提交逻辑为单独方法，避免重复代码，同时保证原有onSubmit（比如回车触发）的行为不变。
• 空白区域的onTapGesture需要添加在父容器上，确保点击任何空白处都能触发提交。

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