Высота текстового поля 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()
    }
}

Вы должны понять, как работают модификаторы View. Любой модификатор возвращает новое представление с измененным содержимым .

посмотрите на это: -)

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 publi c 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, его высота зависит от шрифта, используемого для его визуализации, за исключением применения некоторых пользовательских TextFielStyle Он не задокументирован и может измениться в будущей версии ...

ОБНОВЛЕНИЕ, основанное на Как изменить стиль SwiftUI TextField после нажатия на него? (все кредиты должны go автору этого вопроса)

Пример пользовательского 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([.leading, .trailing], 4)
    .cornerRadius(16)
    .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
    .padding([.leading, .trailing], 24)