SwiftUI 4 All In One

https://developer.apple.com/xcode/swiftui/

WWDC22 - Apple Developer

https://developer.apple.com/wwdc22/

SwiftUI 4

SwiftUI Charts

Resizable Bottom Sheet

MultiDatePicker

struct MultiDatePickerDemo: View {
    @State private var selectedDates: Set<DateComponents> = []
    var body: some View {
        MultiDatePicker("Choose your preferred dates", selection: $selectedDates)
            .frame(height: 300)
    }
}

NavigationStack and NavigationSplitView

ShareLink for Data Sharing

struct ShareLinkDemo: View {
    private let url = URL(string: "https://www.xgqfrms.xyz")!
    var body: some View {
        ShareLink(item: url)
    }
}

Table for iPadOS


struct TableViewDemo: View {
 
    private let members: [Staff] = [
        .init(name: "Vanessa Ramos", position: "Software Engineer", phone: "2349-233-323"),
        .init(name: "Margarita Vicente", position: "Senior Software Engineer", phone: "2332-333-423"),
        .init(name: "Yara Hale", position: "Development Manager", phone: "2532-293-623"),
        .init(name: "Carlo Tyson", position: "Business Analyst", phone: "2399-633-899"),
        .init(name: "Ashwin Denton", position: "Software Engineer", phone: "2741-333-623")
    ]
 
    var body: some View {
        Table(members) {
            TableColumn("Name", value: \.name)
            TableColumn("Position", value: \.position)
            TableColumn("Phone", value: \.phone)
        }
    }
}

Expandable Text Field

Gauge

struct GaugeViewDemo: View {
    @State private var progress = 0.5
 
    var body: some View {
        Gauge(value: progress) {
            Text("Upload Status")
        }
    }
}

Gauge(value: progress) {
    Text("Upload Status")
} currentValueLabel: {
    Text(progress.formatted(.percent))
} minimumValueLabel: {
    Text(0.formatted(.percent))
} maximumValueLabel: {
    Text(100.formatted(.percent))
}

ViewThatFits

Gradient and Shadow


Image(systemName: "trash")
    .frame(width: 100, height: 100)
    .background(in: Rectangle())
    .backgroundStyle(.purple.gradient)
    .foregroundStyle(.white.shadow(.drop(radius: 1, y: 3.0)))
    .font(.system(size: 50))

Grid API

Grid {
    GridRow {
        IconView(systemName: "trash")
        IconView(systemName: "trash")
    }
 
    GridRow {
        IconView(systemName: "trash")
        IconView(systemName: "trash")
    }
}