使用 SwiftUI 创建 UI

Question

这是使用 UIKit 创建的现有应用的屏幕截图。这是一个内部问题跟踪器应用程序。左边有一个问题编号。右侧面板包含问题标题、问题描述、发布的详细信息、状态。

我的模型是一个名为 Issue 的结构，具有属性 id（用于问题编号）、标题、描述、postedBy、postedDate 和状态。

我正在努力在 SwiftUI 中创建它，尤其是使用修饰符。我不需要最终的结果和以前完全一样，相似就足够了。

这是我现在拥有的：

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())
       }
    }
}

这会产生以下结果：

Answer 1

这是我短时间内所能做的。希望它能给你一些关于 “修饰符”。

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