Padding on Textfield and Button

@orochamartins

Apr '22

Hey everyone! I'm trying to learn SwiftUI but i've stumbled across a problem related to padding inside an element. So, when i add ".padding()" to one of those elements, instead of giving the text more room, it gives padding to the outside area... How can i increase the space inside of a button/textfield?

2

@vtabmow

Apr '22

I think this is what you want:

Button {

} label: {
  Text("Add")
    .padding()
    .foregroundColor(.white)
    .background(Color.blue)
    .cornerRadius(6.0)
}

2

@NigelGee HWS+

Apr '22

You can do the above for the Button as @vtabmow suggested or just add .padding() to the label:

Button {
  // do something
} label: {
  Text("Add")
      .padding()
}
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(6.0)

For the TextField you need to recreate the .textFieldStyle(RoundedBorderTextFieldStyle()). Think this is quite close

TextField("Input text here", text: $text)
    .padding()
    .overlay(
        RoundedRectangle(cornerRadius: 6)
            .stroke(Color.secondary.opacity(0.5))
    )

If you are re using this button style in lots of place you might want to do a new file called "PaddedButtonStyle" then put this in it

struct PaddedButtonStyle: ButtonStyle {
    let foregroundColor: Color
    let backgroundColor: Color
    let cornerRadius: Double

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .foregroundColor(foregroundColor)
            .background(backgroundColor)
            .cornerRadius(cornerRadius)
    }
}

extension View {
    func paddedButtonStyle(foregroundColor: Color = .white,
                           backgroundColor: Color = .blue,
                           cornerRadius: Double = 6
    ) -> some View {
        self.buttonStyle(PaddedButtonStyle(foregroundColor: foregroundColor,
                                           backgroundColor: backgroundColor,
                                           cornerRadius: cornerRadius)
        )
    }
}

Now you can add it to your button like this and everywhere you want the same button style

Button("Add") {
    // do something
}
.paddedButtonStyle()

I have give it parameter so you can change colors and radius but have the default same as you gave.

2

@orochamartins

Apr '22

Thanks for the help guys.

Unfortunately the TextField still appears like the example i showed on the first post...

Another question, when i was searching for a solution for this, i saw some results that simply put a "padding" on the TextField and it worked. Was it because all of the examples i saw were made for iOS and i'm doing for macOS? They behave differently?

2

@orochamartins

Apr '22

So i inserted your suggestions for the Button and TextField and it still appears like in the image below. The box around the placeholder text on the TextField is still the same it only added padding around it like i had before and the Button added some horizontal padding but like you see on the image it has some kind of "hidden" padding that's not affecting the height of the button.

2

@vtabmow

Apr '22

Yeah, that's weird. I get the same thing when I try the code for macOS instead of iOS. I thought they were supposed to behave the same but that doesn't seem to be the case. I haven't done anything with macOS yet. It seems like I can modify the width of the button but not the height.

2

@vtabmow

Apr '22

Actually, try adding .buttonStyle(.borderless) to the button. That worked for me.

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    var body: some View {
        VStack {
            HStack {
                TextField("Insert Text Here", text: $text)
                    .padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }
            Button {
                print("Test")
            } label: {
                Text("Add")
                    .frame(width: 100, height: 100)
                    .padding()
            }
            .buttonStyle(.borderless)
            .fixedSize()
            .background(Color.blue)
            .cornerRadius(6.0)
            Divider()
            Spacer()
        }
        .frame(width: 300, height: 300)

    }
}

2

@orochamartins

Apr '22

Thanks, it worked! I found a solution for the texfield too, using:

.textFieldStyle(PlainTextFieldStyle())

Here's an image of the result:

But it's quiet strange that it's way easier to do this kind of things in an iOS project compared to a macOS one.

2

@NigelGee HWS+

Apr '22

Thanks for telling in your first post that it macOS that you are targeting! This would saved some time.

2

Archived topic