CODEWITHSUNDEEP
iosswiftswiftuivstack
PrepareFor
PrepareFor

Reputation: 2598

How to make VStack fill the width of screen in SwiftUI

I'm trying to make VStack Sample app which visualize VStack Properties

but my VStack couldn't fill the width of screen

I tried many solutions on internet (frame modifier, HStack with Spacer, GeometryReader) but they were not work

This is my code

Parent View

struct LayoutView: View {

    @State private var spacing: CGFloat = 0.0
    @State private var alignmentIndex = 0
    @State private var elementsAmount = 0

    private let layout: StackLayout

    private let alignments: [String] = [".leading", ".center", ".trailing"]
    private let minValue: CGFloat = 0.0
    private let maxValue: CGFloat = 100.0

    init(_ layout: StackLayout) {
        self.layout = layout
    }

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Controls")) {
                    VStack(alignment: .leading) {
                        Text("Spacing: \(Int(spacing))").font(.caption)
                        HStack {
                            Text("\(Int(minValue))")
                            Slider(value: $spacing, in: minValue...maxValue, step: 1)
                            Text("\(Int(maxValue))")
                        }
                    }

                    Picker("alignments", selection: self.$alignmentIndex) {
                        ForEach(0..<alignments.count) {
                            Text(self.alignments[$0])
                        }
                    }
                    .pickerStyle(SegmentedPickerStyle())

                    Stepper("Element's amount: \(elementsAmount)", value: self.$elementsAmount, in: 0...10)
                }

                Section(header: Text("Canvas")) {
                    VStackView(spacing: $spacing, alignmentIndex: $alignmentIndex, elementsCount: $elementsAmount)
                }
            }
            .navigationBarTitle(Text(layout.rawValue), displayMode: .inline)
        }
    }
}

Child View

struct VStackView: View {
    @Binding var spacing: CGFloat
    @Binding var alignmentIndex: Int
    @Binding var elementsCount: Int

    private let alignments: [HorizontalAlignment] = [.leading, .center, .trailing]

    var body: some View {
        VStack(alignment: self.alignments[alignmentIndex], spacing: CGFloat(spacing)) {
            ForEach(0..<elementsCount, id: \.self) {
                Text("\($0)th View")
            }
        }
    }
}

and this is result

enter image description here

Upvotes: 1

Views: 4977

Answers (2)

Vadim Nikolaev
Vadim Nikolaev

Reputation: 2132

I guess you can update code like this

struct VStackView: View {
    @Binding var spacing: CGFloat
    @Binding var alignmentIndex: Int
    @Binding var elementsCount: Int

    private let alignments: [HorizontalAlignment] = [.leading, .center, .trailing]

    var body: some View {
        VStack(alignment: self.alignments[alignmentIndex], spacing: CGFloat(spacing)) {
            ForEach(0..<elementsCount, id: \.self) {
                Text("\($0)th View").frame(maxWidth: .infinity, alignment: Alignment(horizontal: self.alignments[self.alignmentIndex], vertical: .center))
            }
        }
    }
}

Upvotes: 1

LuLuGaGa
LuLuGaGa

Reputation: 14428

You can set maxWidth of the frame to infinity - it is a way of telling the parent view that this view wants all the width it can get:

VStack {
    //...
}  .frame(maxWidth: .infinity)

Upvotes: 2

Related Questions