title: SwiftUI: Aligning views to the leading & trailing edges of another view in a VStack
body: <p>How do you align content to the leading and trailing edges of another view in a SwiftUI <code>VStack</code>?</p>
  
  <p>I currently have the following SwiftUI code:</p>
  
  <pre class="lang-swift prettyprint-override"><code>struct MyBlock: View {
      var body: some View {
          Rectangle().foregroundColor(.gray).frame(width: 80, height: 80)
      }
  }
  
  struct MyGridView: View {
      var body: some View {
          HStack(spacing: 16) {
              MyBlock()
              MyBlock()
              MyBlock()
          }                       
      }
  }
  
  struct PinPad: View {
      var body: some View {
          VStack {
              MyGridView()
              HStack {
                  Button(action: {}, label: { Text("Left Align") })
                  Spacer()
                  Button(action: {}, label: { Text("Right Align") })
              }
          }
      }
  }
  </code></pre>
  
  <p>The result renders like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zDeSu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zDeSu.png" alt="Spacer consumes all the available space"></a></p>
  
  <p>But what I really want is for the <code>"Left Align"</code> <code>Button</code> to align with the left/leading edge of <code>MyGridView</code> and the <code>"Right Align"</code> <code>Button</code> to align to the right/trailing edge of the <code>MyGridView</code>. </p>
  
  <p>Eg, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Ky5Ld.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ky5Ld.png" alt="Aligned Buttons"></a></p>
  
  <p>I'm obviously missing something very basic here as doing this with Auto-Layout in UIKit is trivial.</p>