SwiftUI文本框高度未改变。

Question

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

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

然而这并不起作用。

- Drashti Javiya

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的高度，它的高度取决于用来呈现它的字体，除非应用一些自定义的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()
    }
}

最终外观就是您所寻找的内容...

- user3441734

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)

- Asperi

---

请查看我的更新，以及自定义TextFieldStyle的示例（这不是我的想法）。 - user3441734