在 SwiftUI 滑块上叠加圆形标记

Question

我正在开发一个 SwiftUI 项目，我试图在滑块上叠加圆形标记来表示视频时间轴上的注释。但是，我面临一个问题，即圆形标记没有按预期出现在滑块上。

这是我的代码的简化版本：

import SwiftUI

struct ContentView: View {
    @State private var currentTime: TimeInterval = 0
    @State private var annotations: [Annotation] = [] // Assume you have a struct named Annotation
    
    // Other properties and functions...

    var body: some View {
        HStack {
            Slider(value: Binding(get: {
                currentTime
            }, set: { newValue in
                // Function to handle slider value change...
            }), in: 0...getTotalDuration(), step: 0.01)
            .accentColor(.blue)
            .frame(width: UIScreen.main.bounds.width)
            
            ForEach(annotations) { annotation in
                Circle()
                    .foregroundColor(.red)
                    .frame(width: 10, height: 10)
                    .position(x: calculateMarkerPosition(annotation.timestamp))
                    .onTapGesture {
                        // Function to handle tap on the circle marker...
                    }
            }
        }
        .padding(.horizontal)
        
        // Other UI components...
    }

    // Other functions...
}

在此代码中，我尝试在蓝色滑块上覆盖红色圆圈标记，但圆圈没有按预期显示。

有人可以帮助我了解可能导致此问题的原因吗？有没有更好的方法在 SwiftUI 滑块上叠加圆形标记？

提前致谢！ 来自 iOS 模拟器的图像

来自 xcode 布局调试器的图像

Answer 1

在 Slider 上使用 .overlay() 修复了它

        Slider(value: Binding(get: {
            currentTime
        }, set: { newValue in
            seekToTime(newValue)
        }), in: 0...getTotalDuration(), step: 0.01)
        .overlay(
            ZStack {
                ForEach(annotations, id: \.self) { annotation in
                    Circle()
                        .foregroundColor(.red)
                        .frame(width: 10, height: 10)
                        .position(x: calculateMarkerPosition(annotation.timestamp),y: 15)
                        .onTapGesture {
                            jumpToAnnotation(annotation)
                        }
                }
            }
        )
        .accentColor(.blue)
        .frame(width: screen.width)
        }