Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to remove spacing between label and stepper buttons is SwiftUI Stepper?

It looks like Stepper behaves like a flexible view and tries to take all the width available. I’d like it to shrink to it’s minimum width though.
Consider the following view:

struct CartListCell: View {
    @State var itemTitle = "Title"
    @State var price = Double.random(in: 1...100)
    @State var quantity = 1
    
    var body: some View {
        HStack(spacing: 10) {
            Image(systemName: "cart")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 40, height: 40)
                .foregroundStyle(Color.yellow, Color.cyan)
            VStack(alignment: .leading, spacing: 5) {
                Text(itemTitle)
                    .font(Font.system(.headline, design: .rounded))
                    .foregroundColor(.primary)
                    .lineLimit(2)
                Text(price, format: .currency(code: Locale.current.currencyCode!))
                    .font(Font.system(.footnote, design: .rounded).weight(.medium))
                    .foregroundColor(.secondary)
            }
            .padding(.horizontal)
            Spacer()
            Stepper("x \(quantity)", value: $quantity, in: 1...50)
        }
    }
}

It produces the following layout where Stepper takes half of the width of HStack.

CartListCell

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

How can I remove space between "x1" text and stepper buttons?

>Solution :

Just add .fixedSize() to your Stepper and it will shrink to it’s minimum.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading