Bunu yazarken, neredeyse 24 saattir Xcode 11 beta kullandım ve bu süre zarfında SwiftUI kullanarak altı örnek uygulama geliştirdim.

Yalan söylemeyeceğim: başlangıçta oldukça zihinsel bir hız tümseği, çünkü hepimiz UIKit'in akışı açısından düşünmeye o kadar programlıyız ki, ama bunu bir kez geçtikten sonra – SwiftUI zihniyetinde düşünmeye başladığınızda – sonra her şey çok daha netleşiyor.

Apple lansmanında SwiftUI'yi dört şey olarak tanımladı:

  • bildirenYani, oraya nasıl gideceğimiz yerine ne istediğimizi söylediğimiz anlamına gelir.
  • OtomatikDaha önce elle yapmak zorunda olduğumuz birçok şeyi hallettiği anlamına geliyor.
  • bileşimyani küçük şeyler inşa ediyoruz ve onları daha büyük şeylere birleştiriyoruz.
  • Tutarlıyani, daha önce yaptığımız gibi Swift ve Objective-C arasında garip hata çizgileri veya çok yenileriyle karıştırılmış çok eski API'ler görmüyoruz.

Şimdi SwiftUI ile birkaç uygulama geliştirdikten sonra, önemli bir noktayı kaçırdıklarını söyleyebilirim: Özlü. SwiftUI kodunuz UIKit kodunuzun% 10-20'si olabilir – neredeyse hepsi ortadan kaybolur çünkü artık kendimizi tekrar etmiyoruz, artık pek çok yaşam döngüsü yöntemini kullanmaya ihtiyacımız yok.

SwiftUI'nin nasıl çalıştığını öğrenelim…

Görünüm nedir?

SwiftUI’de Görünüm sahip olduğumuz şey az ya da çok UIView, iki büyük farkla:

  1. Bu bir sınıftan ziyade bir protokoldür, bu yüzden miras problemlerine sıkışıp kalmayız.
  2. Bakış açımız, işlemek için her zaman bir görünüm döndürmelidir. Bu görünüm dahili olarak başka görünümler içerebilir, ancak yine de geri dönen yalnızca bir üst görünümdür.

Apple’ın varsayılan örnek kodu bize şu görünümü verir:

struct ContentView: Görüntüle {
    var body: bazı görüntüler {
        Metin ("Merhaba Dünya")
    }
}

Orada birkaç şey fark edeceksiniz:

  1. Döner bazı görünüm, opak bir türdür – videoyu Swift 5.1'deki opak geri dönüş türlerinde izleyin eğer bunları daha önce görmediyseniz.
  2. Tam olarak bir şey döndürür: a Metin "Merhaba Dünya" metniyle UILabel UİKİT açısından.
  3. Kullanmaz dönüş anahtar kelime – bu başka bir Swift 5.1 değişikliği, bu yüzden isteyebilirsiniz videomu izle Bunun için de.

Düzen yığınları oluşturma

Unutmayın, görüşlerimiz tam olarak içlerinde bir şey döndürmelidir – 0, 2 veya 200 değil. Bu nedenle, birden fazla etiket göstermek istiyorsanız, bunları bir gibi bir kabın içine yerleştirmeniz gerekir. HStack, bir VStackveya ZStack – etkili bir şekilde yatay yığın görünümleri, dikey yığın görünümleri veya bir şeyi diğerinin üzerine yerleştiren bir yığın görünümü.

Yani, üst üste üç etiket yerleştirmek isteseydiniz şunu yazarsınız:

var body: bazı görüntüler {
    VStack {
        Metin ("Merhaba Dünya")
        Metin ("Merhaba Dünya")
        Metin ("Merhaba Dünya")
    }
}

Varsayılan olarak, bu yığınlar yalnızca ihtiyaç duydukları alanı kaplar, bu nedenle ekranınızın ortasında toplanan üç metin görünümünü görürsünüz. Bunları birbirinden ayırmak istiyorsanız, kullanarak esnek bir alan kontrolü ekleyebilirsiniz. Spacer, bunun gibi:

var body: bazı görüntüler {
    VStack {
        Metin ("Merhaba Dünya")
        Metin ("Merhaba Dünya")
        Ara parçası ()
        Metin ("Merhaba Dünya")
    }
}

Şimdi, ekranınızın üstündeki ilk iki metin görünümünü, ardından büyük bir boşluğu, ardından ekranın altındaki son metin görünümünü göreceksiniz. Daha ince bir etki için bölen ziyade Spacer – Bu elemanlar arasında yatay bir kural oluşturur ve birbirlerinden uzaklaşmadan aralarında küçük bir görsel boşluk sağlar.

İçerik listeleri oluşturma

UIKit'i kullanan herkes, tablo görünümleri oluşturma monotonluğunu bilir: hücre prototiplerini kaydetmemiz, UIKit'e kaç öğemiz olduğunu, hücreleri ayırıp yapılandırmamız ve daha fazlasını yapmamız gerektiğini söylememiz gerekir – sıkıcı ve yinelemelidir.

Ve hepsi SwiftuI ile birlikte gitti.

SwiftUI'deki tablolarda yeni Liste statik veya dinamik içerik gösterebilen görünüm. Örneğin, kullanıcıları tanımlayan bir yapıya sahip olabiliriz, şöyle:

yapı Kullanıcı {
    var firstName: Dize
    var lastName: Dize
}

Listedeki satırların içini göstermek isteseydik, bir satırın nasıl görüneceğini tanımlayarak başlarız. Bir ile çalışması gerektiğini biliyoruz. kullanıcı, öyleyse bunu bir özellik olarak eklerdik. Ve onların adlarını göstermesi gerektiğini biliyoruz, bu nedenle görünümümüzün bir metin görünümünü döndürmesini sağlıyoruz.

SwiftUI’de, bu:

struct UserRow: Görüntüle {
    var kullanıcı: Kullanıcı

    var body: bazı görüntüler {
        Metin (" (user.firstName)  (user.lastName)")
    }
}

Sonunda contentView iki kullanıcı yaratacak şekilde yapılandırın, sonra bunları bir listeye yerleştirin:

struct ContentView: Görüntüle {
    var body: bazı görüntüler {
        let user1 = Kullanıcı (firstName: "Piper", soyadı: "Chapman")
        let user2 = Kullanıcı (firstName: "Gloria", soyadı: "Mendoza")

        dönüş listesi {
            UserRow (kullanıcı: kullanıcı1)
            UserRow (kullanıcı: kullanıcı2)
        }
    }
}

Bu basit listeler için gayet güzel olsa da, daha ileri düzeylerde dinamik içeriği kullanmak isteyeceksiniz – bir dizi veriyi geçmek ve SwiftUI'nin kaç satırın gerekli olduğunu anlamasını, hepsini oluşturmasını ve hepsini göstermesini istemek zorundasınız.

Bunu yapmak için yapmalıyız kullanıcı uygun teşhis edilebilir protokolü böylece SwiftUI hangi kişinin benzersiz olduğunu bilir. Ona rağmen could Bunu, her bir mülkü sorgulayarak kontrol ederek kontrol edin. Bu, yavaş ve yanlış pozitiflere yol açması muhtemeldir. Öyleyse, yapılarımıza eşsiz bir yer vermemiz gerekiyor İD Bildiğimiz değer, aynı listedeki diğer öğeler tarafından çoğaltılmaz.

Böylece güncelleme yapabiliriz kullanıcı sahip olmak İD böyle bir özellik:

struct Kullanıcı: Tanımlanabilir {
    var kimliği: Int
    var firstName: Dize
    var lastName: Dize
}

Tanımlayıcınız için istediğiniz herhangi bir şeyi kullanabilirsiniz – dizeler, UUID'ler veya her neyse, her şey yolunda.

Artık kullanıcılarımızdan oluşan bir dizi oluşturabildiğimize karar verdik. kodlanabilir İnternetten indirdiğiniz girişi – ve oluşturdukça bunları listeye aktarın. Ardından listedeki tek tek satırları yapılandıran çalıştırmayı bitiririz, şöyle:

struct ContentView: Görüntüle {
    var body: bazı görüntüler {
        // bazı örnek veriler yaratın
        let user1 = Kullanıcı (id: 1, firstName: "Piper", soyadı: "Chapman")
        let user2 = Kullanıcı (id: 2, firstName: "Gloria", soyadı: "Mendoza")
        kullanıcılara izin ver = [user1, user2]

        // bu verileri göster
        dönüş listesi (kullanıcılar)
            UserRow (kullanıcı: kullanıcı)
        }
    }
}

Sadece açık olmak gerekirse: bu kodun yaklaşık yarısı sadece bazı örnek veriler oluşturuyorum – birçok liste satırı oluşturmak ve göstermek için kullanılan gerçek SwiftUI kısmı sadece üç satırlık koddur ve bu, yalnızca bir satırdaki kapanış ayracı eklerseniz geçerlidir.

Aslında, sadece böyle satırlar gösteriyorsanız, onu daha da daraltabilirsiniz:

Döndürme Listesi (kullanıcılar, rowContent: UserRow.init)

Boom.

Cidden, SwiftUI kodunu bu kadar yıkacak.

Listeleri bitirmeden önce, bir şey daha var: değiştirebiliriz UserRow başka yerlerde nasıl kullanıldığı konusunda endişelenmeden. Unutmayın, SwiftUI birleştirilebilirlik için tasarlanmıştır: bir kullanıcıyı UserRow ve bırak o UIKit ile yaptığımız gibi her zaman ana görüşlerimizi her zaman kontrol etmek yerine, nasıl görüntülendiğini anlayın.

Yani, eğer istersek UserRow İki etiket yığınını dikey olarak, biri büyük diğeri küçük ve her iki etiketi de ön kenarlarına gelecek şekilde göstermek için şunu yazacağız:

struct UserRow: Görüntüle {
    var kullanıcı: Kullanıcı

    var body: bazı görüntüler {
        VStack (hizalama:. Lider) {
            Metin (user.firstName)
                .font (.largeTitle)
            Metin (user.lastName)
        }
    }
}

Güzel.

Ayrıntı ekranı gösteriliyor

Yalnızca bir ekran gösterilmesi çok ilginç değildir, bu yüzden başka bir tane oluşturalım.

Öncelikle, bu ekranın seçilen kullanıcının sadece soyadını göstermesi gerektiğini söyleyeceğiz – hoş ve büyük ve kırmızı renkte:

struct DetailView: Görüntüle {
    var selectedUser: Kullanıcı

    var body: bazı görüntüler {
        Metin (selectedUser.lastName)
            .font (.largeTitle)
            .foregroundColor (.red)
    }
}

Sonra listeyi gömmek istiyoruz. contentView UIKit'in bir gezinti denetleyicisine eşdeğer bir gezinme görünümünün içinde:

struct ContentView: Görüntüle {
    var body: bazı görüntüler {
        let user1 = Kullanıcı (id: 1, firstName: "Piper", soyadı: "Chapman Yay")
        let user2 = Kullanıcı (id: 2, firstName: "Gloria", soyadı: "Mendoza")
        kullanıcılara izin ver = [user1, user2]

        Navigasyon Görünümü'ne dön {
            Liste (kullanıcılar, rowContent: UserRow.init)
        }
    }
}

Varsayılan olarak gezinme çubuklarının bir başlığı yoktur, bu nedenle listenize şöyle bir başlık eklemelisiniz:

Liste (kullanıcılar, rowContent: UserRow.init)
    .navigationBarTitle (Metin ( "Kullanıcılar"))

Evet, bu orada diğer kontrolleri yeterince kolayca gösterebileceğiniz anlamına gelir – sadece değiştirin Metin gibi başka bir SwiftUI bileşeni ile görüntü.

Elbette biz neyiz Gerçekten mi İstenilen hücreye dokunarak hangi ekrana dokunduğunuzu ileterek ayrıntı ekranımızı gösterelim.

Bunun gerçekleşmesi için kullanıcı sıralarımızı bir NavigationButton. Bu, bir avuç parametreyle yaratılır, ancak burada yalnızca iki tane kullanacağız: öğeye dokunulduğunda kullanıcıyı nereye göndereceğimizi ve gezinti öğesinin içine ne koyacağımızı belirten takip eden bir kapanış. Bizim durumumuzda, hangi kullanıcının gösterildiğinin gösterdiği kullanıcı sırası budur.

Dolayısıyla, gezinme görünümünü şununla değiştirin:

Navigasyon Görünümü'ne dön {
    Liste (kullanıcılar) {kullanıcı girişi
        NavigationButton (hedef: DetailView (selectedUser: user)) {
            UserRow (kullanıcı: kullanıcı)
        }
    } .NavigationBarTitle (Metin ( "Kullanıcılar"))
}

Şimdi iki şey oldu. İlk olarak, önizleme alanının sağ alt köşesindeki küçük oynat düğmesini tıklarsanız, yaptığımız ayrıntı görünümünü göstermek için şimdi liste satırlarına dokunabileceğinizi göreceksiniz. İkincisi, ayrıca liste satırlarımızın açıklama göstergelerine sahip olduğunu da fark etmiş olabilirsiniz – Apple'ın SwiftUI'ın otomatik olması ile ilgili anlamı budur.

Sıradaki nerede?

Gelecek günlerde SwiftUI hakkında çok daha fazla yazacağım, özellikle de sınırlarını bulmak için daha da zorluyorum. Şimdiye kadar, çok açık olduğunu düşünüyorum: UIKIT'e geri dönmek Objective-C'ye geri dönmek gibi hissettiriyor.

SwiftUI hakkındaki görüşlerinizi duymak isterim – bana tweet gönderin @twostraws ve ne düşündüğünü bana bildir!





Source link

Kategoriler: Genel

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir