title: SwiftUI Add view below a list
body: <p>I have a list with some items.</p>
  <p>Below the list I'd like to have to button to load more items.
  (As loading all items requires some user actions like entering a TAN, this should not be done automatically when the user scrolls to the end of the list, but only if he likes to.)</p>
  <p>What I'd like to have is a view like this:</p>
  <p><a href="https://i.stack.imgur.com/5rMH1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5rMH1.png" alt="enter image description here" /></a></p>
  <p>However, if I place the List and the Button in a VStack, the Button get always displayed at the bottom of the screen, not only when I scroll to the end of the List:</p>
  <pre><code>struct ContentView: View {
      
      private let items = Range(0...15).map { &quot;Item &quot; + String($0) }
      
      var body: some View {
          VStack {
              List(items, id: \.self) { item in
                  Text(item)
              }
              
              HStack {
                  Spacer()
                  
                  Button(&quot;Load more&quot;) { print(&quot;Load more items&quot;) }
                  
                  Spacer()
              }
          }
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/c0Ds1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/c0Ds1.png" alt="enter image description here" /></a></p>
  <p>If I add the Button to the List, the Button obviously gets displayed as a List item with a white background and without any space to the list:</p>
  <pre><code>struct ContentView: View {
      
      private let items = Range(0...15).map { &quot;Item &quot; + String($0) }
      
      var body: some View {
          List {
              ForEach(items, id: \.self) { item in
                  Text(item)
              }
              
              HStack {
                  Spacer()
                  
                  Button(&quot;Load more&quot;) { print(&quot;Load more items&quot;) }
                  
                  Spacer()
              }
          }.listStyle(GroupedListStyle())
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/vsqj6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vsqj6.png" alt="enter image description here" /></a></p>
  <p>Is there any way to add a view that becomes visible when the user scrolls to the end of the List but that is not part of the List? (Or at least looks like being below the List and not part of it?)</p>