增加 TextField 的可点击区域

Posted 2023-02-24

【中文标题】增加 TextField 的可点击区域

【英文标题】：Increase tappable area of TextField

【发布时间】：2021-03-15 10:49:03

【问题描述】：

我目前有以下代码，表示带有背景和图标的 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 时显示键盘？

【问题讨论】：

您可以尝试此处提供的解决方案之一：link

@federicoramos77 不使用第三方包就没有办法吗？

【参考方案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)

【讨论】：

不幸的是，这似乎不起作用。它还会移动文本和占位符的位置。