Tutorial ini akan membimbing Anda dalam membangun Landmark - sebuah aplikasi untuk menemukan dan berbagi tempat-tempat favorit Anda. Anda akan memulainya dengan membuat tampilan yang menunjukkan detail tentang lokasi tersebut.
Untuk mengatur tampilannya, Landmark menggunakan tumpukan (stacks) untuk menggabungkan dan melapisi komponen tampilan gambar dan teks. Untuk menambahkan peta ke dalam tampilan, Anda akan menggunakan komponen MapKit standar. Ketika Anda menyempurnakan desain tampilannya, Xcode akan memberikan umpan balik secara real-time sehingga Anda dapat melihat bagaimana perubahan tersebut diterjemahkan ke dalam kode.
Unduh file proyek untuk memulai membangun proyek ini dan ikuti langkah-langkah di bawah ini.
Buat Proyek Baru dan Jelajahi Kanvas
Buatlah proyek baru di Xcode dengan menggunakan SwiftUI. Jelajahi kanvas, pratinjau, dan kode templat SwiftUI.
Untuk melihat pratinjau dan berinteraksi dengan tampilan dari kanvas di Xcode, dan untuk menggunakan semua fitur terbaru yang dijelaskan dalam tutorial ini, pastikan bahwa Mac Anda menjalankan macOS Monterey atau yang lebih baru.
Langkah 1
Buka Xcode dan klik “Buat proyek Xcode baru” di jendela startup Xcode, atau pilih File > New > Project.
Langkah 2
Di pemilih template, pilih iOS sebagai platform, pilih Template aplikasi, lalu klik Berikutnya.
Langkah 3
Masukkan "Landmarks" sebagai nama produk, pilih "SwiftUI" untuk antarmuka dan "Swift" untuk bahasa, dan klik Next. Pilih lokasi untuk menyimpan proyek Landmark di Mac Anda.
Langkah 4
Di navigator Proyek, pilih .LandmarksApp.swift
Aplikasi yang menggunakan siklus hidup aplikasi SwiftUI memiliki struktur yang sesuai dengan protokol App. Properti struktur body mengembalikan satu atau lebih scene (tampilan), yang pada gilirannya menyediakan konten yang akan ditampilkan. Atribut @main digunakan untuk mengidentifikasi titik masuk aplikasi.
import SwiftUI
@main
struct LandmarksApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Langkah 5
Di navigator Proyek, pilih .ContentView.swift
Secara default, file tampilan SwiftUI mendeklarasikan dua struktur. Struktur pertama sesuai dengan Viewprotokol dan menjelaskan konten dan tata letak tampilan. Struktur kedua mendeklarasikan pratinjau untuk tampilan itu.
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello, World!")
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Langkah 6
Di kanvas, klik Lanjutkan untuk menampilkan pratinjau.
Tip: Jika kanvas tidak terlihat, pilih Editor > Kanvas untuk menampilkannya.
Langkah 7
Di dalam bodyproperti, ubah "Halo, Dunia!" untuk salam untuk diri sendiri.
Saat Anda mengubah kode di bodyproperti tampilan, pratinjau diperbarui untuk mencerminkan perubahan Anda.
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello SwiftUI!")
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Sumber
https://developer.apple.com/tutorials/swiftui/creating-and-combining-views
