当 navigationSplitView (.balanced) 打开或关闭时，在 ZStack 中出现圆圈，精确图像位置

Question

    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)]
    var body: some View {
        let cgPoints = data.map { CGPoint(x: CGFloat($0.0), y: CGFloat($0.1)) }
        GeometryReader { reader in

            ZStack {
                Image(uiImage: image!)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: reader.size.width, height: reader.size.height)
                VStack {
                    Text(animal.name)
                        .font(.largeTitle)
                    Text(animal.description)
                        .font(.body)
                }
                ForEach(cgPoints, id: \.self) { vertex in
                    Circle()
                        .fill(Color.red)
                        .frame(width: 13, height: 13)
                        **.position(vertex)**
                }

            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .padding()
            .navigationTitle("Animal Details")
        }
    }

}

#Preview {
    ContentView1()
}

** 我们有背景图像，并且想要在图像的某些点上显示圆圈。如何修复在侧边栏打开或关闭时在同一位置显示圆圈的问题？它应该在图像上的相同位置吗？

我已经使用该方法根据 newWidth 和 oldWidth 计算比例因子，但它使圆圈远离所需的位置。 **

Answer 1

尝试将

alignment: .leading

添加到图像上的

.frame

修改器。

为了尝试一下，我还必须使用

ForEach

修复错误：

ZStack {
    Image(uiImage: image!)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: reader.size.width, height: reader.size.height, alignment: .leading) // <- alignment added
    VStack {
        // ...
    }
    // ForEach(cgPoints, id: \.self) { vertex in
    ForEach(Array(cgPoints.enumerated()), id: \.offset) { offset, vertex in
        // ...
    }
}