SwiftUI сохраняет фон неподвижным при перетаскивании представления ⇐ IOS

[Anonymous]

Я реализовал пример временной шкалы редактирования видео с помощью SwiftUI и столкнулся с проблемами. Поэтому я разбиваю проблему на части и публикую каждую проблему как отдельный вопрос.
В приведенном ниже коде у меня есть простая временная шкала с использованием HStack, состоящая из левого и правого разделителей (представленных как простой черный цвет) и пользовательский интерфейс триммера посередине. Размер триммера изменяется при перетаскивании левого и правого маркеров. Ширина левых и правых разделителей также изменяется по ширине при перетаскивании маркеров триммера.
Проблема: я хочу сохранить миниатюры фона (в настоящее время реализованные в виде простых заполненных прямоугольников). разных цветов) в триммере неподвижно по мере изменения размера триммера. В настоящее время они движутся вместе с изменением размера триммера, как показано на картинке ниже. Как это исправить?


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 private var leftViewWidth:CGFloat = 20
@State private var rightViewWidth:CGFloat = 20

var chevronWidth:CGFloat {
return 24
}

var body: some View {

HStack(spacing:0) {
Color.black
.frame(width: leftViewWidth)
.frame(height: 70)

HStack(spacing: 0) {

Image(systemName: "chevron.compact.left")
.frame(width: chevronWidth, height: 70)
.background(Color.blue)
.gesture(
DragGesture(minimumDistance: 0)
.onChanged({ value in
leftViewWidth = max(leftViewWidth + value.translation.width, 0)

if leftViewWidth > viewWidth - minWidth - rightViewWidth {
leftViewWidth = viewWidth - minWidth - rightViewWidth
}

frameWidth = max(viewWidth - leftViewWidth - rightViewWidth, minWidth)

})
.onEnded { value in

}
)

Spacer()

Image(systemName: "chevron.compact.right")
.frame(width: chevronWidth, height: 70)
.background(Color.blue)
.gesture(
DragGesture(minimumDistance: 0)
.onChanged({ value in
rightViewWidth = max(rightViewWidth - value.translation.width, 0)

if rightViewWidth > viewWidth - minWidth - leftViewWidth {
rightViewWidth = viewWidth - minWidth - leftViewWidth
}

frameWidth = max(viewWidth - leftViewWidth - rightViewWidth, minWidth)
})
.onEnded { value in

}
)

}
.foregroundColor(.black)
.font(.title3.weight(.semibold))

.background {

HStack(spacing:0) {
Rectangle().fill(Color.red)
.frame(width: 70, height: 60)
Rectangle().fill(Color.cyan)
.frame(width: 70, height: 60)
Rectangle().fill(Color.orange)
.frame(width: 70, height: 60)
Rectangle().fill(Color.brown)
.frame(width: 70, height: 60)
Rectangle().fill(Color.purple)
.frame(width: 70, height: 60)
}

}
.frame(width: frameWidth)
.clipped()

Color.black
.frame(width: rightViewWidth)
.frame(height: 70)
}
.frame(width: viewWidth, alignment: .leading)
}
}

#Preview {
SampleTimeline()
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... is-dragged