SwiftUI dalam Pengembangan Mobile: Apa Itu, Konsep Kunci dan Cara Kerjanya

Dasar (View Protocol, body, some View, @ViewBuilder)

View Protocol adalah protokol pusat SwiftUI. Hanya membutuhkan satu properti: var body: some View. body adalah properti terhitung yang mengembalikan deskripsi UI. SwiftUI memanggil body setiap kali status berubah dan merender hasilnya di GPU.

@ViewBuilder

@ViewBuilder adalah Result Builder untuk View. Memungkinkan penulisan banyak Views di dalam closure tanpa return dan tanpa TupleView. Mendukung if/else, switch, ForEach. Semua container (VStack, HStack, ZStack, Group) menggunakan @ViewBuilder. Alternatifnya adalah Group { … } untuk pengelompokan tanpa tata letak. some View adalah Opaque Type. Kompiler mengetahui tipe View spesifik (Text, Button, VStack, dll.), tetapi mengembalikannya secara eksternal sebagai some View. Ini memungkinkan perubahan tipe body tanpa mengubah tanda tangan. ViewModifier — pengubah View: .font(), .padding(), .background(). Pengubah kustom melalui ViewModifier protocol dan .modifier().

// Contoh View dengan @ViewBuilder dan NavigationStack
struct ContentView: View {
    @State private var items = ["Item 1", "Item 2"]

    var body: some View {
        NavigationStack {
            List(items, id: .self) { item in
                NavigationLink(item) {
                    DetailView(item: item)
                }
            }
            .navigationTitle("Items")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Add") {
                        items.append("New Item")
                    }
                }
            }
        }
    }
}

// DetailView dengan @StateObject
struct DetailView: View {
    let item: String
    @StateObject private var viewModel = DetailViewModel()

    var body: some View {
        Text(item)
            .task {
                await viewModel.loadDetails(for: item)
            }
    }
}

Pengubah dan Container (ViewModifier, NavigationStack, List, Form)

NavigationStack (iOS 16+) — navigasi berbasis data. Menerima jalur (array nilai hashable) dan menampilkan tujuan melalui navigationDestination. Menggantikan NavigationLink dengan tampilan tujuan. NavigationLink — tombol untuk navigasi tumpukan. List — daftar vertikal dengan bagian, gesekan, penghapusan, dan seret dan lepas. Form — List khusus untuk pengaturan: bagian, pemilih, sakelar, bidang teks. Section — pengelompokan di List/Form dengan tajuk dan footer. ViewModifier — pengubah kustom untuk menggunakan kembali gaya. .modifier(CustomModifier()) — penerapan.

List dan Form secara Detail

List di SwiftUI setara dengan UITableView. Mendukung .onDelete, .onMove, .refreshable. SwipeActions — .swipeActions { Button("Hapus", role: .destructive) { } }. Form — dioptimalkan untuk pengaturan: DatePicker, Toggle, Stepper, Picker. Section dengan header/footer — untuk pengelompokan. OutlineGroup — daftar hierarkis (setara UITableView dengan bagian). DisclosureGroup — bagian yang dapat dilipat dengan konten. IT Sectr merekomendasikan List untuk data dan Form untuk pengaturan.

PreviewProvider — protokol untuk pratinjau di Xcode Canvas. Canvas — pratinjau SwiftUI interaktif (membutuhkan @main dan Swift 5.9+). @ScaledMetric — ukuran adaptif yang menskala dengan Dynamic Type.

Manajemen Status (@StateObject, @ObservedObject, @EnvironmentObject, @FocusState)

Property Wrappers adalah dasar manajemen status di SwiftUI. @State — status lokal (tipe nilai). @Binding — koneksi ke status induk. @StateObject — membuat ObservableObject. SwiftUI mengelola siklus hidup objek. @ObservedObject — mengamati ObservableObject eksternal. @EnvironmentObject — objek dari lingkungan (injeksi dependensi melalui .environmentObject()). @Environment — nilai sistem (.colorScheme, .locale). @AppStorage — UserDefaults. @FetchRequest — kueri Core Data. @FocusState — fokus input.

@StateObject vs @ObservedObject: @StateObject membuat objek, @ObservedObject mengamatinya. Gunakan @StateObject untuk pembuatan model pertama dalam hierarki, @ObservedObject untuk meneruskan ke tampilan anak. @FocusState — manajemen fokus: .focused($field, equals: .email). Mendukung enum untuk banyak bidang.

Nilai Lingkungan dan DI

@Environment — nilai sistem: colorScheme, locale, sizeCategory, layoutDirection, managedObjectContext. Nilai Lingkungan Kustom — nilai kustom melalui EnvironmentKey. Digunakan untuk injeksi dependensi: meneruskan layanan tanpa parameter eksplisit. Pengubah .environment() — menetapkan nilai dalam hierarki. @EnvironmentObject — ObservableObject dari .environmentObject(). Berbeda dari @Environment karena meneruskan tipe referensi. IT Sectr merekomendasikan @Environment untuk nilai sistem dan @EnvironmentObject untuk layanan.

Siklus Hidup (.task, .onAppear, .onDisappear)

.task{} — operasi asinkron saat tampilan muncul. Pembatalan otomatis saat menghilang. Menggantikan .onAppear untuk async/await. .onAppear{} — operasi sinkron saat muncul. .onDisappear{} — operasi saat menghilang. .onChange(of:) — reaksi terhadap perubahan nilai. .onReceive(Publisher) — reaksi terhadap penerbit Combine. Siklus hidup View di SwiftUI: init → onAppear → body (rendering) → onDisappear. Saat status berubah: body → diff → render ulang. IT Sectr merekomendasikan .task untuk pemuatan asinkron dan .onAppear untuk analitik.

Animasi di SwiftUI

.animation() — pengubah animasi. .transition() — animasi muncul/hilang. withAnimation — animasi perubahan status eksplisit. matchedGeometryEffect — animasi antara tampilan berbeda (hero animation). PhaseAnimator (iOS 17+) — animasi multi-fase berdasarkan enum. KeyframeAnimator (iOS 17+) — animasi bingkai demi bingkai dengan keyframe. Animasi SwiftUI berjalan di GPU melalui Core Animation. IT Sectr merekomendasikan .spring() untuk animasi alami dan .interpolatingSpring untuk efek fisika.

Aliran Data (Bindings, @Published, ObservableObject)

ObservableObject — protokol untuk objek dengan properti @Published. SwiftUI berlangganan penerbit objectWillChange. @Published — mempublikasikan perubahan properti. @StateObject — membuat ObservableObject, mengelola siklus hidup. @ObservedObject — mengamati eksternal. Combine — framework untuk pemrograman reaktif. @EnvironmentObject — DI melalui lingkungan. .environmentObject() menetapkan, @EnvironmentObject membaca. MVVM — arsitektur standar: View (SwiftUI) — ViewModel (ObservableObject) — Model. IT Sectr merekomendasikan MVVM + @StateObject untuk ViewModel utama.

class UserViewModel: ObservableObject {
    @Published var users: [User] = []
    @Published var isLoading = false

    func loadUsers() async {
        isLoading = true
        defer { isLoading = false }
        do {
            users = try await api.fetchUsers()
        } catch {
            print("Kesalahan: \(error)")
        }
    }
}

struct UsersView: View {
    @StateObject private var viewModel = UserViewModel()

    var body: some View {
        List(viewModel.users, id: \.id) { user in
            Text(user.name)
        }
        .task { await viewModel.loadUsers() }
        .overlay {
            if viewModel.isLoading { ProgressView() }
        }
    }
}

Aksesibilitas dan Lokalisasi

Aksesibilitas di SwiftUI: .accessibilityLabel(), .accessibilityHint(), .accessibilityValue(), .accessibilityAddTraits(). VoiceOver membaca label aksesibilitas. Dynamic Type — @ScaledMetric, @DynamicProperty. Lokalisasi: String(localized:) (SwiftUI + String Catalog). LocalizedStringKey — terjemahan otomatis. Aturan jamak — melalui String Catalog (one, few, many, other). Kanan-ke-Kiri (Arab, Ibrani) — didukung secara otomatis. .environment(.layoutDirection, .rightToLeft). IT Sectr merekomendasikan label aksesibilitas untuk semua elemen interaktif.

struct AccessibleButton: View {
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Label("Settings", systemImage: "gear")
        }
        .accessibilityLabel("Open Settings")
        .accessibilityHint("Double tap to navigate to settings screen")
        .accessibilityAddTraits(.isButton)
    }
}

// Dukungan Dynamic Type
struct ScalableText: View {
    @ScaledMetric private var fontSize: CGFloat = 17

    var body: some View {
        Text("Hello, World!")
            .font(.system(size: fontSize))
    }
}

Grafik dan Visualisasi (Swift Charts)

Swift Charts (iOS 16+) — framework untuk membangun grafik. Chart { } — wadah dasar. BarMark, LineMark, PointMark, AreaMark, RuleMark — tanda. ForEach untuk data. ChartAxis — kustomisasi sumbu. .chartXAxis, .chartYAxis. ChartLegend — legenda. Interpolasi — catmullRom, linear, step. Animasi — .animation() untuk Chart. IT Sectr merekomendasikan Swift Charts untuk grafik bawaan dan Charts (DGCharts) untuk yang kompleks.

import Charts

struct MonthlySales: Identifiable {
    let id = UUID()
    let month: String
    let sales: Double
}

struct SalesChart: View {
    let data: [MonthlySales]

    var body: some View {
        Chart(data) { item in
            BarMark(
                x: .value("Month", item.month),
                y: .value("Sales", item.sales)
            )
            .foregroundStyle(.blue.gradient)
        }
        .chartXAxisLabel("Month")
        .chartYAxisLabel("Sales")
        .frame(height: 200)
        .padding()
    }
}

Swift Package Manager (SPM) — manajer dependensi Apple. Terintegrasi di Xcode. Mendukung: paket biner, sumber daya, pengujian, swift-6 konkurensi ketat. Publikasi paket melalui GitHub dengan tag semver. SPM adalah standar de facto untuk dependensi Swift, menggantikan CocoaPods dan Carthage. IT Sectr merekomendasikan SPM untuk semua proyek baru.

Swift Concurrency (async/await, TaskGroup, AsyncSequence) — async/await dibangun di Swift 5.5+. Task — unit asinkronitas. TaskGroup — tugas paralel. AsyncSequence — urutan asinkron (AsyncStream, AsyncAlgorithms). Task Local Values — data kontekstual untuk Task. Swift Concurrency sepenuhnya menggantikan Combine untuk operasi asinkron.