GeometryReader在.task中初始size为0的原因及正确解法咨询

问题背景 #

我正在开发一款App，主界面展示项目列表，详情页（DetailView）展示选中项的图片与详情。为降低图片内存占用，我在DetailView的.task修饰符中使用GeometryReader闭包参数的size进行图片降采样，但首次获取的size宽高均为0，导致图片无法显示。调试发现先获取到0值，之后才会得到正确值，通过.task(id: size)修饰符可正常显示图片，但不确定该写法是否正确。此外想咨询三个问题：

1. 初始size.width、size.height均为0的原因；
2. 当前使用.task(id: size)的解法是否正确；
3. 是否应始终对图片进行降采样。

相关代码：

struct ContextView: View {
    @State private var seletedItem: Item?
    var body: some View {
        MainListView()
            .sheet(item: $seletedItem) { item in
                GeometryReader { proxy in // 原代码笔误为GeometryProxy，此处修正
                    let size = proxy.size // 👈
                    DetailImageView(item: item, size: size)
                        .ignoresSafeArea(.container, edges: .top)

                }
            }
    }
}

struct DetailImageView: View {
    var item: Item
    var size: CGSize
    @State private var uiImage: UIImage? = nil

    var body: some View {
        ScrollView {
            GeometryReader { proxy in
                let childSize = proxy.size
                if let uiImage {
                    Image(uiImage: uiImage)
                        .resizable()
                        .scaledToFill()
                        .frame(width: childSize.width, height: childSize.height)
                }
            }
            .frame(height: size.height)
        }
        .coordinateSpace(name: "scroll")
        .task {
            // ❌ 无法显示图片，size宽高均为0
            uiImage = downsampleImage(imageData: item.imageData,
                                      to: CGSize(width: size.width, height: size.height))
        }
        .task(id: size) {
            // ✅ 正常显示图片
            uiImage = downsampleImage(imageData: item.imageData,
                                      to: CGSize(width: size.width, height: size.height))
        }
    }

    private func downsampleImage(imageData: Data, to pointSize: CGSize, scale: CGFloat = UIScreen.main.scale) -> UIImage {
        let imageSourceOptions = [kCGImageSourceShouldCache: false] as CFDictionary
        guard let imageSource = CGImageSourceCreateWithData(imageData as CFData, imageSourceOptions) else { return UIImage() }

        let maxDimensionInPixels = max(pointSize.width, pointSize.height) * scale
        let downsampleOptions = [
            kCGImageSourceCreateThumbnailFromImageAlways: true,
            kCGImageSourceShouldCacheImmediately: true,
            kCGImageSourceCreateThumbnailWithTransform: true,
            kCGImageSourceThumbnailMaxPixelSize: maxDimensionInPixels
        ] as CFDictionary

        guard let downsampledImage = CGImageSourceCreateThumbnailAtIndex(imageSource, 0, downsampleOptions) else { return UIImage() }
        return UIImage(cgImage: downsampledImage)
    }
}

我还尝试添加ProgressView优化加载状态，写法如下，请问是否正确：

@State private var isSizeZero = true

...

if isSizeZero {
     ProgressView()
}  else {
     if let uiImage {
                    Image(uiImage: uiImage)
                        .resizable()
                        .scaledToFill()
                }
}
.frame(width: childSize.width, height: childSize.height)

...

.task(id: size) {
            if size == .zero {
               isSizeZero = true
               return
            } else {
            uiImage = downsampleImage(imageData: item.imageData,
                                      to: CGSize(width: size.width, height: size.height))
            isSizeZero = false
        }

问题解答 #

1. 初始size为0的原因 #

SwiftUI的布局是渐进式计算的：

• 视图首次渲染时，父视图还未完成自身的尺寸测算，GeometryReader此时没有有效布局空间可以读取，只能返回CGSize.zero作为初始值。
• 当父视图完成布局、确定自身尺寸后，会触发子视图的重新计算，GeometryReader这时才能拿到正确的布局size。

2. 使用.task(id: size)的解法是否正确 #

这个写法合理且有效：

• .task(id:)的特性是当id参数发生变化时，会重新执行闭包内的逻辑。当size从CGSize.zero更新为有效尺寸时，闭包会自动触发，此时用正确的size进行降采样，就能生成适配显示的图片。
• 小提示：CGSize是结构体，默认相等判断会精确比较宽高的浮点数值。如果布局过程中size出现微小变化（比如小数位差异），可能会重复触发task。可以对size做近似处理（比如取整）后作为id，或者自定义判断逻辑，避免不必要的重复执行。

3. 是否应始终对图片进行降采样 #

建议绝大多数场景下都要做降采样：

• 原始图片的分辨率通常远高于设备屏幕的显示需求，直接加载会占用大量内存，甚至可能引发内存警告或App崩溃。
• 降采样可以根据实际显示尺寸生成对应分辨率的图片，既能大幅降低内存占用，又能保证显示清晰度。
• 例外情况：如果图片本身就是为当前显示尺寸设计的（比如小图标、低分辨率缩略图），降采样的收益不大，可以跳过。

ProgressView写法判断 #

你添加ProgressView的写法是可行的，但可以优化细节：

1. 不需要额外维护isSizeZero状态，直接结合uiImage的状态判断即可，代码更简洁：

   if uiImage == nil {
       ProgressView()
   } else {
       Image(uiImage: uiImage!)
           .resizable()
           .scaledToFill()
   }
   

2. 判断size是否为0时，要注意浮点数精度问题，建议用size.width > 0 && size.height > 0替代size == .zero，避免因微小数值误差导致判断错误。

内容的提问来源于stack exchange，提问作者idhun90