SwiftUI 文本字段高度没有改变 [英] SwiftUI textfield height didn't change
问题描述
我有一个简单的 TextField 并设置了高度和其他一些属性，但问题是文本字段的高度没有改变，下面是我的代码
struct LoginView: View {@State private var email = ""@State 私有变量密码 = ""var主体:一些视图{VStack() {TextField("Email", text: self.$email).frame(高度:55).textFieldStyle(RoundedBorderTextFieldStyle()).cornerRadius(16).padding([.leading, .trailing], 24)SecureField("密码", text: self.$password).frame(高度:55).textFieldStyle(RoundedBorderTextFieldStyle()).cornerRadius(16).padding([.leading, .trailing], 24)}}}struct LoginView_Previews: PreviewProvider {静态 var 预览:一些视图 {登录视图()}}但是这不起作用.
让我们检查一下！
导入 SwiftUI结构内容视图:查看{@State private var email = "";@State private var password = "";var主体:一些视图{VStack() {TextField("Email", text: self.$email).frame(height: 200).border(Color.red).textFieldStyle(RoundedBorderTextFieldStyle()).cornerRadius(16).padding([.leading, .trailing], 24)SecureField(密码"，文本:self.$password).frame(高度:55).textFieldStyle(RoundedBorderTextFieldStyle()).cornerRadius(16).padding([.leading, .trailing], 24)}}}struct ContentView_Previews: PreviewProvider {静态 var 预览:一些视图 {内容视图()}}您必须了解视图修饰符的工作原理.任何修改器都会返回带有修改内容的新视图.
看到这个:-)
导入 SwiftUI结构内容视图:查看{@State private var email = "";@State private var password = "";var主体:一些视图{VStack() {TextField("Email", text: self.$email).frame(height: 200).border(Color.red).textFieldStyle(RoundedBorderTextFieldStyle()).cornerRadius(16).padding([.leading, .trailing], 24)SecureField(密码"，文本:self.$email).frame(高度:55).textFieldStyle(PlainTextFieldStyle()).padding([.leading, .trailing], 4).cornerRadius(16).overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray).padding(.bottom, -150).padding(.top, 50)).padding([.leading, .trailing], 24)}}}struct ContentView_Previews: PreviewProvider {静态 var 预览:一些视图 {内容视图()}}如您所见，TextField 本身的样式永远不会改变，除非您明确更改它.
目前TextFieldStyle公共API非常有限
////`TextField` 的外观和交互规范.@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)公共协议 TextFieldStyle {}您可以只选择预定义的...
DefaultTextFieldStyle纯文本字段样式RoundedBorderTextFieldStyleSquareBorderTextFieldStyle你说得对！您无法更改 TextField 的高度，其高度取决于用于呈现它的 Font，除了应用一些自定义 TextFieldStyle 未记录在案，并且可能在未来版本中更改...
更新，基于
I have a simple TextField and set height and some other properties but the issue is textfield height didn't change, bellow is my code
struct LoginView: View {
@State private var email = ""
@State private var password = ""
var body: some View {
VStack() {
TextField("Email", text: self.$email)
.frame(height: 55)
.textFieldStyle(RoundedBorderTextFieldStyle())
.cornerRadius(16)
.padding([.leading, .trailing], 24)
SecureField("Password", text: self.$password)
.frame(height: 55)
.textFieldStyle(RoundedBorderTextFieldStyle())
.cornerRadius(16)
.padding([.leading, .trailing], 24)
}
}
}
struct LoginView_Previews: PreviewProvider {
static var previews: some View {
LoginView()
}
}
However this doesn't work.
Lets check it!
import SwiftUI
struct ContentView: View {
@State private var email = ""
@State private var password = ""
var body: some View {
VStack() {
TextField("Email", text: self.$email)
.frame(height: 200).border(Color.red)
.textFieldStyle(RoundedBorderTextFieldStyle())
.cornerRadius(16)
.padding([.leading, .trailing], 24)
SecureField("Password", text: self.$password)
.frame(height: 55)
.textFieldStyle(RoundedBorderTextFieldStyle())
.cornerRadius(16)
.padding([.leading, .trailing], 24)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
You have to understand how View modifiers work. Any modifier returns new View with modified Content.
see this one :-)
import SwiftUI
struct ContentView: View {
@State private var email = ""
@State private var password = ""
var body: some View {
VStack() {
TextField("Email", text: self.$email)
.frame(height: 200).border(Color.red)
.textFieldStyle(RoundedBorderTextFieldStyle())
.cornerRadius(16)
.padding([.leading, .trailing], 24)
SecureField("Password", text: self.$email)
.frame(height: 55)
.textFieldStyle(PlainTextFieldStyle())
.padding([.leading, .trailing], 4)
.cornerRadius(16)
.overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray).padding(.bottom, -150).padding(.top, 50))
.padding([.leading, .trailing], 24)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
As you can see, the styling of TextField itself is never changed, except you explicitly will change it.
Currently TextFieldStyle public API is very limited
/// A specification for the appearance and interaction of a `TextField`.
@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol TextFieldStyle {
}
You can just select one of predefined ...
DefaultTextFieldStyle
PlainTextFieldStyle
RoundedBorderTextFieldStyle
SquareBorderTextFieldStyle
You are right! You not able to change height of TextField, its height is dependent on Font used to render it, except applying some custom TextFieldStyle It is not documented, and could change in future version ...
UPDATE, based on How to change SwiftUI TextField style after tapping on it? (all credits should go to the author of this question)
Example of custom TextFieldStyle
import SwiftUI
struct ContentView: View {
@State private var email = ""
@State private var password = ""
var body: some View {
VStack() {
TextField("Email", text: self.$email)
.textFieldStyle(MyTextFieldStyle()).border(Color.blue)
}
}
}
struct MyTextFieldStyle: TextFieldStyle {
func _body(configuration: TextField<Self._Label>) -> some View {
configuration
.padding(30)
.background(
RoundedRectangle(cornerRadius: 20, style: .continuous)
.stroke(Color.red, lineWidth: 3)
).padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
and final look, which is what you are looking for ...
这篇关于SwiftUI 文本字段高度没有改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
