title: SwiftUI shape fill body
body: <p>I'm trying to construct a view in SwiftUI, where the user can keep zooming in and out, and show elements across the view. But the rectangle keeps the size of the window, and scales down when zooming out instead of filling the body. The body (black) correctly fills the window.</p>
  <p>How do you make the white rectangle fill the body when zooming out?
  <a href="https://i.stack.imgur.com/p4SJE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p4SJE.jpg" alt="white rectangle partially filling the black body of the window" /></a></p>
  <p>(Must be run in an app instead of preview)</p>
  <pre class="lang-swift prettyprint-override"><code>import SwiftUI
  
  func rgb (_ count: Int) -&gt; [Color]{
      let colors = [Color.red, Color.green, Color.blue]
      var arr: [Color] = []
      for i in 0..&lt;count {
          arr.append(colors[i%3])
      }
      return arr
  }
  
  struct ContentView: View {
      
      @State var scale: CGFloat = 1.0
      
      var body: some View {
           
          let colors = rgb(20)
          
          ZStack {
              Rectangle()
                  .fill(Color.white)
                  
                  .frame(minWidth: 0,
                         maxWidth: .infinity,
                         minHeight: 0,
                         maxHeight: .infinity,
                         alignment: .center)
                 
               ForEach(colors.indices.reversed(), id: \.self) { i in
                   Circle()
                      .size(width: 100, height: 100)
                      .fill(colors[i])
                      .offset(x: 100.0*CGFloat(i), y: 100.0*CGFloat(i))
                          }
          }
          .drawingGroup()
          .scaleEffect(scale)
          .gesture(MagnificationGesture()
                      .onChanged {self.scale = $0})
          .background(Color.black)
          .frame(minWidth: 0,
                 maxWidth: .infinity,
                 minHeight: 0,
                 maxHeight: .infinity,
                 alignment: .center)
      }
  }
  </code></pre>