SwiftUI：TextField 内的填充

Posted 2023-02-24

【中文标题】SwiftUI：TextField 内的填充

【英文标题】：SwiftUI: Padding inside TextField

【发布时间】：2021-02-13 10:48:28

【问题描述】：

我在 SwiftUI 中有一个 TextField。当我将填充应用于它时

TextField(text, text: $value)
    .padding()

填充位于TextField 的点击区域之外，即点击填充不会使文本字段成为焦点。

即使用户点击填充，我也希望能够聚焦 TextField。

【问题讨论】：

检查this是否回答您的问题

对于如此基本的东西来说，这非常复杂。必须包含库只是为了正确地向我的 TextField 添加填充。反正。谢谢@ScorpiCon

这能回答你的问题吗？ SwiftUI TextField touchable Area

【参考方案1】：

你可以试试这个。至少对我有用。希望对某人有所帮助：

            TextField("", text: $textfieldValueBinding)
                .frame(height: 48)
                .padding(EdgeInsets(top: 0, leading: 6, bottom: 0, trailing: 6))
                .cornerRadius(5)
                .overlay(
                    RoundedRectangle(cornerRadius: 5)
                        .stroke(lineWidth: 1.0)
                )

【讨论】：

这是 OP 问题的最干净的解决方案。

视觉效果很好，但是填充区域不可点击，所以不能解决OP的问题。

【参考方案2】：

你可以检查一下。现在我只做了顶部和底部填充。您可以对前导和尾随（或水平和垂直）执行相同的操作。 正如问题中所问的那样 “即使用户点击填充，我也希望能够聚焦 TextField。”

struct ContentView: View 
@State var name = ""
@State var isTextFieldFocused = false
var body: some View 
        ZStack 
            HStack
                Text(name)
                    .font(.system(size: 50 , weight: .black))
                    .foregroundColor(isTextFieldFocused ? Color.clear : Color.black)
                Spacer()
            
            TextField(name, text: $name , onEditingChanged:  editingChanged in
                isTextFieldFocused = editingChanged
            ) 
            .font(.system(size: isTextFieldFocused ? 50 :  100 , weight: .black))
            .foregroundColor(isTextFieldFocused ? Color.black  : Color.clear)
            .frame(width: 300, height: isTextFieldFocused ? 50 :  100 , alignment: .center)
                        .padding(.leading, isTextFieldFocused ? 25 : 0  )
                        .padding(.trailing, isTextFieldFocused ? 25 : 0 )
            
            .padding(.top,isTextFieldFocused ? 25 : 0 )
            .padding(.bottom,isTextFieldFocused ? 25 : 0 )
            
        .frame(width: 300)
        .background(Color.red.opacity(0.2))

【讨论】：

这没有回答问题。如果文本字段发生更改，它会添加填充。但问题是当用户点击添加的填充时如何聚焦 TextField。

这是来自***.com/questions/56795712/… 的答案。我的问题是，如果之前输入过文本，我必须点按两次才能使文本字段聚焦。

【参考方案3】：

可以，但您必须创建自己的 TextFieldStyle。这是一个例子：

struct CustomTextField: View 
    
    public struct CustomTextFieldStyle : TextFieldStyle 
        public func _body(configuration: TextField<Self._Label>) -> some View 
            configuration
                .font(.largeTitle) // set the inner Text Field Font
                .padding(10) // Set the inner Text Field Padding
                //Give it some style
                .background(
                    RoundedRectangle(cornerRadius: 5)
                        .strokeBorder(Color.primary.opacity(0.5), lineWidth: 3)) 
        
    
    @State private var password = ""
    @State private var username = ""
    
    var body: some View 
        VStack 
            TextField("Test", text: $username)
                .textFieldStyle(CustomTextFieldStyle()) // call the CustomTextField
            SecureField("Password", text: $password)
                .textFieldStyle(CustomTextFieldStyle())
        .padding()
    

【讨论】：

这似乎不影响点击区域。

【参考方案4】：

对我有用的唯一方法是编写自定义 TextFieldStyle，然后在样式中添加 .padding(.horizo​​ntal)。

struct RegisterLoginTextFieldStyle: TextFieldStyle 
    var width: CGFloat
    var height: CGFloat
    var fontSize: CGFloat

    func _body(configuration: TextField<Self._Label>) -> some View 
        configuration
            .frame(width: width, height: height)
            .padding(5)
            .padding(.horizontal)
            .border(Color.black, width: 2)
            .background(Color.textFieldBackground)
            .font(.system(size: fontSize))
            .foregroundColor(.black)
    


...
var body: some View 
    TextField(
        label,
        text: $input
    )
    .padding(.top, 5)
    .textFieldStyle(
        RegisterLoginTextFieldStyle(
            width: width,
            height: height,
            fontSize: placeholderSize
        )
    )

textfield with horizontal inner padding

【讨论】：

问题不在于如何添加内边距，而在于如何使文本字段在您点击内边距时聚焦。这似乎不适用于此代码。

【参考方案5】：

在您的 TextField 周围添加 HStack，然后您就可以使用 HStack： 示例：

         VStack 

                ...
                
                
                HStack 
                        TextField("Social security number", text: $socialNumber)
                            .disableAutocorrection(true)
                
                .padding()
                .padding(.leading, 30.0)
                .padding(.trailing, 30.0)
                .background(RoundedRectangle(cornerRadius: 12).fill(Theme.color.textFieldBackgroundColor))
                .frame(maxWidth: 315)
                
                ...
            
            .padding(.top, 0)
            .frame(maxWidth: 350)

【讨论】：

这会使 TextField 看起来比实际更大，从而使用户感到困惑。点击 HStack 的填充区域不会激活 TextField，因此用户可能会认为我正在点击它，但没有发生任何事情导致糟糕的用户体验。在 HStack 上添加一个触摸监听器来激活 TextField 可能会解决这个问题，但我正在寻找比这更简单的东西（如果可能的话）

@VivekRoy 当我完成我正在使用 swiftUI 处理的项目时，我将回到 UIKit + Snapkit 方式更好地控制所有元素。

【参考方案6】：

TextField(
    "TextFiled",
    text: $teamNames,
    prompt: Text("Text Field")
        .foregroundColor(.gray)
)
    .padding(5)
    .frame(width: 250, height: 50, alignment: .center)
    .background(
        RoundedRectangle(cornerRadius: 25, style: .continuous)
            .foregroundColor(.white)
            .padding(.horizontal, -30)
    )

【讨论】：

在背景修饰符中添加负填充就可以了。

【参考方案7】：

我不知道您是否可以在 TextField 内部进行填充，但您可以从外部环境对其进行填充，并为其设置与 TextField 背景颜色相同的形状背景。

试试这个；

        TextField("Username", text: $value)
            .background(Color.yellow)
            .padding(50)
            .background(Capsule().fill(Color.white))

【讨论】：

我想增加TextField的点击区域。这样做不对吗？