SwiftUI TextField 可触摸区域 [英] SwiftUI TextField touchable Area

问题描述

SwiftUI 布局与我们习惯的非常不同.目前我正在与 TextFields 作斗争.特别是他们的可触摸区域.

SwiftUI layout is very different from what we are used to. Currently I'm fighting against TextFields. Specifically their touchable Area.

TextField(
    .constant(""),
    placeholder: Text("My text field")
    )
        .padding([.leading, .trailing])
        .font(.body)

这会导致一个非常小的 TextField(高度明智)

This results in a very small TextField (height wise)

添加框架修饰符解决了问题(视觉上)

Adding the frame modifier fixes the issue (visually)

TextField(
    .constant(""),
    placeholder: Text("My text field")
    ).frame(height: 60)
        .padding([.leading, .trailing])
        .font(.body)

但可触摸区域保持不变.

but the touchable area remains the same.

我知道框架修饰符除了将 textField 包装在另一个具有指定高度的 View 中之外什么都不做.

I'm aware of the fact that the frame modifier does nothing else other than wrap the textField in another View with the specified height.

对于 Image 是否有任何等效于 resizable() 的东西，可以允许更高的 TextField 和更宽的可触摸区域?

Is there any equivalent to resizable() for Image that will allow a taller TextField with wider touchable Area?

推荐答案

带按钮的解决方案

如果您不介意使用 Introspect，您可以通过保存 UITextField 并调用becomeFirstResponder() 按下按钮.

Solution with Button

If you don't mind using Introspect you can do it by saving the UITextField and calling becomeFirstResponder() on button press.

extension View {
    public func textFieldFocusableArea() -> some View {
        TextFieldButton { self.contentShape(Rectangle()) }
    }
}

fileprivate struct TextFieldButton<Label: View>: View {
    init(label: @escaping () -> Label) {
        self.label = label
    }
    
    var label: () -> Label
    
    private var textField = Weak<UITextField>(nil)
    
    var body: some View {
        Button(action: {
            self.textField.value?.becomeFirstResponder()
        }, label: {
            label().introspectTextField {
                self.textField.value = $0
            }
        }).buttonStyle(PlainButtonStyle())
    }
}

/// Holds a weak reference to a value
public class Weak<T: AnyObject> {
    public weak var value: T?
    public init(_ value: T?) {
        self.value = value
    }
}

示例用法:

TextField(...)
    .padding(100)
    .textFieldFocusableArea()

因为我自己也用这个，所以我会在 github 上保持更新:https://gist.github.com/Amzd/d7d0c7de8eae8a771cb0ae3b99eab73d

Since I use this myself as well, I will keep it updated on github: https://gist.github.com/Amzd/d7d0c7de8eae8a771cb0ae3b99eab73d

Button 解决方案将添加可能不需要的样式和动画，因此我现在使用我的 ResponderChain 包使用一种新方法

The Button solution will add styling and animation which might not be wanted therefore I now use a new method using my ResponderChain package

import ResponderChain

extension View {
    public func textFieldFocusableArea() -> some View {
        self.modifier(TextFieldFocusableAreaModifier())
    }
}

fileprivate struct TextFieldFocusableAreaModifier: ViewModifier {
    @EnvironmentObject private var chain: ResponderChain
    @State private var id = UUID()
    
    func body(content: Content) -> some View {
        content
            .contentShape(Rectangle())
            .responderTag(id)
            .onTapGesture {
                chain.firstResponder = id
            }
    }
}

您必须在 SceneDelegate 中将 ResponderChain 设置为环境对象，请查看 ResponderChain 的 README 以获取更多信息.

You'll have to set the ResponderChain as environment object in the SceneDelegate, check the README of ResponderChain for more info.

这篇关于SwiftUI TextField 可触摸区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！