SwiftUI adalah cara mudah baru untuk membuat antarmuka pengguna di Xcode. Jika Anda ingin pengantar cepat ke SwiftUI, maka posting blog ini adalah untuk Anda.
Untuk memulai, mari buat proyek dengan dukungan SwiftUI. Persyaratan sistem minimum untuk ini adalah macOS Catalina dan Xcode 11. Buat proyek baru
"File> New> Project ..." , pilih
"Aplikasi Tampilan Tunggal" dan pastikan bahwa
"Antarmuka Pengguna: SwiftUI" dipilih .
Proyek akan terlihat seperti ini:
Seperti yang mungkin telah Anda perhatikan, sekarang Anda dapat melihat semua perubahan langsung pada
Pratinjau . Misalnya, coba ubah teks menjadi
"Halo, Habr!" . Keren ya
Jika tidak ada perubahan, klik tombol
Lanjutkan (di sudut kanan atas). Jika
Pratinjau tidak terlihat - klik
opsi Editor dan pastikan
Canvas dipilih
(⌥Pilihan + ⌘Perintah + ↵Masukkan) .
Lihat, Teks, Stack ...
Jika Anda memilih
ContentView.swift , maka kita akan melihat:
struct ContentView: View { var body: some View { Text(", !") } }
Di sini kita melihat bahwa
tubuh ContentView> memiliki
Teks yang menampilkan
"Halo, Habr!" . Mari kita tambahkan teks lain. Jika Anda mencoba menambahkan langsung ke tampilan
tubuh , Xcode akan bersumpah. Untuk melakukan ini, pertama gunakan
HStack atau
VStack . Tekan
Command dan klik pada
Text (ommCommand + Text) , lalu pilih
“Embed in HStack” .
Perintah ini akan secara otomatis membuat
HStack dan menambahkan teks kami di sana. Sekarang Anda dapat menambahkan teks lain:
struct ContentView: View { var body: some View { HStack { Text(",") Text("!") } } }
Inspektur Swiftui
Jika Anda mengklik
"Perintah + Teks" dan pilih
"Tampilkan SwiftUI Inspektur ..." , seorang inspektur akan terbuka di mana Anda dapat secara visual mengubah properti teks. Misalnya, jika di inspektur
"Font" diubah menjadi
"Judul Besar" , maka kode juga akan berubah menjadi
.font (.largeTitle) . Sangat sederhana:
Untuk memahami apa itu
Negara , mari kita tambahkan beberapa tindakan. Kami ulangi apa yang kami lakukan sebelumnya:
"ommCommand + HStack" , pilih
"Embed in VStack" , lalu tambahkan Button ke
VStack ini:
struct ContentView: View { @State var tapCount = 0 var body: some View { VStack { HStack { Text(",") .font(.largeTitle) .foregroundColor(Color.green) Text("!") .font(.largeTitle) .fontWeight(.bold) } Button(action: { self.tapCount += 1 }) { Text("Tap count \(tapCount)") .font(.title) } } } }
Setiap kali Anda mengklik tombol, kami mengubah nilai
tapCount . Tapi apa yang dimaksud dengan
negara ? Jika kita ingin
tampilan kita ditampilkan lagi ketika beberapa nilai berubah, maka kita harus menggunakan
State . Dalam hal ini, ketika kami mengklik tombol, kami mengubah
tapCount , yang ditetapkan sebagai
Negara . Itu sebabnya setiap klik
tubuh kita dirender lagi.
Pratinjau langsung
Saat ini, jika Anda mengklik tombol, maka tidak ada yang terjadi. Untuk memperbaikinya dan berfungsi seperti simulator, Anda harus mengaktifkan
"Pratinjau Langsung" . Tombol aktivasi terletak di kanan bawah:
Sekarang coba lagi. Setiap kali Anda menekan tombol, nilainya akan berubah.
Apa selanjutnya
Sekarang Anda memiliki konsep dasar SwiftUI. Selanjutnya, saya menyarankan Anda untuk membaca
Tutorial SwiftUI , menonton
video WWDC tentang SwiftUI . Dokumentasi dapat ditemukan di
sini .
Tautan ke proyek github ada di
sini .