在SwiftUI中，如何确定Circle（）的大小以在该圆形上按比例绘制覆盖图？

Question

欢迎使用Target的iOS和macOS。

我有这个非常通用的代码来绘制Image和一些文本：

    let dynamicScale = 1.2 // here just static but will be !!calculated!!
    ... 
    VStack (alignment: .leading){
            Image(user.imageName)
                .resizable()
                .frame(width: 60, height: 60)
                .clipped()
                .clipShape(Circle())
                .overlay(Circle()
                    .scale(dynamicScale) // with some calculation
                    .stroke(Color.red, lineWidth: 2))


            Text(user.username).font(.headline)
            Text(user.message).font(.subheadline)
            }.padding(.init(top: 10, leading: 5, bottom: 10, trailing: 5))
    }

目前大小是静态的，但是稍后，它的大小将取决于屏幕的大小和旋转角度。因此，笔划将取决于笔画，大小和更多设置。我如何在SwiftUI中动态获取circle size（frame），所以我可以用它在Image的偏移处绘制第二个Circle（）笔触/边框。我想根据图像的大小动态计算.scale(dynamicScale)

据我了解，我无法插入任何Swift代码来读取该大小，例如'let size = Image（）。frame.width'。逻辑上，尚无值。或者...

有人有什么建议吗？

Answer 1

这里是使用GeometryReader的交互式示例。

GeometryReader占据了所有可用空间，如果在overlay修饰符内部使用，则似乎是其要覆盖的视图的大小。

然后，您可以读取GeometryProxy对象的属性以获取有关其占用空间大小的详细信息，并使用该大小来调整GeometryReader内部视图的大小。

在这种情况下，我们有一个根据滑块动态调整大小的笔划圆，并覆盖了另一个始终总是第一个圆的一半大小的圆。

import SwiftUI

struct RelativeSizeView: View {
    @State var dynamicSize: CGFloat = 100
    var body: some View {
        VStack(spacing: 20) {
            Slider(value: $dynamicSize, in: 100...1000)
            Circle() // dynamically sized circle
                .stroke()
                .frame(width: dynamicSize, height: dynamicSize)
                .overlay(GeometryReader{ geometry in
                    Circle() // sized based on first
                        .frame(width: geometry.size.width*0.5, height: geometry.size.height*0.5)
                })
        }.padding()
    }
}

struct RelativeSizeView_Previews: PreviewProvider {
    static var previews: some View {
        RelativeSizeView()
    }
}