SwiftUI开发iOS电商App首页：TableView与CollectionView实现求助

针对你用SwiftUI构建电商首页的需求，结合你提供的代码，以下是更规范、高效的实现方案，对应UIKit中TableView+CollectionView的布局逻辑：

一、核心组件对应关系 #

在SwiftUI中：

• UIKit的UITableView → 用ScrollView+VStack（首页纵向滚动场景更灵活）或List
• UIKit的横向UICollectionView → 用ScrollView+LazyHStack（大数据量下性能更优）

二、代码优化与完整实现 #

1. 定义数据模型（模拟电商业务数据） #

// 我的编辑模块数据模型
struct MyEditItem: Identifiable {
    let id = UUID()
    let title: String
    let coverImage: String // 实际项目可替换为AsyncImage加载网络图
}

// 新海报模块数据模型
struct NewPosterItem: Identifiable {
    let id = UUID()
    let name: String
    let price: String
    let coverImage: String
}

2. 首页视图完整实现 #

struct HomeView: View {
    // 模拟测试数据
    private let myEdits: [MyEditItem] = [
        MyEditItem(title: "定制编辑1", coverImage: "edit_cover1"),
        MyEditItem(title: "定制编辑2", coverImage: "edit_cover2")
    ]
    
    private let newPosters: [NewPosterItem] = [
        NewPosterItem(name: "夏日限定海报", price: "¥99", coverImage: "poster_cover1"),
        NewPosterItem(name: "复古风海报", price: "¥129", coverImage: "poster_cover2"),
        NewPosterItem(name: "极简海报", price: "¥89", coverImage: "poster_cover3"),
        NewPosterItem(name: "节日主题海报", price: "¥159", coverImage: "poster_cover4"),
        NewPosterItem(name: "文艺海报", price: "¥79", coverImage: "poster_cover5")
    ]
    
    var body: some View {
        // 整个页面纵向滚动，替代UIKit的UITableView
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 20) {
                // 第一分区：My Edits
                SectionHeader(title: "My Edits") {
                    print("点击查看全部我的编辑")
                    // 这里跳转至全部编辑页面的逻辑
                }
                
                // 横向滚动列表，替代UIKit的横向UICollectionView
                ScrollView(.horizontal, showsIndicators: false) {
                    LazyHStack(spacing: 12) {
                        ForEach(myEdits) { item in
                            MyEditCell(item: item)
                                .frame(width: 180, height: 200)
                        }
                    }
                    .padding(.horizontal, 10)
                }
                
                // 第二分区：New Posters
                SectionHeader(title: "New Posters") {
                    print("点击查看全部新海报")
                    // 这里跳转至全部海报页面的逻辑
                }
                
                ScrollView(.horizontal, showsIndicators: false) {
                    LazyHStack(spacing: 12) {
                        ForEach(newPosters) { item in
                            NewPostersCell(item: item)
                                .frame(width: UIScreen.main.bounds.width * 0.6, height: UIScreen.main.bounds.height / 3 + 30)
                        }
                    }
                    .padding(.horizontal, 10)
                }
                
                Spacer(minLength: 20) // 底部留白
            }
            .padding(.top, 40) // 顶部留白
        }
    }
}

// 复用的分区标题组件（替代你之前的LazyHGrid实现）
struct SectionHeader: View {
    let title: String
    let showAllAction: () -> Void
    
    var body: some View {
        HStack {
            Text(title)
                .font(.headline)
                .fontWeight(.semibold)
            
            Spacer() // 自动填充中间空间，让按钮靠右对齐
            
            Button(action: showAllAction) {
                Text("View all")
                    .font(.caption)
                    .foregroundColor(.darkGray)
            }
        }
        .padding(.horizontal, 10)
        .frame(height: 30)
    }
}

// MyEditCell自定义单元格
struct MyEditCell: View {
    let item: MyEditItem
    
    var body: some View {
        VStack {
            Color.gray // 模拟封面图
                .cornerRadius(8)
            Text(item.title)
                .font(.subheadline)
                .padding(.top, 8)
        }
        .background(Color.white)
        .cornerRadius(8)
        .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
    }
}

// NewPostersCell自定义单元格
struct NewPostersCell: View {
    let item: NewPosterItem
    
    var body: some View {
        VStack {
            Color.blue // 模拟海报图
                .cornerRadius(8)
            Text(item.name)
                .font(.subheadline)
                .padding(.top, 8)
            Text(item.price)
                .font(.caption)
                .foregroundColor(.red)
                .padding(.top, 4)
        }
        .background(Color.white)
        .cornerRadius(8)
        .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
    }
}

// 自定义颜色扩展（适配你原代码的颜色定义）
extension Color {
    static let darkGray = Color(UIColor.darkGray)
}

三、关键优化点说明 #

• 标题栏简化：用HStack+Spacer替代LazyHGrid，更适合仅标题+右侧按钮的场景，避免过度使用网格布局。
• 性能优化：使用LazyHStack替代普通HStack，仅渲染当前可见单元格，对应UIKit的UICollectionView复用机制，大数据量下性能更优。
• 数据驱动：用Identifiable协议配合ForEach遍历真实数据模型，而非硬编码索引数，符合SwiftUI声明式编程思想。
• 组件复用：将分区标题抽为独立组件SectionHeader，减少重复代码，方便后续统一修改样式。
• 整体滚动容器：将所有内容包裹在纵向ScrollView中，确保内容超出屏幕时可滚动，对应UIKit的UITableView功能。

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