Creating a UI using SwiftUI

Question

This is a screenshot of an existing app created using UIKit. This is an in internal issue tracker app. There is an issue number on the left. The right panel consists of the issue title, issue description, posted details, status.

My model is a struct called Issue, with properties id (for issue number), title, description, postedBy, postedDate and status.

I'm struggling to create this in SwiftUI, especially with the modifiers. I don't need the final result to be exactly the same as before, similar is good enough.

Here is what I have now:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(Issue.example) { issue in
                    NavigationLink(destination: IssueView(issue: issue)) {
                        IssueRow(issue: issue)
                    }
                }
            }
        }
    }
}

struct IssueRow: View {
var issue: Issue

var body: some View {
    HStack {
        Image(systemName: "\(issue.id).circle")
            .frame(width: 30, height: 30)
            .padding()
            .background(Color.blue)
            .clipShape(Circle())
        
        VStack {
            Section(header: Text(issue.title)
                            .padding(), footer:
                Text("Posted by \(issue.postedBy) on \(issue.postedDate)")
                    .padding()

                ) {
                    Text(issue.description + "~")
                        .padding()
            }
        }
        .listStyle(GroupedListStyle())
       }
    }
}

This produces the following result:

Answer 1

This is all I could do in a short time. Hopefully it gives you a few ideas about the "modifiers".

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct Issue: Decodable, Identifiable {
    let id: Int
    let title: String
    let descript: String
    
    var status = "Yet To Start"
    var postedBy = "someone"
    var postedDate = Date()
    
    static var example = [
        Issue(id: 1, title: "Feature Request", descript: "some description1"),
        Issue(id: 2, title: "Feature Request", descript: "some description2"),
        Issue(id: 3, title: "Feature Request", descript: "some description3")
    ]
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(Issue.example, id: \.id) { issue in
                    NavigationLink(destination: Text(issue.title)) {
                        IssueRow(issue: issue)
                            .background(LinearGradient(gradient:
                               Gradient(colors: [Color(UIColor.systemIndigo), .blue]),
                              startPoint: .top, endPoint: .bottom))
                    }
                }
            }
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

struct IssueRow: View {
    var issue: Issue
    
    var body: some View {
        HStack {
            Text("\(issue.id)").bold()
                .padding(20)
                .foregroundColor(.red)
                .background(Color(UIColor.systemGray5))
                .clipShape(RoundedRectangle(cornerSize: CGSize(width: 10, height: 10)))
            
            VStack (alignment: .leading) {
                Section(header: Text(issue.title).foregroundColor(.yellow),
                       footer: Text("Posted by \(issue.postedBy) on \(inMyFormat(issue.postedDate))")
                            .foregroundColor(.yellow).font(.caption)
                ) {
                    Text(issue.descript).foregroundColor(.white)
                }
                HStack {
                    Spacer()
                    Text(issue.status).foregroundColor(.white)
                }
            }.padding(.horizontal, 10)
            .listStyle(GroupedListStyle())
        }.padding(.horizontal, 10)
        
    }
    
    func inMyFormat(_ date: Date) -> String {
        // format the date here
        return "13 July 2021"
    }
}