在 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() stroke/border的图像。我想要 .scale(dynamicScale) 根据图像的大小动态计算

据我所知，我无法插入任何 Swift 代码来读取该尺寸，例如 'let size = Image().frame.width'。合乎逻辑，那里还没有值。

有人有什么建议吗？

Answer 1

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

GeometryReader 占据了它可用的所有 space，如果在 overlay 修饰符内部使用，这似乎是它覆盖的视图的大小。

然后您可以读取 GeometryProxy 对象的属性以获取有关 space 它正在占用的大小的详细信息，并使用它来调整 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()
    }
}

在 SwiftUI 中，如何确定 Circle() 的大小以按比例绘制与该圆圈的叠加层？

In SwiftUI, how to determine a Circle()'s size to draw a overlay on scale with that circle?

geometry

overlay

swiftui