Force React Native, çapraz platform geliştirme çerçevesi Flutter çok sert | Kod Kitabı
Kaynak: Flutter resmi web sitesi
Yazar | Kang Shaojun
Baş Editör | Zhong Peiyi
Bu makalenin içeriği "Flutter Teknolojisine Giriş ve Gerçek Savaş" bölümünden alınmıştır.
Flutter'ın 2019'u çok heyecan verici:
Soundnet, Flutter gerçek zamanlı ses ve video eklentisi Agora Flutter SDK'yı açık kaynaklı hale getirdi;
Xianyu, Flutter uygulama çerçevesi Fish Redux'dan açık kaynaklı;
Bugünün Toutiao'su, Flutter'ın Görünüm düzeyinde hibrit geliştirmeyi gerçekten desteklemesini sağlayan bir çözümü açık kaynaklı hale getirmek üzere ...
Projenin 2016'daki lansmanından ertesi yıl Google I / O konferansında ilk kez kamuoyuna sunulmasına ve 2018'in sonuna
1.0 resmi sürüm
"Katliam sayfası" ana sayfasını başlattıktan sonra, Flutter, birkaç aksilikten sonra nihayet sektörün odağına geri döndü. Google tarafından başlatılan bir mobil UI çerçevesi olan Flutter, iOS ve Android'de hızlı bir şekilde yüksek kaliteli yerel kullanıcı arayüzleri oluşturabilir; mevcut kodla çalışabilir. Flutter, dünya çapında giderek daha fazla geliştirici ve kuruluş tarafından kullanılıyor ve tamamen ücretsiz ve açık kaynak. Diğer ana akım çerçevelerle karşılaştırıldığında, "kişisel cazibesi" nedir? Ve "her şey bir bileşendir" temel konseptine bağlı kalan Flutter'ın şaşırtıcı ortak bileşenleri nelerdir?
Daha sonra, Jiezhiyun video konferans sisteminin kurucu ortağı Shaojun Kang'ın yazdığı "Flutter Teknolojisine Giriş ve Gerçek Savaş" kitabında sorular getirecek ve cevapları arayacağız.
Sürekli yinelemeli çapraz platform teknolojisi
Günümüzde ana akım mobil geliştirme platformları Android ve iOS'tur.Her platformdaki geliştirme teknolojisi farklıdır.Her platform için uygulamaların geliştirilmesi belirli personel gerektirir.Ancak geliştirme verimliliği düşüktür ve platformlar arası geliştirme gereklidir. Çapraz platform teknolojisi, ilk Hibrit hibrit geliştirme teknolojisinden React Native'in köprü teknolojisine doğru gelişiyor.
Karma geliştirme esas olarak WebView'a dayanır. Ancak WebView, bellek sorunlarına yatkın olan ağır bir kontroldür ve WebView'da görüntülenen karmaşık kullanıcı arayüzünün performansı iyi değildir.
React Native teknolojisi, Web Görünümü'nü bir kenara bırakır ve JavaScript çağrılarını Yerel çağrılara dönüştürmek için bir köprü olarak JavaScript Core kullanır. React Native sonunda karşılık gelen özel yerel kontroller oluşturacaktır. Bu strateji, çerçevenin kendisini ve Uygulama geliştiricilerini sistemin kontrollerine bağlar.Yalnızca çerçevenin kendisinin çok sayıda platformla ilgili mantıkla uğraşması gerekmiyor, aynı zamanda sistem sürümü değişiklikleri ve API değişiklikleri ile de geliştiricilerin farklı platformlar arasındaki farklılıkları ve hatta Bazı özellikler yalnızca, çapraz platform özelliklerinden büyük ölçüde ödün veren bazı platformlarda uygulanabilir.
Flutter, Android, iOS, MacOS, Windows ve Linux gibi birden çok sistemi kapsayabilen en yeni çapraz platform geliştirme teknolojisidir. Daha kapsamlı bir çapraz platform çözümü kullanır, yani kendi başına bir dizi UI çerçevesi uygular ve ardından UI sayfasını doğrudan GPU'da oluşturur.
Her şey bir bileşendir
Flutter'da çok önemli bir temel kavram vardır: her şey bir bileşendir (Widget) ve Flutter'ın tüm öğeleri bileşenlerden oluşur. Örneğin: bir düzen öğesi, bir animasyon, bir dekoratif efekt vb.
Bileşenler, bir Flutter uygulamasının kullanıcı arayüzünün temel yapı taşlarıdır. Widget olarak yalnızca düğmeler, giriş kutuları, kartlar ve listeler kullanılamaz, aynı zamanda düzen yöntemleri ve animasyon işleme Widget'lar olarak bile kabul edilir. Yani Flutter tutarlı bir birleşik nesne modeline sahiptir: Widget.
Widget'ın çok sayıda özniteliği ve yöntemi vardır. Öznitelikler genellikle bileşenin durumunu (renk, boyut, vb.) Ve geri arama yöntemlerinin işlenmesini (tıklama olayı geri araması, hareket olayı geri araması, vb.) Değiştirmek için kullanılır. Yöntem esas olarak bazı bileşen uzantıları sağlamaktır.
Karmaşık işlevsel arayüzler genellikle basit işlevsel bileşenlerle birleştirilir. Bazı bileşenler düzenden sorumludur, bazıları konumlandırmadan sorumludur, bazıları yeniden boyutlandırmadan sorumludur, bazıları da gradyan işlemeden sorumludur, vb. Bu yuvalanmış kombinasyonun en büyük yararı, ayrıştırmadır.
Aşağıda, geliştirmede en sık kullanılan bileşenlerin bazılarını listeleyecek ve açıklayacağız.
Konteyner bileşeni
Kap bileşeni (Konteyner), yerleşim süreci sırasında çocukların yerleştirilmesini kolaylaştıran hizalama ve doldurma gibi temel niteliklere sahip bir alt Widget içerir. Kap bileşeninin ortak özellikleri aşağıdaki tabloda gösterilmektedir:
Kapsayıcı bileşeninin özellikleri ve açıklaması
| İpucu: Dolgu ve kenar boşluğu arasındaki fark, dolgunun İçerik'te yer alması ve kenar boşluğunun dış sınır olmasıdır. Bir tıklama olayı ayarlarsanız, dolgu alanı yanıt verir, ancak kenar boşluğu alanı yanıt vermez.
import'package: flutter / material.dart '; void main () = > runApp (Uygulamam ()); class MyApp, StatelessWidget { @override Widget derlemesi (BuildContext bağlamı) { MaterialApp ( title: 'Konteyner bileşeni örneği', ev: İskele ( appBar: AppBar ( title: Metin ('Kap bileşeni örneği'), ), gövde: Merkez ( // Kapsayıcı ekle alt: Konteyner ( genişlik: 200.0, yükseklik: 200.0, // Kenarlık dekorasyon efekti ekleyin dekorasyon: BoxDecoration ( renk: Colors.white, // Dört kenarlık stilini ayarlayın border: new Border.all ( color: Colors.grey, // Kenarlık rengi genişlik: 8.0, // kenar kalınlığı ), borderRadius: const BorderRadius.all (const Radius.circular (8.0)), // Sınırın yayı ), çocuk: Metin ( 'Flutter', textAlign: TextAlign.center, stil: TextStyle (fontSize: 28.0), ), ), ), ), ); } }Yukarıdaki örnek kod görünümü kabaca aşağıdaki şekilde gösterildiği gibi gösterir:
Resim bileşeni
Görüntü bileşeni (Görüntü), görüntüyü gösteren bileşendir. Görüntü bileşeninin birden çok yapıcısı vardır:
- yeni Resim: ImageProvider'dan bir resim alın
- new Image.asset: Kaynak görüntüsünü yükle
- new Image.file: Yerel bir resim dosyası yükleyin
- new Image.network: ağ görüntüsünü yükle
- new Image.memory: Uint8List kaynak görüntüsünü yükle
Görüntü bileşeninin ortak özellikleri aşağıdaki tabloda gösterilmektedir:
Görüntü bileşeni özellikleri ve açıklaması
Metin bileşeni
Metin bileşeni (metin), metni görüntülemek ve görüntüleme stillerini tanımlamaktan sorumludur. Genel özellikler için aşağıdaki tabloya bakın.
Metin bileşeni özellikleri ve açıklaması
Ardından, farklı metin stillerini göstermek için birden çok metin bileşeni oluşturuyoruz. Örneğin, farklı renkler, farklı yazı tipi boyutları, farklı çizgi şekilleri vb. Eksiksiz örnek kod aşağıdaki gibidir:
import'package: flutter / material.dart '; Class ContainerDemo, StatelessWidget { @override Widget derlemesi (BuildContext bağlamı) { yeni İskele dönüşü ( appBar: yeni AppBar ( title: yeni Metin ('Metin bileşeni'), ), gövde: yeni Sütun ( çocuklar: < Araç > , ), ); } } void main () { runApp ( yeni MaterialApp ( title: 'Metin demosu', ana sayfa: yeni ContainerDemo (), ) ); }Yukarıdaki örnek kod görünümü kabaca aşağıda gösterildiği gibi gösterir:
Bu makale "Flutter Teknolojisine Giriş ve Gerçek Savaş" bölümünden alınmıştır.
Kıdemli mimar tarafından yazıldı
Temel bileşenlerin ayrıntılı açıklamasından kapsamlı vakalara
Araç kullanımından eklenti geliştirmeye
Kitap çok sayıda seçilmiş vaka, ayrıntılı pratik adımlar ve destekleyici video kursları içerir.
Temel bilgileri kolayca öğrenirken hızlı bir şekilde gerçek savaşa girmenizi sağlar
"Flutter Teknolojisine Giriş ve Gerçek Savaş"
Yazar: Kang Shaojun
Bu kitap, temel bir giriş artı pratik bir kitaptır, hem temel bilgileri hem de ayrıntılı işlem basamaklarını içeren zengin örnekleri güçlü bir pratiklikle içerir. Flutter birçok bileşen kullandığından, bu kitap bileşenleri temel kavramlar, özellikler ve kod örnekleri dahil olmak üzere ayrıntılı olarak açıklamaktadır. Her bileşen, kısa ve öz olmaya çalışan küçük bir örnekle donatılmıştır ve eksiksiz bir kod sağlamak için destekleyici bir web sitesi sağlanır Kodun tamamını kopyalayın ve etkisini hemen görebilirsiniz. Bu, okuyuculara temel bilgileri kolayca öğrenirken gerçek savaşa hızla girme konusunda güven verecektir.
Yönetici Özeti:
- Temel kavramlar ve önemli bilgi noktaları dahil olmak üzere Flutter'ı sistematik olarak açıklayın;
- Konteyner bileşenleri, resim bileşenleri, ızgara listesi bileşenleri vb. Dahil olmak üzere ortak bileşenlere ve kullanım becerilerine ayrıntılı giriş;
- Temel sayfa düzeni işleme, genişlik ve yükseklik boyutu işleme, liste ve tablo düzeni vb. Gibi temel sayfa düzeni bilgisi ve becerileri;
- Hareket algılama ve işleme yöntemleri vb .;
- Sayfa oluşturma ve veri aktarımı gibi yönlendirme ve gezinme işlemleri;
- Şeffaflık işleme, dekoratif kutular, dönen kutular vb. Gibi bileşen dekorasyonu ve görsel efekt işleme;
- Flutter eklenti geliştirmeye yönelik giriş bilgisini tanıtın
Orijinal metni okumak ve kitabı satın almak için tıklayın.
