将List与异步加载的行一起使用并通过GeometryReader进行布局时的竞争条件

Question

这是来自Content hugging priority behaviour in SwiftUI的后续问题。

我有一个列表，其中每行都有一个异步加载的图像，它的高度是使用GeometryReader设置的。完整代码here：

struct CountryCell: View {
    let country: Country

    @State var childSize: CGSize = .init(width: 0, height: 50)

    var body: some View {
        HStack {
            AsyncImage(url: Endpoints.flag(countryCode: country.flagCode).url, placeholder: Image("flag"))
                .aspectRatio(contentMode: .fit)
                .frame(width: DeviceMetrics.size.width * 0.25, height: self.childSize.height)
            VStack(alignment: .leading, spacing: 5) {
                Text("Country: ").bold() + Text(self.country.name)
                Text("Capital: ").bold() + Text(self.country.capital)
                Text("Currency: ").bold() + Text(self.country.currency)
            }
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
            .background(
                GeometryReader { proxy -> AnyView in
                    DispatchQueue.main.async {
                        self.childSize = proxy.size
                    }
                    return AnyView(Color.clear)
            })
        }
    }
}

运行它，尽管发出了网络请求，但图像不会替换占位符（可能会随机显示十分之一）。我无法弄清楚，但预感这是通过GeometryReader和AsyncImage触发布局期间的竞争条件。如果您替换：

.frame(width: DeviceMetrics.size.width * 0.25, height: self.childSize.height)

具有：

.frame(width: DeviceMetrics.size.width * 0.25)

然后图像将正确显示。同样，如果您注释掉GeometryReader，事情也将开始起作用。

任何提示将不胜感激。