解决NavigationSplitView切换时ZStack中Circle的图片定位偏移问题

问题场景 #

在使用NavigationSplitView(.balanced)的详情页中，以图片为背景并在固定点位绘制红色圆点标记时，切换侧边栏开合状态，圆点无法保持在图片的对应位置。手动计算新旧宽度缩放因子的方法反而加剧了偏移问题。

核心原因 #

图片使用.aspectRatio(contentMode: .fill)时，会保持自身宽高比填充容器，超出部分会被裁剪。直接用GeometryReader的容器尺寸定位圆点，忽略了图片实际显示区域的偏移和缩放比例，导致位置错乱。

解决方案 #

通过计算图片实际显示区域，将原始点位转换为相对图片的百分比坐标，再根据容器尺寸动态计算圆点的绝对位置：

• 先获取原始图片的宽高比，对比容器宽高比，确定图片是横向还是纵向填满容器
• 将原始像素点转换为相对图片的百分比坐标，保证缩放时比例固定
• 根据图片实际显示的区域和偏移量，计算圆点在容器中的绝对位置

修改后的代码 #

struct Animal: Hashable {
    let name: String
    let description: String
}

struct ContentView1: View {
    let animals = [
        Animal(name: "Coyote", description: "The coyote is a species of canine native to North America..."),
        Animal(name: "Gila Monster", description: "The Gila Monster is a species of venomous lizard native to the southwestern United States..."),
        Animal(name: "Roadrunner", description: "The roadrunner is a fast-running bird found in the southwestern United States and Mexico...")
    ]
    @State private var selectedAnimal: Animal? = nil
    
    var body: some View {
        NavigationSplitView {
            List(animals, id: \.name, selection: $selectedAnimal) { animal in
                NavigationLink(animal.name, value: animal)
            }
            .navigationTitle("Arizona Animals")
        } detail: {
            DetailView(animal: selectedAnimal ?? animals[0])
        }
        .navigationSplitViewStyle(.balanced)
    }
}

struct DetailView: View {
    let animal: Animal
    let image = UIImage(named: "test")!
    let data = [(155.5000457763672, 340.70672607421875),
                (260.234619140625, 341.8070068359375),
                (132.84449768066406, 363.4249267578125),
                (176.1597442626953, 355.15069580078125),
                (241.34222412109375, 355.786376953125),
                (281.90435791015625, 364.7125244140625),
                (209.46426391601562, 402.5670166015625),
                (195.74551391601562, 388.2469482421875),
                (179.63951110839844, 374.610595703125),
                (223.13531494140625, 388.39453125),
                (238.7168731689453, 375.0908203125),
                (117.08203125, 427.7219543457031),
                (115.65000915527344, 437.1592712402344),
                (120.7928695678711, 443.9233093261719),
                (301.0545654296875, 427.9809265136719),
                (298.2004089355469, 437.69793701171875),
                (293.6685791015625, 444.44207763671875)]
    
    // 原始图片的宽高比
    private var imageAspectRatio: CGFloat {
        CGFloat(image.size.width) / CGFloat(image.size.height)
    }
    
    // 将原始点转换为相对图片的百分比坐标
    private func relativePoint(for rawPoint: CGPoint) -> CGPoint {
        CGPoint(
            x: rawPoint.x / image.size.width,
            y: rawPoint.y / image.size.height
        )
    }
    
    var body: some View {
        GeometryReader { reader in
            let containerSize = reader.size
            let containerAspectRatio = containerSize.width / containerSize.height
            
            // 计算图片实际显示的尺寸和偏移
            let imageDisplaySize: CGSize
            let imageOffset: CGOffset
            
            if containerAspectRatio > imageAspectRatio {
                // 容器更宽，图片纵向填满，横向裁剪
                imageDisplaySize = CGSize(
                    width: containerSize.height * imageAspectRatio,
                    height: containerSize.height
                )
                imageOffset = CGOffset(
                    x: (containerSize.width - imageDisplaySize.width) / 2,
                    y: 0
                )
            } else {
                // 容器更高，图片横向填满，纵向裁剪
                imageDisplaySize = CGSize(
                    width: containerSize.width,
                    height: containerSize.width / imageAspectRatio
                )
                imageOffset = CGOffset(
                    x: 0,
                    y: (containerSize.height - imageDisplaySize.height) / 2
                )
            }
            
            ZStack {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: containerSize.width, height: containerSize.height)
                
                VStack {
                    Text(animal.name)
                        .font(.largeTitle)
                    Text(animal.description)
                        .font(.body)
                        .background(Color.white.opacity(0.8))
                        .padding()
                }
                
                // 遍历所有点位，计算实际位置
                ForEach(data, id: \.self) { raw in
                    let rawPoint = CGPoint(x: CGFloat(raw.0), y: CGFloat(raw.1))
                    let relative = relativePoint(for: rawPoint)
                    let actualX = imageOffset.x + relative.x * imageDisplaySize.width
                    let actualY = imageOffset.y + relative.y * imageDisplaySize.height
                    
                    Circle()
                        .fill(Color.red)
                        .frame(width: 13, height: 13)
                        .position(x: actualX, y: actualY)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .padding()
            .navigationTitle("Animal Details")
        }
    }
}

#Preview {
    ContentView1()
}

效果说明 #

通过将原始点位转换为相对图片的百分比坐标，再结合图片实际显示区域的尺寸和偏移量计算绝对位置，侧边栏切换时，红色圆点会始终精准对应图片上的固定点位。

内容的提问来源于stack exchange，提问作者Muhammad Zubair Ghori