在 SwiftUI 中扩展 TextField 上的可点击区域,Xcode 11.2
Expande clickable area on TextField in SwiftUI, Xcode 11.2
无法弄清楚如何在 swiftUI 上增大可点击区域以打开键盘(iOS 13,Xcode 11.2)。我只能影响视觉外观,但不能影响用户可以点击的实际区域(可点击区域 == 无论占位符文本的字体大小是多少。)
在 swiftUI 中创建 TextField 时,可以使用 frame() 来增加占位符文本周围的大小,我也可以使用 fontsize 来使框内的字体变大,但没有任何东西可以点击区域(这会调出键盘) 更大而不使字体变大。
//用于修改TextFields的代码
struct SignInModifier: ViewModifier {
func body(content: Content) -> some View {
return content
.padding(.all).font(.system(size: 18)).border(Color.purple).foregroundColor(Color.purple).shadow(radius: 2).frame(width: 350, height: 50)
}
}
//我在哪里调用修饰符
TextField("email address", text: $email).modifier(SignInModifier()).disableAutocorrection(true).keyboardType(.emailAddress)
我希望当您单击框架内的任意位置时,键盘会打开/您能够在文本字段中键入内容。但是,我只需要单击占位符文本的上半部分即可在 TextField
中键入内容
好的,所以我想出了一个解决方法,但不完全是解决方案;只需将 TextField 嵌入按钮中,无论您单击何处,它都会立即打开
稍作变通但有效。
struct ContentView: View {
@State var name = ""
@State var isFocused = false
var body: some View {
ZStack {
HStack{
Text(name)
.font(.system(size: 50 , weight: .black))
.foregroundColor(isFocused ? Color.clear : Color.black)
Spacer()
}
TextField(name, text: $name , onEditingChanged: { editingChanged in
isFocused = editingChanged
})
.font(.system(size: isFocused ? 50 : 100 , weight: .black))
.foregroundColor(isFocused ? Color.black : Color.clear)
.frame(width: 300, height: isFocused ? 50 : 100 , alignment: .center)
.padding(.leading, isFocused ? 25 : 0 )
.padding(.trailing, isFocused ? 25 : 0 )
.padding(.top,isFocused ? 25 : 0 )
.padding(.bottom,isFocused ? 25 : 0 )
}.frame(width: 300)
.background(Color.red.opacity(0.3))
}
}
无法弄清楚如何在 swiftUI 上增大可点击区域以打开键盘(iOS 13,Xcode 11.2)。我只能影响视觉外观,但不能影响用户可以点击的实际区域(可点击区域 == 无论占位符文本的字体大小是多少。)
在 swiftUI 中创建 TextField 时,可以使用 frame() 来增加占位符文本周围的大小,我也可以使用 fontsize 来使框内的字体变大,但没有任何东西可以点击区域(这会调出键盘) 更大而不使字体变大。
//用于修改TextFields的代码
struct SignInModifier: ViewModifier {
func body(content: Content) -> some View {
return content
.padding(.all).font(.system(size: 18)).border(Color.purple).foregroundColor(Color.purple).shadow(radius: 2).frame(width: 350, height: 50)
}
}
//我在哪里调用修饰符
TextField("email address", text: $email).modifier(SignInModifier()).disableAutocorrection(true).keyboardType(.emailAddress)
我希望当您单击框架内的任意位置时,键盘会打开/您能够在文本字段中键入内容。但是,我只需要单击占位符文本的上半部分即可在 TextField
中键入内容好的,所以我想出了一个解决方法,但不完全是解决方案;只需将 TextField 嵌入按钮中,无论您单击何处,它都会立即打开
稍作变通但有效。
struct ContentView: View {
@State var name = ""
@State var isFocused = false
var body: some View {
ZStack {
HStack{
Text(name)
.font(.system(size: 50 , weight: .black))
.foregroundColor(isFocused ? Color.clear : Color.black)
Spacer()
}
TextField(name, text: $name , onEditingChanged: { editingChanged in
isFocused = editingChanged
})
.font(.system(size: isFocused ? 50 : 100 , weight: .black))
.foregroundColor(isFocused ? Color.black : Color.clear)
.frame(width: 300, height: isFocused ? 50 : 100 , alignment: .center)
.padding(.leading, isFocused ? 25 : 0 )
.padding(.trailing, isFocused ? 25 : 0 )
.padding(.top,isFocused ? 25 : 0 )
.padding(.bottom,isFocused ? 25 : 0 )
}.frame(width: 300)
.background(Color.red.opacity(0.3))
}
}