我在 SwiftUI 中有一个 TextField。当我将填充应用于它时
TextField(text, text: $value)
.padding()
填充位于TextField 的点击区域之外，即点击填充不会使文本字段成为焦点。
即使用户点击填充，我也希望能够聚焦 TextField。
【问题讨论】：
标签： ios swiftui swiftui-form
你可以试试这个。至少对我有用。希望对某人有所帮助：
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)
)
【讨论】：
你可以检查一下。现在我只做了顶部和底部填充。您可以对前导和尾随（或水平和垂直）执行相同的操作。 正如问题中所问的那样 “即使用户点击填充，我也希望能够聚焦 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))
}
}
【讨论】：
可以，但您必须创建自己的 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()
}
}
【讨论】：
对我有用的唯一方法是编写自定义 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
)
)
}
【讨论】：
在您的 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(
"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)
)
【讨论】：
我不知道您是否可以在 TextField 内部进行填充，但您可以从外部环境对其进行填充，并为其设置与 TextField 背景颜色相同的形状背景。
试试这个；
TextField("Username", text: $value)
.background(Color.yellow)
.padding(50)
.background(Capsule().fill(Color.white))
【讨论】：