SwiftUI：在 TextField 內填充

Question

我在 SwiftUI 中有一個TextField 。當我將填充應用於它時

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

填充位於TextField的點擊區域之外，即點擊填充不會使文本字段成為焦點。

即使用戶點擊填充，我也希望能夠聚焦TextField 。

Answer 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)
                )

Answer 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))
}
}

Answer 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()
    }
}

Answer 4

對我有用的唯一方法是編寫自定義 TextFieldStyle，然后在樣式中添加.padding(.horizontal)。

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
        )
    )
}

具有水平內部填充的文本字段

Answer 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)

Answer 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)
    )

Answer 7

我不知道您是否可以在 TextField 內部進行填充，但您可以從外部環境對其進行填充，並為其提供與 TextField 背景顏色相同的形狀背景。

嘗試這個;

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