SwiftUI 文本字段高度没有改变

Question

我有一个简单的 TextField 并设置了高度和其他一些属性，但问题是文本字段高度没有改变，下面是我的代码

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

然而这行不通。

Answer 1

让我们检查一下！

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

您必须了解视图修改器的工作原理。 任何修饰符都返回带有修改内容的新视图。

看到这个:-)

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

如您所见，TextField 本身的样式永远不会改变，除非您明确更改它。

目前TextFieldStyle 公共 API 非常有限

/// 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 {
}

您可以只选择预定义的...

DefaultTextFieldStyle
PlainTextFieldStyle
RoundedBorderTextFieldStyle
SquareBorderTextFieldStyle

你是对的！ 您无法更改 TextField 的高度，其高度取决于用于呈现它的 Font，除了应用一些自定义 TextFieldStyle它没有记录在案，并且可能在未来版本中更改...

更新，基于如何在点击后更改 SwiftUI TextField 样式？ （所有学分都应该归于这个问题的作者）

自定义 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()
    }
}

最后看看，这就是你要找的......

Answer 2

使用如下所示的纯文本字段样式

TextField("Email", text: self.$email)
    .frame(height: 55)
    .textFieldStyle(PlainTextFieldStyle())
    .padding([.horizontal], 4)
    .cornerRadius(16)
    .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
    .padding([.horizontal], 24)