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

但是这不起作用。

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

最后的外观，这就是您正在寻找的......

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)

Answer 3

结构 RoundedTextField：视图 {

var placeholder: String
@Binding var text: String
init(_ placeholder: String, text: Binding<String>) {
    self.placeholder = placeholder
    self._text = text
}

var body: some View {
    TextField(placeholder, text: $text)
        .textFieldStyle(RoundedTextFieldStyle())
}

}

结构 RoundedTextFieldStyle: TextFieldStyle { func _body(配置：TextField) -> 一些视图 { 配置 .填充(5) .textFieldStyle(PlainTextFieldStyle()) .overlay(RoundedRectangle(cornerRadius: 6, 样式: .continuous) .描边（颜色（.fieldSecondary），线宽：1）） } }