CODEWITHSUNDEEP
swiftswiftuivstack
Andres
Andres

Reputation: 11747

Make Text inside VStack take the whole width of the VStack

I'm trying to make two Text that are inside a VStack to take the whole width of the parent (the VStack).

I'm completely out of ideas.

This is what I have:

var body: some View {
        VStack(alignment: .center, spacing: 0) {

            Image("image")
                .resizable()
                .scaledToFill()
                .frame(height: 190)
                .clipped()

            VStack(alignment: .leading, spacing: 8) {
                Text(title)
                    .font(.title)
                    .background(Color.red)
                    .fixedSize(horizontal: false, vertical: true)

                Text(subtitle)
                    .font(.subheadline)
                    .background(Color.yellow)
                    .fixedSize(horizontal: false, vertical: true)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.green)
                .padding(.top, 24)
                .padding(.horizontal, 24)


            Button(buttonTitle) { print("Something") }
                .frame(maxWidth: .infinity, minHeight: 56)
                .background(Color.red)
                .foregroundColor(.white)
                .cornerRadius(56/2)
                .padding(.top, 32)
                .padding(.horizontal, 24)
                .padding(.bottom, 20.0)

        }.background(Color.blue)
            .cornerRadius(38)
            .frame(minWidth: 0, maxWidth: UIScreen.main.bounds.size.width - 48)
}

And this is how it looks:

I want the red and the yellow label to take the full width of the green VStack.

How can I achieve that?!

enter image description here

Upvotes: 2

Views: 2559

Answers (2)

Asperi
Asperi

Reputation: 257711

Here is possible solution

        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .font(.title)
                .frame(maxWidth: .infinity)    // << here 
                .background(Color.red)
                .fixedSize(horizontal: false, vertical: true)

            Text(subtitle)
                .font(.subheadline)
                .frame(maxWidth: .infinity)    // << here
                .background(Color.yellow)
                .fixedSize(horizontal: false, vertical: true)
        }
        .frame(maxWidth: .infinity)   // << here

Upvotes: 0

nicksarno
nicksarno

Reputation: 4245

  1. Remove the .fixedSize on both Text
  2. Add .frame(minWidth: 0, maxWidth: .infinity) instead
  3. In SwiftUI, it also matters the order of things, so you'll want to add the .background to after the .frame

Final result would be:

            Text("title")
                .font(.title)
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.red)

To instead make it left aligned:

HStack {
     Text("title")
        .font(.title)
                    
        Spacer(minLength: 0)
}
.background(Color.red)

Upvotes: 1

Related Questions