Flutter PlatformView: Yerli mənzərələrdən vidjetlər necə yaradılır

Flutter yaxınlarda inkişaf etdiricilərin Flatter vidjetlərinin iyerarxiyasına Android Views tətbiq etmək üçün istifadə edə biləcəyi PlatformView adlı yeni bir vidjet əldə etdi. Bu, tam inteqrasiya olunmuş xəritələr və veb görünüşləri (https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/platform_view.dart) kimi bir çox yeni seçimə qapı açır.

Bu dərslikdə doğma bir Android TextView'i Flutter widget olaraq təqdim edərək TextViewPlugin yaratmağı öyrənəcəksiniz.

Kodun içərisinə keçməzdən əvvəl bir neçə vacib şeyi nəzərdən keçirək:

  • Hal-hazırda yalnız Android üçün dəstəklənir (növbəti həftələrdə iOS üçün gəlməlidir)
  • Android API səviyyəsinin 20 və ya daha yüksək olmasını tələb edir.
  • Android görüntülərini yerləşdirmək bahalı bir prosesdir və bir çırpınma ekvivalenti mümkündürsə qarşısını almaq lazımdır.
  • Quraşdırılmış Android görünüşü hər hansı digər Flutter widgetı kimi tərtib edilmişdir və dəyişikliklər də bu widgetə tətbiq olunur.
  • Widget bütün mövcud yerləri doldurur. Buna görə, bu obyektin valideyni məhdud layout məhdudiyyətlərini təmin etməlidir.
  • Bu gündən etibarən iştirak etmək üçün Flatter Master kanalına keçməlisiniz. Bunu Flutter Kanal Masterını işə salmaq və yeni Flutter layihənizin Flutter SDK-nin Master şöbəsinə işarə etdiyini təmin etməklə edə bilərsiniz.

Kod vermə vaxtı :)

Əvvəlcə yeni bir çırpma plagini yaratmalıyıq:

Android Studio-da yeni bir çırpınma layihəsi yaradınBir çırpınma tətbiqi əvəzinə bir çırpma plugin yaradın

Flutter plagini yaradıldıqdan sonra ./lib/text_view.dart-da TextView sinifimizi yaratmağa başlaya bilərik.

Əgər 24-cü sətirdə AndroidView yaratsaq, bir an müzakirə edəcəyimiz bir ViewType-ı təqdim etməliyik.

Ayrıca onPlatformCompleted icrasını təmin edirik ki, mətnimizi vidjetimizi SetText metodundan istifadə edərək mətni yeniləmək üçün istifadə edilə bilən TextViewController ilə təmin edək.

AndroidView üçün tam sənədləri https://docs.flutter.io/flutter/widgets/AndroidView-class.html saytında tapa bilərsiniz.

Sonrakı TextViewPlugin'in Android tətbiqində işləməliyik.

Əvvəlcə başqa bir yaradılan faylı adı ilə açırıq ./android/src/main/java/{organization_name Bäumen / TextViewPlugin.java. Bu faylın tərkibini aşağıdakılarla əvəz edə bilərik:

Biz yalnız doğrudan TextView olaraq PlatformView yaratmaq üçün istifadə olunan text_view.dart və TextViewFactory-də əvvəlcədən müəyyən edilmiş görünüş tipini təmin edən регистрВит metodunu həyata keçiririk.

Sonra, ./android/src/main/java/{organization_name▶/TextViewFactory.java yaratmalı və PlatformViewFactory genişləndirməliyik.

Bizim TextViewFactory, PlatformView'i (bizim vəziyyətimizdə FlutterTextView) qaytaran yaratmaq metodunu tətbiq edir.

Sonrakı ./android/src/main/java/{organization_name▶/FlutterTextView.java yaratmalı və PlatformView və MethodCallHandler tətbiq etməliyik ki, bir çırpıcı bir widget kimi doğma görünüşümüzü çəkək və dartlardan məlumatı MethodChannel vasitəsilə qəbul edək.

FlutterTextView yeni TextView yaradır və bir metodu kanal qurur ki, TextView dart kodundan məlumat ala və yeniləmələr edə bilər (bu vəziyyətdə mətni yeniləyin).

PlatformView-i həyata keçirmək üçün getView-i yenidən yazmalı və mətnimizi geri qaytarmalı və sərəncamın üzərində yazmalıyıq (bu halda heç nə etmir).

MethodCallHandler'i həyata keçirmək üçün, MetMallCall'ı ləğv etməlisiniz və metoddan asılı olaraq daxili setText metodumuzu çağırın (textView'un mətnini yeniləmək üçün) ya da nəticəni geri qaytarın.

İndi yeni TextView widgetımızı sınamağın vaxtı gəldi!

./Example/lib/main.dart açın və aşağıdakı kodu ilə əvəz edin:

Bu tanış görünməlidir. Biz bir iskala təqdim edən bir MaterialApp-ı işə salırıq. TextView vidjetimizi bir mərkəz vidjetinə daxil edilmiş bir konteyner widgetına (bəzi boşluq ilə) yerləşdirdik. Mərkəz widget, bir sütun widgetın ilk övladıdır. Sütununuzun ikinci uşağı qabaqcıl bir widgetdır və quraşdırılmış çırpıntılı mətn widgetı olan bir konteyner widgetı var.

SetText metodu dediyimiz onTextViewCreated üçün də tətbiqetməmiz var.

Nümunə çırpınma proqramımızı işə salmağın və yaratdıqlarımıza nəzər salmağın vaxtı gəldi.

Zəhmli! Adətən yalnız quraşdırılmış Flatter-Text vidjetindən istifadə etsəniz də, artıq güclü olan hər hansı bir yerli Android görüntüsünü "güzgü" edə biləcəyinizi sübut etdik.

Bu nümunə çırpınma tətbiqi, TextView'un hər hansı digər çırpınma widget kimi tərtib edildiyini və dəyişikliklər də bu widget'a şamil edildiyini göstərir.

Plug-in istehsalına hazır olması üçün hələ də testlər yazmalıyıq. Bunu sonrakı məqalədə edəcəyik. Tam mənbə kodunu https://github.com/felangel/flutter_text_view_plugin saytında tapa bilərsiniz.