SwiftUI中KFImage搭配aspectRatio()与layoutPriority()的布局异常问题

解决方案 #

核心问题是加载完成的KFImage会把自身的固有尺寸优先参与布局计算，直接撑开了你外层设置的固定宽高比容器，导致布局错乱。你只需要调整3处代码即可实现需求：

1. 给外层设置了158/220宽高比的ZStack添加maxWidth: .infinity约束，确保容器优先撑满父级给定的宽度，再按固定比例计算高度，不会被内部图片撑开
2. 取消KFImage的aspectRatio(contentMode: .fill)注释，保证图片等比例填充容器不会变形
3. 给该ZStack添加.clipped()修饰符，裁剪掉超出容器范围的图片部分

修改后的对应代码段：

ZStack {
    KFImage(self.thumbnailURL)
        .cancelOnDisappear(true)
        .placeholder {
            ZStack {
                Color(.black)
                Image("image_placeholder_background")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .layoutPriority(-1)
            }
        }
        .resizable()
        .aspectRatio(contentMode: .fill) // 取消注释
}
.aspectRatio(158.0 / 220.0, contentMode: .fit)
.frame(maxWidth: .infinity) // 新增约束
.clipped() // 新增裁剪
.cornerRadius(16.0)

补充说明

你之前给KFImage加layoutPriority(-1)无效的原因是，外层容器本身没有声明优先占满父宽度的约束，系统布局计算时会优先参考内部图片的固有尺寸，只要外层容器先固定了尺寸优先级，内部图片的填充模式就不会影响整体布局。

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