title: How to make VStack fill the width of screen in SwiftUI
body: <p>I'm trying to make VStack Sample app which visualize VStack Properties</p>
  
  <p>but my VStack couldn't fill the width of screen </p>
  
  <p>I tried many solutions on internet (frame modifier, HStack with Spacer, GeometryReader) but they were not work</p>
  
  <p>This is my code</p>
  
  <p><em>Parent View</em></p>
  
  <pre><code>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..&lt;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)
          }
      }
  }
  </code></pre>
  
  <p><em>Child View</em></p>
  
  <pre><code>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..&lt;elementsCount, id: \.self) {
                  Text("\($0)th View")
              }
          }
      }
  }
  </code></pre>
  
  <p>and this is result </p>
  
  <p><a href="https://i.stack.imgur.com/yRcIW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yRcIW.gif" alt="enter image description here"></a></p>