Hari baik untuk semua Nama saya Anna Zharkova, saya adalah pengembang seluler terkemuka UsetechAbout the SwiftUI technology, yang diumumkan Apple tahun lalu WWDC 2019, banyak yang telah dikatakan. Pada prinsipnya, sudah ada bahan yang cukup tentang fitur-fiturnya, apa yang ada di balik tudungnya dan bagaimana menggunakannya untuk UI yang cepat dan cantik.
Saya menawarkan serangkaian artikel singkat tentang cara menggunakan kerangka kerja ini dalam kehidupan nyata dan aplikasi nyata, dan bukan dalam konstruktor sandwich alpukat. Dan untuk menjadikan semuanya serius dan dewasa, kita akan melihat bagaimana membuat aplikasi SwiftUI kita mematuhi prinsip-prinsip arsitektur bersih dan kode bersih.Tapi mari kita mulai dengan dasar-dasarnya. Bagian ini hanya akan menjadi pengantar dan informasi dasar. Jadi jika Anda sudah terbiasa dengan fitur-fitur SwiftUI ini, lanjutkan ke bagian-bagian berikut:bagian 2 (bagaimana bekerja dengan perpustakaan yang sudah jadi di bawah UIKit)bagian 3 (di sini tentang arsitektur)bagian 4 (di sini tentang navigasi)Jika Anda belum mengenal satu sama lain, maka berlama-lama di sini beberapa menit)Fitur utama pengembangan deklaratif dalam kerangka kerja baru adalah keberangkatan dari penggunaan langsung UIViewController, UIView dan penggantian dengan struktur yang mengimplementasikan protokol View. Semua komponen dari bagian visual juga dijelaskan menggunakan sintaksis deklaratif dan terletak di dalam properti tubuh utama dari masing-masing View. Pengaturan, stilisasi dan penyesuaian komponen, navigasi antara tampilan di layar juga diatur menggunakan sintaksis deklaratif.Misalnya, kode ini menjelaskan tampilan daftar berita, dengan mengklik di mana layar terbuka dengan tampilan berita terpisah:struct NewsListView: View{
@State var data: [NewsItemMock]
var body: some View {
NavigationView{
List(data) { item in
NavigationLink(destination:NewsItemView(item:item)) {
NewsItemRow(data: item)
}
}
}
}
SwiftUI menggunakan ViewBuilder, perancang antarmuka deklaratif berdasarkan Functional Builder. Mekanisme ini muncul di Swift 5.1 dan memungkinkan Anda untuk mengelompokkan elemen ke dalam array tertentu di dalam blok-penutup, misalnya, objek induk. Contoh menggunakan ViewBuilder disajikan pada slide. Kami cukup menempatkan kontrol Lihat dalam urutan yang kami butuhkan, misalnya, di dalam tumpukan vertikal atau horizontal, tanpa menggunakan addSubview, dan ketika mengkompilasi SwiftUI sendiri menambahkan dan mengelompokkan elemen ke dalam wadah induk yang lebih kompleks.Dan ini kodenya:
VStack {
HStack {
VStack(alignment: .leading,spacing: 10) {
HeaderText(text: data.title ?? "")
SubheaderText(text: data.description ?? "")
SmallText(text: data.publishedAt?
.formatToString("dd.MM.yyyy") ?? "")
}
ThumbImage(withURL: data.urlToImage ?? "")
}
dikonversi menjadi item daftar 3 bidang teks dan satu gambar:Meskipun SwiftUI menolak konsep UIViewController, titik masuk ke aplikasi adalah UIHostingController, di mana Tampilan yang ditampilkan dilewatkan dan disematkan. Faktanya, teknologi baru ini merupakan tambahan dari UIKit:
@available(iOS 13.0, tvOS 13.0, *)
open class UIHostingController<Content> : UIViewController where Content : View {
public var rootView: Content
public init(rootView: Content)
Omong-omong, semua kontrol SwiftUI adalah analog deklaratif dari kontrol UIKit.Sebagai contoh, VStack, HStack adalah analog dari UIStackView vertikal dan horizontal biasa, masing-masing. Daftar adalah UITableView, Teks adalah UILabel, Tombol adalah UIButton, Gambar adalah UIImage, dll.Menghubungkan dan mengkonfigurasi kontrol dilakukan secara deklaratif menggunakan pengubah yang tersedia. Elemen dikelompokkan dalam analog UIStackView dengan beberapa properti yang telah ditentukan sebelumnya.Selain mengubah cara bagian visual dijelaskan, kontrol aliran data dan mekanisme reaksi UI untuk itu berubah. Swift UI adalah kerangka kerja non-event dependen. Itu Lihat di dalamnya adalah hasil dari fungsi negara tertentu, dan bukan urutan peristiwa. Tindakan yang dilakukan oleh pengguna tidak mengubah UI secara langsung, Anda tidak dapat secara langsung mengubah ini atau itu Lihat, tambah atau hapus kontrol. Pertama, properti atau variabel keadaan yang terhubung ke tampilan melalui satu atau lainnya pembungkus properti (pembungkus properti) berubah .
Pembungkus Properti utama yang digunakan adalah:1.Negara - Digunakan untuk variabel lokal.
struct NewsItemRow: View {
@State var title: String
@State var description: String
@State var dateFormatted: String
@State var imageUrl: String
var body: some View {
VStack {
HStack {
VStack(alignment: .leading,spacing: 10) {
HeaderText(text: title)
SubheaderText(text: description)
SmallText(text: dateFormatted)
}
ThumbImage(withURL: imageUrl)
}
}
}
2. @ Binding - analog lemah, digunakan saat meneruskan referensi ke suatu nilai.Kami menggunakannya ketika lebih dari satu Tampilan tergantung pada properti apa pun. Misalnya, jika kita ingin meneruskan nilai ke tampilan asli dari tampilan tingkat kedua.
struct FirstView: View {
@State var isPresented: Bool = true
var body: some View {
NavigationView {
NavigationLink(destination:
SecondView(isPresented: self.$isPresented)) {
Text("Some")
}
}
}
}
struct SecondView: View {
@Binding var isPresented: Bool
var body: some View {
Button("Dismiss") {
self.$isPresented = false
}
}
}
3. @EnvironmentObject - mentransfer objek antara View4. @ObjectBinding, @ObservableObject - digunakan untuk melacak perubahan pada properti model menggunakan alat kerangka kerja Combine.
class NewsItemModel: ObservableObject,IModel {
@Published var title: String
@Published var description: String
@Published var dateFormatted: String
@Published var imageUrl: String
}
Kami akan membicarakannya nanti.Begitu. Jika kami ingin mengubah Tampilan, kami mengubah properti, iklan dengan salah satu Pembungkus Properti. Kemudian tampilan deklaratif dibangun kembali dengan semua kontrol internal.Ketika salah satu variabel keadaan berubah, tampilan dibangun kembali secara keseluruhan.Pertimbangkan sebuah contoh kecil. Kami memiliki beberapa jenis layar, di bilah navigasi yang ada tombol untuk menambahkan konten ke favorit. Agar kami dapat mengubah gambar indikator pada tombol ini, kami akan menggunakan PropertyWrappers. Misalnya, dalam hal ini, buat variabel lokal dan nyatakan sebagaiNegara:
struct NewsItemView: View {
@State var isFavorite: Bool
....
Kami akan menetapkan perubahan nilai properti ke peristiwa pemicu yang terjadi ketika tombol ditekan:struct NewsItemView: View{
@State var isFavorite: Bool
var body: some View {
NavigationView {
VStack {
Text("Some content")
}
}
.navigationBarItems(trailing: Button(action: {
self.isFavorite = !self.isFavorite
}){
Image(self.isFavorite ? "favorite" : "unfavorite")
.frame(width: 20, height: 20, alignment: .topTrailing)
})
}
Dengan demikian, Pandangan kami akan berubah:
Dan pada prinsipnya, ini semua hal dasar yang perlu Anda ketahui tentang SwiftUI untuk memulai.Tetapi apakah ini cukup untuk bekerja?Untuk membuat UI yang tidak rumit dari kontrol sederhana tanpa terikat ke Xib dan storyboard, sepenuhnya.Dan untuk sesuatu yang lebih, tidak.Pertama, tidak semua kontrol memiliki analog di SwiftUI. Ini berlaku untuk UISit UISearchView standar, UICollectionView, dan untuk elemen mana dari pustaka bagian ketiga.Kedua, tidak ada (atau hampir tidak ada, mungkin seseorang melakukannya sekarang) solusi pihak ketiga untuk bekerja dengan Data Flow SwiftUI.Jadi, Anda harus menyesuaikan solusi yang ada untuk aplikasi iOS standar.Silakan klik tautannya.