ios – SwiftUI hold background stationary as view is dragged

I’ve carried out a pattern video enhancing timeline utilizing SwiftUI and am going through points. So I’m breaking apart the issue in chunks and posting subject every as a separate query.
Within the code under, I’ve a easy timeline utilizing an HStack comprising of a left spacer, proper spacer(represented as easy black coloration) and a trimmer UI within the center. The trimmer resizes because the left and proper handles are dragged. The left and proper spacers additionally regulate in width because the trimmer handles are dragged.

Downside: I need to hold the background thumbnails (carried out at the moment as easy Rectangles stuffed in several colours) within the trimmer stationary because the trimmer resizes. At the moment they transfer alongside because the trimmer resizes as seen within the gif under. How do I repair it?

import SwiftUI

struct SampleTimeline: View {
 
 let viewWidth:CGFloat = 340 //Width of HStack container for Timeline

 @State var frameWidth:CGFloat = 280 //Width of trimmer
 
 var minWidth: CGFloat {
     2*chevronWidth + 10
 } //min Width of trimmer
 
 @State personal var leftViewWidth:CGFloat = 20
 @State personal var rightViewWidth:CGFloat = 20
 
 var chevronWidth:CGFloat {
     return 24
 }
 
 var physique: some View {
     
     HStack(spacing:0) {
         Colour.black
             .body(width: leftViewWidth)
             .body(peak: 70)
         
         HStack(spacing: 0) {
         
             Picture(systemName: "chevron.compact.left")
                 .body(width: chevronWidth, peak: 70)
                 .background(Colour.blue)
                 .gesture(
                     DragGesture(minimumDistance: 0)
                         .onChanged({ worth in
                             leftViewWidth = max(leftViewWidth + worth.translation.width, 0)
                             
                             if leftViewWidth > viewWidth - minWidth - rightViewWidth {
                                 leftViewWidth = viewWidth - minWidth - rightViewWidth
                             }
                                
                             frameWidth = max(viewWidth - leftViewWidth - rightViewWidth, minWidth)
                             
                         })
                         .onEnded { worth in
                            
                         }
                 )
     
             Spacer()
             
             Picture(systemName: "chevron.compact.proper")
                 .body(width: chevronWidth, peak: 70)
                 .background(Colour.blue)
                 .gesture(
                     DragGesture(minimumDistance: 0)
                         .onChanged({ worth in
                             rightViewWidth = max(rightViewWidth - worth.translation.width, 0)
                             
                             if rightViewWidth > viewWidth - minWidth - leftViewWidth {
                                 rightViewWidth = viewWidth - minWidth - leftViewWidth
                             }
                             
                             frameWidth = max(viewWidth - leftViewWidth - rightViewWidth, minWidth)
                         })
                         .onEnded { worth in
                           
                         }
                 )
              
         }
         .foregroundColor(.black)
         .font(.title3.weight(.semibold))
       
         .background {
             
             HStack(spacing:0) {
                 Rectangle().fill(Colour.crimson)
                     .body(width: 70, peak: 60)
                 Rectangle().fill(Colour.cyan)
                     .body(width: 70, peak: 60)
                 Rectangle().fill(Colour.orange)
                     .body(width: 70, peak: 60)
                 Rectangle().fill(Colour.brown)
                     .body(width: 70, peak: 60)
                 Rectangle().fill(Colour.purple)
                     .body(width: 70, peak: 60)
             }
             
         }
         .body(width: frameWidth)
         .clipped()
         
         Colour.black
             .body(width: rightViewWidth)
             .body(peak: 70)
     }
     .body(width: viewWidth, alignment: .main)
 }
}

#Preview {
 SampleTimeline()
}