使用SwiftUI实现类似UIKit开发的内部问题追踪应用列表界面

调整方案 #

你现有代码的核心问题是listStyle修饰器位置错误、误用了只适用于List分组的Section组件、布局层级不符合设计需求。按照以下代码修改即可实现相似效果：

第一步：补全Issue模型协议

首先确保你的Issue结构体遵循Identifiable协议，满足ForEach遍历的要求：

struct Issue: Identifiable {
    let id: Int
    let title: String
    let description: String
    let postedBy: String
    let postedDate: String
    let status: String
    
    // 示例测试数据
    static let example: [Issue] = [
        Issue(id: 1, title: "登录页连续输错密码后崩溃", description: "用户输入错误密码超过3次后点击忘记密码按钮必现崩溃，已附崩溃日志", postedBy: "张明", postedDate: "2024-05-22", status: "待处理"),
        Issue(id: 2, title: "订单统计数据偏差", description: "上月交易统计页的订单数量和后台导出的报表数据相差17条，排查发现是已取消订单未排除统计", postedBy: "李丽", postedDate: "2024-05-21", status: "处理中")
    ]
}

第二步：调整ContentView代码

将listStyle修饰器移动到List组件上，去掉多余的子视图样式配置：

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(Issue.example) { issue in
                    NavigationLink(destination: IssueView(issue: issue)) {
                        IssueRow(issue: issue)
                    }
                }
            }
            .listStyle(.plain)
            .navigationTitle("问题追踪")
        }
    }
}

第三步：重写IssueRow布局

去掉错误的Section组件，按设计顺序排列右侧内容：

struct IssueRow: View {
    var issue: Issue
    
    var body: some View {
        HStack(alignment: .top, spacing: 16) {
            // 左侧编号圆形标识
            Text("\(issue.id)")
                .font(.headline)
                .fontWeight(.bold)
                .foregroundColor(.white)
                .frame(width: 44, height: 44)
                .background(.blue)
                .clipShape(Circle())
            
            // 右侧内容区域
            VStack(alignment: .leading, spacing: 8) {
                // 问题标题
                Text(issue.title)
                    .font(.headline)
                    .fontWeight(.semibold)
                
                // 问题描述
                Text(issue.description)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                    .lineLimit(2)
                
                // 底部发布信息与状态
                HStack {
                    Text("发布人：\(issue.postedBy) | \(issue.postedDate)")
                        .font(.caption)
                        .foregroundColor(.secondary)
                    
                    Spacer()
                    
                    // 状态标签
                    Text(issue.status)
                        .font(.caption)
                        .fontWeight(.medium)
                        .foregroundColor(.white)
                        .padding(.horizontal, 8)
                        .padding(.vertical, 2)
                        .background(issue.status == "待处理" ? .orange : .green)
                        .clipShape(Capsule())
                }
            }
            .padding(.vertical, 8)
        }
        .padding(.vertical, 4)
    }
}

调整说明

• 父容器HStack设置alignment: .top，让左侧编号和右侧内容顶部对齐，符合常规列表阅读逻辑
• 去掉了只用于List分组的Section组件，直接用VStack按标题→描述→底部信息的顺序排列，避免出现多余的分组内边距
• 为状态字段增加了胶囊背景样式，可根据不同状态自定义背景色
• 为描述文本增加了行数限制，避免长文本撑高列表行
• 全局调整了各元素的间距和内边距，避免布局过于松散

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