SwiftUI开发：如何在Rectangle中插入图片实现eBay式移动端列表？

问题分析 #

你当前代码用Rectangle做占位但未插入实际图片，且scaledToFit与frame(width:180)的组合无法精准控制宽高比，同时clipShape的冗余参数也可能影响最终效果。以下是针对性修正方案：

修正步骤 #

1. 替换占位容器：用Image（本地图片）或AsyncImage（网络图片）替代Rectangle作为图片载体
2. 锁定宽高比：通过aspectRatio或固定frame宽高来定义图片的矩形比例
3. 简化圆角裁剪：精简clipShape参数，确保圆角正确作用于图片
4. 优化布局层级：移除不必要的嵌套容器，让结构更简洁

完整修正代码 #

ScrollView {
    VStack {
        Divider()
        
        HStack(alignment: .top, spacing: 12) { // 增加间距优化排版
            // 本地图片示例，替换为你的图片名称
            Image("iveco-truck")
                .resizable()
                .aspectRatio(4/3, contentMode: .fill) // 自定义宽高比，比如4:3
                .frame(width: 180, height: 135) // 对应宽高比的固定尺寸
                .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous))
            
            // 网络图片示例（如果用远程图片则启用这段）
            // AsyncImage(url: URL(string: "https://example.com/your-image.jpg")) { image in
            //     image.resizable()
            //         .aspectRatio(4/3, contentMode: .fill)
            //         .frame(width: 180, height: 135)
            //         .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous))
            // } placeholder: {
            //     Rectangle() // 加载占位容器
            //         .fill(Color.gray.opacity(0.2))
            //         .frame(width: 180, height: 135)
            //         .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous))
            // }
            
            VStack(alignment: .leading, spacing: 8) { // 统一内部元素间距
                Text("Iveco Daily 2.3 XLWB Automatic with Penumatic suspension")
                    .font(.title3)
                    .lineLimit(2) // 限制行数避免文本溢出
                Text("Pre-owned")
                    .font(.footnote)
                    .fontWeight(.semibold)
                    .foregroundStyle(.secondary)
                Text("£9,400.00")
                    .font(.title2)
                    .fontWeight(.bold)
                Text("London")
                    .font(.subheadline)
                    .fontWeight(.semibold)
                    .foregroundStyle(.gray)
            }
            .padding(.vertical, 4)
        }
        .padding(.horizontal, 8)
        
        Divider()
    }
}
.contentMargins(5)

关键说明 #

• 图片适配：.resizable()让图片支持缩放，.aspectRatio固定比例，.contentMode: .fill保证图片填满容器且不拉伸变形
• 圆角生效：clipShape直接作用于Image组件，确保圆角裁剪的是图片而非空容器
• 排版优化：通过spacing参数统一控件间距，替代零散的padding设置，布局更规整

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