增加 TextField 的可点击区域

Question

我目前有以下代码，表示带有背景和图标的 TextField。

struct TextFieldAreaView: View {
    
    @State var query = ""
    
    var body: some View {
        
        HStack {
            
            Image(systemName: "magnifyingglass")
                .padding(.leading, 10)
            
            TextField("Placeholder", text: $query)
                .padding(5)
        }
        .background(Color.black.opacity(0.3))
        .cornerRadius(10)
        .padding()
        
    }
}

当然，因为背景实际上是 HStack，而图标是 TextField 框架区域之外的图像，所以当用户点击其中任何一个时，键盘都不会出现。

为了让键盘显示，您必须精确地点击 TextField。这当然不是很直观。

有没有什么办法可以在点击图标或背景 HStack 时显示键盘？

Answer 1

您可以尝试删除填充或提供负数，例如：

 .padding(.trailing, -100)

这样做会增加可点击区域。因为默认情况下，当您使用 padding() 时，它会在顶部、按钮、左侧和右侧的所有 4 个方向上缩小您的文本字段。

这是我项目中的一个例子：

  HStack{
        Image(systemName: taskViewModel.task.completed ? "checkmark.circle.fill" : "circle")
            .resizable()
            .frame(width: 20, height:20)
            .onTapGesture {
                self.taskViewModel.task.completed.toggle()
            }
        TextField("Enter the task title", text: $taskViewModel.task.title, onCommit: {
            self.onCommit(self.taskViewModel.task)
            
                
        })
        .padding()
        .padding(.trailing, -100)