SwiftUI - 带坐标的 .position 修饰符

SwiftUI - .position modifier with coordinates

我想用修饰符“.position”和每个项目的坐标将项目放置在图像上。但是当我看渲染图的时候,我不明白物品位置的逻辑,用什么公式把物品放在图像上,用的是什么参照系。 我的代码:

                ZStack {
                    Image(self.schema.image)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .border(Color.white)
                        .shadow(color: self.colorShadow ? Color.green : Color.gray.opacity(0.5) ,radius: 10)
                        .overlay(
                            ForEach(self.schema.item) { item in
                                Text(String(item.id))
                                    .font(.headline)
                                    .foregroundColor(Color.black)
                                    .padding(5)
                                    .overlay(
                                        Circle().stroke(Color.black, lineWidth: 1)
                                    )
                                    .offset(x: 20, y: 100)
                                    .position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
                            }
                        )
                }

我的坐标:

        Items(id: 1, name: "1", coordinatesX: 0, coordinatesY: 50),
        Items(id: 2, name: "2", coordinatesX: 10, coordinatesY: 50),
        Items(id: 3, name: "3", coordinatesX: 20, coordinatesY: 50),
        Items(id: 4, name: "4", coordinatesX: 30, coordinatesY: 50),
        Items(id: 5, name: "5", coordinatesX: 40, coordinatesY: 50),
        Items(id: 6, name: "6", coordinatesX: 50, coordinatesY: 50),
        Items(id: 7, name: "7", coordinatesX: 60, coordinatesY: 50),
        Items(id: 8, name: "8", coordinatesX: 70, coordinatesY: 50)

最终结果:

我不明白为什么它是对角线。感谢您的帮助!

你需要覆盖层中的容器,例如

.overlay(ZStack {
    ForEach(self.schema.item) { item in
        Text(String(item.id))
            .font(.headline)
            .foregroundColor(Color.black)
            .padding(5)
            .overlay(
                Circle().stroke(Color.black, lineWidth: 1)
            )
            .offset(x: 20, y: 100)
            .position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
    }
})