Flutter under the hood: Binding

Artikel ini merupakan kelanjutan langsung dari artikel saya sebelumnya .



Untuk persepsi lengkap, saya menyarankan Anda untuk membaca terlebih dahulu artikel yang ditunjukkan pada tautan atau menyegarkannya di memori Anda. Di dalamnya, saya menganalisis salah satu aspek penting perangkat Flutter - interaksi pepohonan dan distribusi tanggung jawab di antara keduanya. Namun, pertanyaannya tetap terbuka: bagaimana pengoperasian seluruh mekanisme yang dijelaskan di bagian pertama diatur? Inilah yang akan kami coba pahami di artikel ini.







Ketentuan Umum



Jika Anda membuka gambaran teknis Flutter , di salah satu poin kita akan melihat diagram berikut. Ini menunjukkan tingkat bersyarat di mana penulis kerangka membaginya sendiri. 



Skema kerangka flutter


Faktanya, seperti yang mereka sebut sendiri, kami melihat kue puff. Lapisan yang lebih besar dan lebih kecil dapat dibedakan.



Level kerangka kerja adalah segala sesuatu yang kita kerjakan pada saat menulis aplikasi, dan semua kelas utilitas yang memungkinkan kita berinteraksi dengan tingkat mesin yang telah kita tulis. Segala sesuatu yang berhubungan dengan level ini ditulis dalam Dart.



Level mesin - level yang lebih rendah dari level framework, berisi kelas dan pustaka yang memungkinkan level framework berfungsi. Termasuk mesin virtual Dart, Skia, dll.



Lapisan Platform -  Mekanisme khusus platform khusus untuk platform peluncuran.



Mari kita lihat lebih dekat pada level kerangka kerja. Pada diagram ditampilkan dalam bentuk lapisan dari level yang lebih tinggi ke level yang lebih rendah. Di bagian paling bawah kita melihat sebuah lapisanFoundation . Seperti namanya, lapisan ini adalah sesuatu yang fundamental dan mendasar di tingkat kerangka kerja. Kami menemukan library ini dan inilah yang tertulis dalam deskripsinya:



framework Core Flutter primitif.

Fitur yang ditentukan dalam pustaka ini adalah kelas dan fungsi utilitas tingkat terendah yang digunakan oleh semua lapisan kerangka kerja Flutter lainnya.




Fungsi yang ditentukan dalam pustaka ini adalah kelas utilitas dan fungsi tingkat terendah yang digunakan oleh semua lapisan framework Flutter lainnya.



Library ini menyertakan BindingBase - kelas dasar untuk semua Binding.



Mengikat



Pertama, mari kita pahami apa itu Binding dan bagaimana penggunaannya di Flutter. Nama itu sendiri memberi tahu kita bahwa ini adalah semacam koneksi. Dokumentasi yang ditinggalkan oleh perintah Flutter ke BaseBinding memberi tahu kita hal berikut:



Kelas dasar untuk mixin yang menyediakan layanan tunggal (juga dikenal sebagai "bindings"). Untuk menggunakan kelas ini dalam klausa Κ»on` dari sebuah mixin, warisi darinya dan implementasikan [initInstances ()]. Mixin dijamin hanya akan dibuat sekali seumur hidup aplikasi (lebih tepatnya, ini akan menegaskan jika dibuat dua kali dalam mode centang).



Ini adalah kelas dasar untuk berbagai layanan komunikasi, yang disajikan sebagai mixin. Setiap mixin tersebut diinisialisasi dan menjamin keunikan instansnya selama masa pakai aplikasi.



BaseBindingMerupakan kelas abstrak dasar, mari kita lihat implementasi konkret dari binding. Diantaranya kita akan melihat:



ServicesBinding bertanggung jawab untuk meneruskan pesan dari platform saat ini ke penangan data pesan (BinaryMessenger);



PaintingBinding bertanggung jawab untuk berkomunikasi dengan perpustakaan rendering.



RenderBinding bertanggung jawab untuk komunikasi antara pohon render dan mesin Flutter.



WidgetBinding bertanggung jawab untuk komunikasi antara pohon widget dan mesin Flutter.



SchedulerBinding adalah penjadwal untuk tugas-tugas rutin, seperti:



  • panggilan ke callback masuk yang dimulai sistem di Window.onBeginFrame - misalnya, peristiwa ticker dan pengontrol animasi;
  • panggilan ke callback berkelanjutan yang dimulai oleh sistem Window.onDrawFrame, misalnya, peristiwa untuk memperbarui sistem tampilan setelah callback masuk selesai;
  • callback post-frame, yang dipanggil setelah callback berkelanjutan, sebelum kembali dari Window.onDrawFrame;
  • tugas non-rendering yang harus dilakukan antar frame.


SemanticsBinding bertanggung jawab untuk menghubungkan lapisan semantik dan mesin Flutter.



GestureBinding bertanggung jawab untuk bekerja dengan subsistem gerakan.



Seperti namanya, binding adalah lapisan komunikasi antara level mesin Flutter dan level kerangka itu sendiri, yang masing-masing bertanggung jawab untuk arah kerja tertentu.



WidgetsFlutterBinding



Untuk lebih memahami bagaimana semuanya bekerja bersama, mari kita lihat tempat yang merupakan titik awal untuk aplikasi Flutter - panggilan ke runApp. Metode yang kami panggil ada dalam file binding.dart dan ini bukan kebetulan. Deskripsi untuk itu mengatakan bahwa itu memperluas widget aplikasi yang diteruskan dan melampirkannya ke layar. Mari kita lihat apa fungsinya:



void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}


Di sinilah kita bertemu WidgetsFlutterBinding - implementasi konkret dari pengikatan aplikasi berdasarkan kerangka kerja widget. Pada intinya, itu adalah perekat yang menghubungkan kerangka Flutter dan mesin. WidgetsFlutterBinding terdiri dari banyak binding yang telah kita bahas sebelumnya: GestureBinding , ServicesBinding , SchedulerBinding , PaintingBinding , SemanticsBinding , RendererBinding , WidgetsBinding . Jadi, kami mendapat lapisan yang dapat menghubungkan aplikasi kami ke semua arah yang diperlukan dengan mesin Flutter.



Mari kembali ke peluncuran aplikasi. Di WidgetsFlutterBindingmetode scheduleAttachRootWidget dan scheduleWarmUpFrame dipanggil , mari kita lihat apa yang terjadi di dalamnya.



ScheduleAttachRootWidget



Metode scheduleAttachRootWidget adalah implementasi attachmentRootWidget yang ditangguhkan . Metode ini milik WidgetsBinding . Deskripsi untuk itu mengatakan bahwa itu melampirkan widget yang diteruskan ke renderViewElement - elemen akar dari pohon elemen. 



void attachRootWidget(Widget rootWidget) {
    _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
      container: renderView,
      debugShortDescription: '[root]',
      child: rootWidget,
    ).attachToRenderTree(buildOwner, renderViewElement);
}


Dari kode tersebut, kita dapat melihat bahwa metode ini membuat RenderObjectToWidgetAdapter, yang merupakan widget root dari pohon widget dan digunakan sebagai jembatan yang menghubungkan pohon satu sama lain. Melihat implementasinya, kita akan melihat bahwa ia tidak membuat RenderObject untuk dirinya sendiri, tetapi mengembalikan nilai dari bidang kontainer, dan kita meneruskan renderView dari RendererBinding ke dalamnya saat kita membuatnya. RenderView ini adalah elemen root dari pohon render.



RenderView dapatkan renderView => _pipelineOwner.rootNode;



PipelineOwner sebenarnya adalah manajer yang mengatur proses rendering.



Kembali ke metode attachRootWidget... Metode attachToRenderTree dipanggil pada adaptor yang dibuat, yang dengannya kita membuat root pohon elemen untuk pertama kalinya. Perlu diperhatikan bahwa buildOwner diteruskan ke metode attachToRenderTree . Kelas ini adalah pengelola pembangunan pohon widget yang memantau keadaan widget, memantau kebutuhan untuk memperbarui, dan melakukan sejumlah tugas penting lainnya yang berkaitan dengan memperbarui keadaan pohon widget. Jadi, kami mendapatkan tiga pohon Flutter, yang masing-masing disimpan dan dikelola melalui Bindings.



ScheduleWarmUpFrame



Metode scheduleWarmUpFrame milik SchedulerBinding dan digunakan untuk menjadwalkan frame untuk dimulai secepat mungkin tanpa menunggu sinyal sistem "Vsync". Karena metode ini digunakan selama startup aplikasi, frame pertama, yang mungkin cukup mahal, akan membutuhkan waktu ekstra untuk diaktifkan. Metode ini memblokir pengiriman peristiwa hingga selesainya kerangka yang dijadwalkan.



Seperti yang dapat kita lihat, kedua mekanisme yang diluncurkan saat startup berhubungan dan berinteraksi dengan berbagai Binding, yang pada gilirannya terkait erat dan menyediakan interaksi dengan sistem. Mari kita rangkum dengan diagram berikut.







Kesimpulan



Binding adalah mekanisme penting untuk mengatur aplikasi Flutter. Dialah yang menghubungkan berbagai aspek aplikasi satu sama lain, serta dengan mesin.



Termasuk berkat dia, kita dapat menulis aplikasi kita di bagian kerangka kerja tingkat tertinggi, tanpa mengkhawatirkan tentang bagaimana kita mengatur pekerjaan yang koheren dari yang lainnya. Saya harap artikel ini akan membantu Anda memahami bagian dari perangkat Flutter ini.



Terima kasih atas perhatian Anda!



Bahan-bahan yang digunakan:



Flutter

https://flutter.dev/



All Articles