UITableViewCell中SwiftUI AsyncImage复用闪烁旧图问题解决

我用UITableViewController实现了无限滚动列表，用来对比UITableView和SwiftUI的长列表性能。整体运行正常，但遇到一个问题：复用包含AsyncImage的单元格时，会短暂显示之前加载的旧图。推测是单元格复用导致SwiftUI视图树误将新单元格识别为同一实例，直到新图片加载（或缓存未命中切换到ProgressView）才更新。

同时希望去掉UIScreen.main.bounds的写法，之前尝试GeometryReader但影响了布局。

以下是精简后的核心代码：

CommunityMessageListViewController #

@MainActor
public class CommunityMessageListViewController: UITableViewController {
    private let cellIdentifier = "cellIdentifier"

    public override func viewDidLoad() {
        super.viewDidLoad()

        setupTableView()
        Task {
            await observe(buffer: messageBuffer)
        }
    }

    public override func tableView(
        _ tableView: UITableView,
        cellForRowAt indexPath: IndexPath
    ) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(
            withIdentifier: cellIdentifier,
            for: indexPath
        )

        cell.contentConfiguration = UIHostingConfiguration {
            buildView(for: indexPath)
        }
        .margins(.horizontal, 8)
        .margins(.vertical, 4)
        .background { Color.clear }

        return cell
    }

    private func setupTableView() {
        tableView.register(
            UITableViewCell.self,
            forCellReuseIdentifier: cellIdentifier
        )

        tableView.allowsSelection = true
        tableView.separatorStyle = .none
        tableView.backgroundColor = .gray

        tableView.contentInsetAdjustmentBehavior = .always
    }
}

CommunityMessageCell #

@MainActor
public struct CommunityMessageCell: View {
    private let screenInset: CGFloat

    public var body: some View {
        Group {
            VStack(alignment: .leading) {
                if let attachment = message.imageAttachment {
                    factory.buildMessageCellImage(
                        for: attachment.url,
                        screenInset: screenInset
                    )
                        .aspectRatio(Constants.imageRatio, contentMode: .fill)
                }
                factory.buildMessageCellContent()
                    .padding()
                    .frame(maxWidth: .infinity)
            }.clipped()
            .background(.white)
            .frame(maxWidth: .infinity)
            .cornerRadius(Constants.cornerRadius, antialiased: true)
            .overlay(
                RoundedRectangle(cornerRadius: Constants.cornerRadius)
                    .inset(by: Constants.borderWidth)
                    .strokeBorder(
                        .gray,
                        lineWidth: Constants.borderWidth,
                        antialiased: true
                    )
            )
        }
        .padding(.horizontal)
        .padding(.top)
        .background(.clear)
    }
}

MessageCellImage #

@MainActor
public struct MessageCellImage: View {
    private let imageURL: URL
    private let screenInset: CGFloat

    public init(
        imageURL: URL,
        screenInset: CGFloat // 容器水平方向的内边距
    ) {
        self.imageURL = imageURL
        self.screenInset = screenInset
    }

    public var body: some View {
        AsyncImage(url: imageURL) { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fill)
        } placeholder: {
            ProgressView()
        }
        .frame(
            width: UIScreen.main.bounds.size.width - screenInset * 2,
            height: (UIScreen.main.bounds.size.width - screenInset * 2) / Constants.imageRatio
        )
        .clipped()
    }
}

解决方案 #

1. 解决AsyncImage复用显示旧图问题 #

核心思路是给SwiftUI视图添加唯一标识（id），让SwiftUI能区分不同的单元格实例，避免复用视图时混淆内容。

方法一：在单元格根视图添加唯一ID

修改CommunityMessageCell，给根Group加上基于消息唯一标识的id（假设message有唯一的id属性）：

Group {
    // 原VStack内容
}
.id(message.id) // 用消息唯一ID作为视图标识
.padding(.horizontal)
.padding(.top)
.background(.clear)

方法二：在UIHostingConfiguration中添加ID

如果无法直接访问message，可以在cellForRowAt中给构建的视图添加ID：

cell.contentConfiguration = UIHostingConfiguration {
    buildView(for: indexPath)
        .id(messageBuffer[indexPath.row].id) // 用当前消息的唯一ID标识
}
// 原修饰符

方法三：给MessageCellImage添加URL作为ID

如果图片URL是唯一的，也可以在MessageCellImage中添加ID：

public var body: some View {
    AsyncImage(url: imageURL) { image in
        image
            .resizable()
            .aspectRatio(contentMode: .fill)
    } placeholder: {
        ProgressView()
    }
    .id(imageURL) // 用图片URL作为唯一标识
    // 原布局修饰符
}

原理：SwiftUI通过id判断视图是否为同一实例，当id变化时，会重建视图或强制更新，确保AsyncImage加载对应URL的图片，不会复用之前的旧图。

2. 移除UIScreen.main.bounds的布局优化 #

通过自适应布局替代硬编码屏幕宽度，让视图自动适配容器尺寸：

修改MessageCellImage的body，去掉硬编码的宽高，改用maxWidth: .infinity结合aspectRatio来保持宽高比：

public var body: some View {
    AsyncImage(url: imageURL) { image in
        image
            .resizable()
            .aspectRatio(contentMode: .fill)
    } placeholder: {
        ProgressView()
    }
    .aspectRatio(Constants.imageRatio, contentMode: .fill) // 保持指定宽高比
    .frame(maxWidth: .infinity) // 宽度自适应容器
    .clipped()
}

同时可以移除screenInset参数，因为外层CommunityMessageCell已经有.padding(.horizontal)，视图宽度会自动减去内边距，无需手动计算。修改后的MessageCellImage初始化方法：

public init(imageURL: URL) {
    self.imageURL = imageURL
}

这样视图会自动适配UITableViewCell的宽度，无需依赖UIScreen.main.bounds，同时保持正确的宽高比。

内容的提问来源于stack exchange，提问作者Lucas van Dongen