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:

score 1 · Accepted Answer · answered Jul 13 '21 at 08:55

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"
    }
}

In your solution, the blue gradient does not extend all the way to the left and right, there is also a gap on top and bottom. There doesn't seem to be an explicit modifier. Why are the spaces there and how to get rid of them? — bridgenbarbu, Jul 15 '21 at 08:50
I got the answer - Add this modifier .listRowInsets(EdgeInsets()) to the view inside the list, as per this Stack Overflow Thread: https://stackoverflow.com/questions/56614080/how-to-remove-the-left-and-right-padding-of-a-list-in-swiftui — bridgenbarbu, Jul 15 '21 at 09:12

Creating a UI using SwiftUI

1 Answers1