在 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)，以便我可以使用它在图像的偏移处绘制第二个 Circle() 笔划/边框。我想.scale(dynamicScale)根据图像的大小动态计算

据我所知，我无法插入任何 Swift 代码来读取该大小，例如“let size = Image().frame.width”。逻辑上，那里还没有值。

有人有一些建议吗？

Answer 1

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

GeometryReader占用了所有可用空间，如果在覆盖修改器内部使用，这似乎是它覆盖的视图的大小。

然后，您可以读取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()
    }
}