带坐标的 SwiftUI .position 修饰符

Question

我想使用修饰符

.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)

最终结果：

不明白为什么是对角线。谢谢你的帮助！

Answer 1

你需要覆盖容器，比如

.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))
    }
})