SwiftUI中OG Image与User Image重叠问题排查及布局咨询

开发者阿泽

2026-7-7

问题分析与解决方案

问题原因

不是HStack本身的问题，核心是条件渲染导致的布局突变：
一开始只有OG图在HStack中，HStack会基于这唯一元素完成布局；当User图加载完成后，HStack内元素数量从1变成2，布局会重新计算，OG图会和User图并排排列，视觉上看起来像是OG图的位置被替换了。

解决办法

要避免布局突变，关键是提前给User图预留占位空间，让HStack的布局在User图加载前后保持一致：

修改后的代码片段

HStack(alignment: .center) { // 添加上下对齐，让两张图垂直居中
    // OG Image
    if let uiImage = webViewStore.fetchedUIImage {
        Image(uiImage: uiImage)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 100, height: 100)
            .cornerRadius(5)
    }
    
    // User Image + 占位符
    if let userProfileImage = webViewStore.fetchedProfileUIImage {
        Image(uiImage: userProfileImage)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 20, height: 20)
            .clipShape(Circle())
            .padding(.leading, 10)
    } else {
        // 占位空间：User图宽度(20) + 左边padding(10)
        Color.clear.frame(width: 30)
    }
}