CODEWITHSUNDEEP
swiftuitextfield
Drashti Javiya
Drashti Javiya

Reputation: 569

SwiftUI textfield height didn't change

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.

Upvotes: 26

Views: 34173

Answers (5)

Vivek Patel
Vivek Patel

Reputation: 170

For change height of textField you can use .font() modifier .

TextField("Enter Email", text: $userEmail)
                    .font(.system(size: 50)

Upvotes: 1

Oskar
Oskar

Reputation: 3702

The way to increase TextField size in SwiftUI is via controlSize. You can't arbitrarily control it, but it gives you some way to increase the height.

enter image description here

VStack {
    TextField(text: $email) {
        Text("Email")
    }
    .controlSize(.small)
    TextField(text: $email) {
        Text("Email")
    }
    .controlSize(.regular)
    TextField(text: $email) {
        Text("Email")
    }
    .controlSize(.large)
}
.textFieldStyle(.roundedBorder)
.frame(width: 270)

Upvotes: 5

tjb
tjb

Reputation: 108

I was able to solve this by doing the following:

TextField("Title", text: $model.text, axis: .vertical)
    .lineLimit(5...10)

Upvotes: 1

Asperi
Asperi

Reputation: 258541

Use instead plain text field style like below

demo

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)

Upvotes: 31

user3441734
user3441734

Reputation: 17582

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

enter image description here

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

enter image description here

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 ...

enter image description here

Upvotes: 38

Related Questions