„Flutter“ „Jetpack Compose“ kūrėjams: išsamus praktinis vadovas

Pagrindinis » Pitonas » „Flutter“ „Jetpack Compose“ kūrėjams: išsamus praktinis vadovas

Jei jau jaučiatės kaip namie rašydami vartotojo sąsajas naudodami „Jetpack Compose“ ir svarstote, kaip sunku pereiti prie „Flutter“, esate puikioje pozicijoje. Abu įrankių rinkiniai yra deklaratyvūs, reaktyvūs ir sukurti „Google“, todėl didelė jūsų mentalinio modelio dalis yra beveik viena su kita. Pagrindiniai skirtumai yra kalboje („Kotlin“ ir „Dart“), projekto struktūroje ir tame, kaip kiekviena sistema bendrauja su pagrindiniais „Android“ (o „Flutter“ atveju – „iOS“, žiniatinklio ir darbalaukio) sluoksniais.

Šis vadovas yra parašytas specialiai „Jetpack Compose“ kūrėjams, norintiems nuodugniai suprasti „Flutter“ be jokių rinkodaros niuansų. Pamatysite, kaip pagrindinės sąvokos siejasi dviejuose pasauliuose: komponuojami elementai ir valdikliai, modifikatoriai ir konstruktoriaus parametrai, „Lazy Layouts“ ir „ListView“ / „GridView“, „Canvas“ ir „CustomPainter“, navigacijos kūrimas ir „Navigator“, prisiminimas ir „StatefulWidget“ ir kita. Taip pat susiesime jūsų platesnę „Android“ patirtį (rodinius, gyvavimo ciklą, išteklius, ketinimus, darbą fone) su jų atitikmenimis „Flutter“, kad mokymosi kreivė labiau primintų žingsnį į šoną, o ne kopimą.

Nuo „Jetpack Composte“ iki „Flutter“: kur perkeliami jūsų įgūdžiai

„Flutter“ yra „Google“ vartotojo sąsajos sistema, skirta kurti kelių platformų programas naudojant „Dart“ kalbą, o „Jetpack Compose“ yra modernus „Google“ vartotojo sąsajos įrankių rinkinys, skirtas „Android“ sistemai, naudojant „Kotlin“. Iš esmės jie skirti skirtingoms veikimo aplinkoms, tačiau architektūriškai juos vienija ta pati pagrindinė idėja: aprašyti vartotojo sąsają kaip būsenos funkciją, leisti sistemai nuspręsti, kada ir kaip ją perbraižyti.

„Jetpack Compose“ programoje mąstote komponuojamų funkcijų, modifikatorių ir perkomponavimo terminais; „Flutter“ programoje mąstote valdiklių, konstruktoriaus parametrų ir perkūrimų terminais. Nepaisant skirtingų pavadinimų, veikimas yra stebėtinai panašus: sukuriate vartotojo sąsajos elementų medį, kiekvienas mazgas yra nekintamas, o būsenai pasikeitus, sistema vėl pereina tą medį, kad sukurtų atnaujintą sąsają.

Vienas esminis skirtumas yra tas, kad „Flutter“ yra sukurta kelioms platformoms. Ta pati „Dart“ kodo bazė gali būti skirta „Android“, „iOS“, žiniatinkliui, „Windows“, „macOS“ ir „Linux“. „Compose“ plečiasi už „Android“ ribų (pavyzdžiui, su „Compose Multiplatform“), tačiau „Flutter“ kelių įrenginių istorija šiuo metu yra daug brandesnė ir darnesnė, todėl daugelis „Android“ komandų į ją atsižvelgia, kai nori pristatyti programą „iOS“ ar kompiuteriams.

Jūsų supratimas apie pačią „Android“ platformą vis dar yra nepaprastai vertingas „Flutter“ projektuose. Nors vartotojo sąsajos sluoksnis yra grynai „Dart“ ir valdikliai, „Flutter“ leidimams, sistemos konfigūracijai, platformos API, pranešimams, foniniam darbui ir daugeliui kitų funkcijų, pasiekiamų per papildinius ir platformos kanalus, priklauso nuo „Android“ (ir „iOS“). Tai reiškia, kad visa jūsų sukaupta intuicija apie „Android“ veikimą nenueina veltui – ji tiesiog perkeliama vienu sluoksniu žemyn.

Deklaratyvus vartotojo sąsajos modelis: komponuojami elementai ir valdikliai

Tiek „Jetpack Compose“, tiek „Flutter“ įgyvendina deklaratyvų vartotojo sąsajos modelį: jūs aprašote, „kaip“ vartotojo sąsaja turėtų atrodyti tam tikroje būsenoje, o ne „kaip“ žingsnis po žingsnio keisti rodinius. Užuot iškvietę seterius rodiniams, jūs atstatote savo medį, kai pasikeičia būsena, ir leidžiate sistemai efektyviai atlikti diferenciaciją ir perbraižyti.

„Jetpack Compose“ programoje vartotojo sąsajos elementai yra komponuojamos funkcijos, pažymėtos @Composable, dažnai konfigūruojamas su Modifier. Mygtukas gali būti Button(onClick = ..., modifier = Modifier.padding(16.dp))Modifikatorių grandinė puošia arba išdėsto komponuojamą elementą nekeisdama jo pagrindinio tipo, o „Compose“ naudoja rekompoziciją, kad atnaujintų tik tas medžio dalis, kurių įvesties duomenys pasikeitė.

„Flutter“ sistemoje vartotojo sąsajos elementai yra valdikliai – paprasti „Dart“ objektai, apibūdinantys konfigūraciją. Jie taip pat yra nekeičiami ir išdėstyti medyje, tačiau užuot perdavę modifikatorių, paprastai perduodate išdėstymo ar stiliaus argumentus tiesiogiai per konstruktoriaus parametrus arba įtraukiate valdiklį į kitus išdėstymo valdiklius. Pavyzdžiui, galite parašyti Padding(padding: EdgeInsets.all(16), child: ElevatedButton(...)) norint pasiekti panašų rezultatą.

Tiek komponuojamų elementų, tiek valdiklių gyvavimo ciklas yra sąmoningai trumpas ir nekintamas. Jie gyvuoja tik tol, kol dėl naujos įvesties juos reikia pakeisti; nė vienas iš jų nebando valdyti savo gyvavimo ciklo ar tiesiogiai mutuoti. Tai konceptualus pokytis, palyginti su senuoju „Android View“ pasauliu, kuriame vaizdai yra ilgai gyvuojantys objektai, pakartotinai naudojami ir mutuojami laikui bėgant, todėl jūsų „Compose“ mąstysena „Flutter“ atrodo tokia natūrali.

Iš esmės abiejų sistemų išdėstymas atitinka tą patį tėvų valdomą, apribojimais pagrįstą modelį. Tėvų įrenginys pats save išmatuoja, perduoda apribojimus, vaikai pasirenka dydį, atsižvelgdami į tuos apribojimus, ir tėvas išdėsto savo vaikus. „Flutter“ programoje tai matysite tiesiogiai kaip BoxConstraints; „Compose“ programoje tai tvarkoma įgyvendinant „MeasurePolicy“. Abiem atvejais tėvai gali apriboti vaikus – valdikliai negali tiesiog pasirinkti bet kokio dydžio ar pozicijos.

Programėlės struktūrizavimas: įėjimo taškas, pastoliai ir išdėstymai

„Android“ sistemoje su „Compose“ jūsų įėjimo taškas paprastai yra Activity (dažnai a ComponentActivity) kur skambinate setContent talpinti savo komponuojamus failus. Iš ten sukuriamas komponuojamas medis, paprastai pradedant nuo MaterialTheme ir paviršių arba pastolius, kurie apibrėžia jūsų aukšto lygio išdėstymą.

„Flutter“ žaidime įėjimo taškas yra „Dig“ main funkcija, kuri iškviečia runApp su savo programos šakniniu valdikliu. Ta šaknis dažniausiai yra MaterialApp or WidgetsApp valdiklis, kuris nustato maršrutizavimą, temų parinkimą, lokalizaciją ir bazinę navigaciją. Pirmame rodomame „ekrane“ dažnai naudojamas Scaffold valdiklis, kuris atlieka labai panašų vaidmenį Scaffold „Material 3 Compose“: joje yra programų juosta, tekstas, plaukiojantis veiksmo mygtukas, stalčiai ir pan.

Paprastam tekstui ir statiniam turiniui „Compose“ gali numatytoji reikšmė būti turinio perkėlimas (dydis turi būti pritaikytas prie vidinio turinio), o daugelis „Flutter“ valdiklių pagal numatytąją reikšmę užima daugiau vietos, nebent tai būtų apribota. Pavyzdžiui, jei pastatysite Text komponuojamas stulpelio viduje, jis automatiškai neužpildys pločio. „Flutter“ kalboje Text viduje a Column gali elgtis skirtingai, priklausomai nuo pagrindinio elemento apribojimų. Norėdami centruoti turinį „Flutter“ sistemoje, dažnai elementus apvyniosite Center valdikliui arba naudokite išdėstymo valdiklius, pvz., Align, Row, Columnir Expanded kartu su lygiavimo savybėmis.

Linijiniai maketai beveik idealiai susieja: „Compose“ turi Row bei Column, ir taip pat Flutter. „Flutter“ programoje vaikai pateikiami kaip List<Widget> ir valdyti tarpus bei lygiavimą tokiomis savybėmis kaip MainAxisAlignment bei CrossAxisAlignment„Compose“ programoje jūs remiatės horizontalArrangement, verticalArrangement, horizontalAlignment bei verticalAlignmentNaudingas būdas tai suprasti: savybės, kurios baigiasi „Išdėstymas“, susiejamos su pagrindine „Flutter“ ašimi, o savybės, kurios baigiasi „Lygiavimas“, susiejamos su skersine ašimi.

Kai reikia santykinių arba persidengiančių išdėstymų, metodai taip pat yra konceptualiai suderinti. „Android XML“ sistemoje galite pasiekti RelativeLayout arba įdėtas mišinys LinearLayout bei FrameLayout. Sukurti galėtumėte parašyti Row, Column bei Box (arba parašykite pasirinktinį išdėstymą). „Flutter“ analogas yra Row, Column bei Stack kartu su išdėstytais vaikais ir lygiavimo parinktimis. Jūsų mentalinis elementų išdėstymo vienas kito atžvilgiu modelis juda beveik nepakitęs.

Mygtukai, įvestis ir sąveika

„Jetpack Composte“ programoje mygtuko kūrimas paprastai reiškia Button arba vienas iš jo medžiagos variantų, kuris pagal 3 medžiagą atitinka konkretų įgyvendinimą, pvz. FilledTonalButton. Jūs pateikiate an onClick lambda ir pasirenkamas stilius, dažnai naudojant tokius parametrus kaip colors arba modifikatorius užpildymui, pločiui ir lygiavimui.

„Flutter“ žaidime atitikmuo yra tokių valdiklių naudojimas kaip FilledButton, ElevatedButton, TextButton or OutlinedButton. Kiekvienas paima onPressed atgalinis skambutis ir child valdiklis – dažniausiai TextGalite juos pritaikyti perduodami style per ButtonStyle arba naudojant visuotinį temos perrašymą, kuris leidžia centralizuotai reguliuoti visos mygtukų šeimos spalvą, formą, aukštį ir dydį.

Gestams tvarkyti „Compose“ naudoja modifikatorius, tokius kaip Modifier.clickable daugeliu atvejų, bet prireikus galite pasinaudoti ir specializuotais gestų detektoriais. Ilgi paspaudimai, vilkimas ir pasirinktiniai gestai paprastai kuriami naudojant specialias modifikatorių API ir sąveikos šaltinius.

„Flutter“ atskleidžia aiškų GestureDetector valdiklis, kurį galite apvynioti aplink bet ką, kas neturi integruoto gestų palaikymo. Jis siūlo platų atgalinių skambučių pasirinkimą: onTap, onDoubleTap, onLongPress, onVerticalDragStart, onVerticalDragUpdate, onHorizontalDragEnd ir daugelis kitų. Valdikliai, tokie kaip ElevatedButton jau atskleisti onPressed savybė, bet visiškai pritaikytiems vartotojo sąsajos elementams galite naudoti GestureDetector arba aukštesnio lygio valdikliai, pvz. InkWell medžiagos pulsacijos grįžtamajam ryšiui.

Teksto įvedimas „Flutter“ programoje valdomas naudojant TextField or TextFormField, kurio stilius panašus į „Compose“ TextField bei OutlinedTextField kompozitinės medžiagos. Užuominas, etiketes, klaidas ir rėmelius konfigūruojate naudodami InputDecoration panašiai kaip jūs naudojate TextFieldDefaults arba parametrus kūrimo teksto laukuose. Kaip ir kūrimo lange, klaidų pranešimus paprastai rodote reaktyviai keisdami būseną ir perkurdami dekoraciją, o ne rankiniu būdu manipuliuodami rodiniais.

Sąrašai, tinkleliai ir slenkantis turinys

„Jetpack Composite“ siūlo dvi pagrindines sąrašų strategijas: paprastą Column/Row su iteracija mažoms kolekcijoms ir LazyColumn/LazyRow/LazyVerticalGrid/LazyHorizontalGrid dideliems arba dinaminiams sąrašams. Tingi konteineriai komponuoja tik tai, kas matoma, todėl dirbant su tūkstančiais elementų išlieka aukštas našumas.

„Flutter“ taiko tą patį mažų ir didelių elementų palyginimo metodą, tačiau naudoja skirtingus valdiklius. Jei norite mažo sąrašo, kuris tilptų ekrane, galite tiesiog naudoti Column ir susiekite savo duomenis su childrenViskam, kas slenka, tiesiate ranką ListView or GridView, su konstruktoriais, kurie tingiai kuria vaikus tik tada, kai reikia.

Įprastas „Flutter“ modelis yra ListView.builder, kuris atspindi „Compose“ neatidėliotinų sąrašo elementų DSL. Jūs tiekiate itemCount ir itemBuilder atgalinis iškvietimas; „Flutter“ iškviečia tą kūrimo priemonę su indeksu nuo 0 iki itemCount - 1 kai tik atsiranda naujas elementas. Kūrėjo viduje galite grąžinti beveik bet kurį valdiklį – nuo ​​paprasto ListTile su tekstu ir piktograma sudėtingoms, pasirinktinėms sąrašo eilutėms.

Tinkleliams, „Compose“ LazyVerticalGrid bei LazyHorizontalGrid žemėlapis į „Flutter's“ GridView Valdiklis. Užuot perdavęs stulpelių skaičių tiesiai į tinklelį, „Flutter“ dažnai naudoja delegatą, pvz. SliverGridDelegateWithFixedCrossAxisCount or SliverGridDelegateWithMaxCrossAxisExtent valdyti langelių išdėstymą. Šie delegatai apima tokias taisykles kaip „stulpelių skaičius“ arba „maksimalus langelio plotis“, panašiai kaip tinklelio dydžio parametrai, kuriuos naudojate „Compose“.

Slinkimo elgesys abiejuose įrankių rinkiniuose taip pat yra panašus. „Compose“ lėtuose sąrašuose slinkties funkcija yra integruota; jų nereikia sudėti į papildomus slinkties konteinerius. „Flutter“ programoje daugelis sąrašų ir tinklelio valdiklių patys yra slenkami, tačiau vienam, nesikartojančiam turiniui, kuris turėtų slinkti, galite naudoti SingleChildScrollViewPasirinktinių slenkamųjų puslapių kūrimas tampa įdėjimo arba atkarpų komponavimo klausimu sudėtingesniems naudojimo atvejams.

Adaptyvūs ir reaguojantys vartotojo sąsajos šablonai

„Compose“ siūlo kelias reaguojančio dizaino strategijas: pasirinktinius maketus, BoxWithConstraints, WindowSizeClass ir adaptyvioji „Material 3“ biblioteka. Tai leidžia keisti kompoziciją pagal turimą erdvę, pozą ir įrenginio kategoriją, taip pat galite juos derinti priklausomai nuo projekto sudėtingumo.

„Flutter“ nebando tiesiogiai atkartoti tų API, tačiau pagrindinė idėja ta pati: patikrinkite apribojimus ir ekrano charakteristikas, o tada suskirstykite savo maketą į atskiras dalis. Du pagrindiniai įrankiai yra LayoutBuilder bei MediaQuery. LayoutBuilder Leidimai BoxConstraints žemyn, kad galėtumėte sukeisti arba pertvarkyti valdiklius, viršijančius tam tikrą plotį ar aukštį. MediaQuery rodo ekrano dydį, orientaciją, užpildymą ir pikselių tankį aukšto lygio lūžio taškams.

Užuot siekiant vienareikšmio atitikimo tarp „Compose“ adaptyvių ir „Flutter“ sprendimų, efektyviau galvoti atsižvelgiant į jūsų projektavimo reikalavimus. Kai žinosite, kaip jūsų vartotojo sąsaja turėtų prisitaikyti prie telefonų, planšetinių kompiuterių ir stalinių kompiuterių, galėsite išreikšti šią logiką naudodami „Compose“ WindowSizeClass ir adaptyvūs maketai arba „Flutter“ apribojimais ir medija pagrįstas šakojimas. Tas pats dizaino mąstymas – skirtingos API.

Būsenos valdymas: prisiminkite, palyginti su „StatefulWidget“ ir kitais aspektais

„Jetpack Compose“ saugo trumpalaikę vartotojo sąsajos būseną naudodama remember ir valstybės savininkai, pvz. mutableStateOf, dažnai derinamas su ViewModel ir architektūros komponentai ilgaamžei būsenai. Kai būsena pasikeičia, įvyksta rekompozicija ir atitinkami komponuojami elementai įgauna naujas reikšmes.

„Flutter“ žemo lygio valstybės istorija sukasi apie StatefulWidget ir su juo susiję State objektas Valdiklį, kuris nori išlaikyti būseną, apibrėžiate išplėsdami StatefulWidget, tada įdiekite atskirą State<MyWidget> klasė, skirta keistiems laukams saugoti. Kaskart atnaujinant šiuos laukus, iškviečiama setState(), kuris pažymi tą valdiklio medžio dalį kaip nešvarią ir inicijuoja atstatymą. Šiame lygmenyje tai labai panašu į kūrimo būsenos saugojimą su remember ir anuliuoti sudėtinius elementus, kai pasikeičia vertės.

Sudėtingesnėms programoms „Flutter“ daugiausia remiasi bendruomenės ir pirmosios šalies modeliais: Provider„Riverpod“, „Bloc“, „Redux“ stiliaus parduotuvės ir kt. Jie veikia kaip jūsų „Android“ architektūros rinkinių analogai: „ViewModel“ + „LiveData/Flow“ + saugyklos „Compose“ projektuose. Jie centralizuoja verslo logiką ir atskleidžia reaktyvius duomenų srautus, kurie skatina valdiklių perkūrimą. „Compose“ fone daugelį šių šablonų rasite pažįstamus, net jei API skiriasi.

Vienas dalykas, kuris dažnai stebina „Android“ kūrėjus, yra tai, kad tiek be būsenos, tiek su būsena esantys valdikliai „Flutter“ programoje dažnai perkuriami – animacijos metu gali būti kiekviename kadre. Skirtumas yra ne dėl atkūrimo dažnio, o dėl to, kur saugoma keičiama būsena: StatefulWidget suteikia tau kompanioną State objektas, kuris išgyvena atstatymus, panašiai kaip remember leidžia reikšmėms išlikti po pakartotinio sudarymo programoje „Compose“.

Piešimas, animacija ir vizualinis šlifavimas

Jei kada nors dirbote tiesiogiai su „Android“ Canvas bei Drawable, „Compose“ Canvas komponuojamas tikriausiai atrodė paprastas. Tai suteikia deklaratyvų būdą piešti figūras, vaizdus ir tekstą Kotlin kalba, slepiant daug tradicinių pasirinktinių vaizdų imperatyvios ceremonijos.

„Flutter“ atskleidžia panašų piešimo paviršių per Canvas API, pasiekiama per CustomPaint bei CustomPainter. Jūs įgyvendinate CustomPainter klasė, kurioje jūs perrašote paint piešimo ant drobės metodas naudojant Paint objektai, keliai, transformacijos ir taip toliau. Tada tą piešimo įrankį pridedate prie CustomPaint valdikliui. Po gaubtu tiek „Compose“, tiek „Flutter“ remiasi „Skia“ varikliu, todėl primityvai – linijos, keliai, šešėliavimo elementai – atrodo labai pažįstami iš „Android“ 2D vaizdavimo.

Animacijoms „Flutter“ remiasi aiškia animacijos sistema, sukurta aplink AnimationController, Animation<T> ir „Tweens“, taip pat gausus animuotų valdiklių rinkinys. Jūs sukuriate valdiklio egzempliorių (paprastai su SingleTickerProviderStateMixin „vsync“ atveju), apibrėžkite „CurvedAnimations“ arba „Tweens“, kurie susieja 0–1 progresą su domeno reikšmėmis, o tada įtraukite juos į valdiklius, pvz. FadeTransition, ScaleTransition, AnimatedBuilder arba netiesioginiai valdikliai, pvz. AnimatedContainerAnimacijos sistema taip pat atskleidžia AnimationStatus Atgaliniai skambučiai, skirti reaguoti į pradžią, užbaigimą arba atšaukimą.

„Jetpack Compose“ animacijos API yra deklaratyvios iš viršaus į apačią, su tokiomis funkcijomis kaip animate*AsState, perėjimai ir animuotas matomumas. Užuot dažniausiai rankiniu būdu valdę valdiklius, jūs aprašote tikslines būsenas, o sistema laikui bėgant valdo interpoliaciją. Kai jums reikia labiau pritaikyto valdymo, vis tiek turite prieigą prie žemo lygio primityvų, tačiau įprastas kelias yra glaustesnis nei klasikinis „Android“ XML ar imperatyvus animacijos kodas.

Konceptualiai abu įrankių rinkinius naudojate tuo pačiu būdu: valdikliai / komponuojami elementai išlieka lengvi ir aiškūs, per juos perduodamos laike kintančios vertės ir leidžiama sistemai tvarkyti interpoliaciją ir negaliojimą. Kaip „Compose“ kūrėjui, papildomas „Flutter“ aiškumas AnimationController Iš pradžių gali pasirodyti kiek senamadiška, bet suteikia labai tikslią laiko, kreivių ir aranžuotės kontrolę.

Stilius, temos, šriftai ir ištekliai

Šiuolaikinės programėlės gyvuoja arba miršta dėl savo meistriškumo, todėl tiek „Flutter“, tiek „Compose“ daug dėmesio skiria temų ir stiliaus kūrimui. Sukurti naudoja MaterialTheme su spalvų schemomis, tipografija ir formų apibrėžimais, taip pat galite įdėti temas, kad pakeistumėte poskyrių reikšmes, įskaitant šviesių arba tamsių paviršių nustatymą tam tikrose srityse.

„Flutter“ atitikmuo yra ThemeData perduota MaterialApp or Theme raštai. Jūs apibrėžiate pagrindines spalvas, ryškumą, tipografiją ir komponentams būdingas temas, pvz. elevatedButtonTheme, textButtonTheme, appBarTheme ir daugiau. Galite pakeisti temas lokaliai, apvyniodami poskyrius Theme valdikliai, kurie kopijuoja pirminį elementą ir koreguoja tam tikrus laukus. Šviesų ir tamsų režimus galima perjungti programos lygmeniu, pateikiant theme bei darkTheme ir kontroliuojant themeMode.

Teksto stilizavimas yra įprasta sritis: programoje „Compose“ jūs tiesiogiai perduodate paprastas savybes Text arba tiekti TextStyle objektas Plazdėjimas tai atspindi su a Text valdiklis, kuris priima TextStyle per ją style parametras. TextStyle apima šriftų šeimą, dydį, storį, raidžių tarpus, eilutės aukštį, dekoravimą ir kt. Galite apibrėžti visuotines teksto temas ThemeData.textTheme ir nurodykite juos visur, lygiai taip pat, kaip naudotumėte tipografiją iš MaterialTheme Sukurti.

Šriftai ir vaizdai tvarkomi naudojant išteklius, o ne tradicinį „Android“ /res katalogų medis. „Flutter“ nereikalauja konkretaus aplankų išdėstymo; jūs deklaruojate išteklius pubspec.yaml ir tada į juos nurodoma iš kodo. Vaizdai paprastai įkeliami su Image.asset(), kuris išsprendžiamas pagal teisingą tankio segmentą devicePixelRatioLoginiai pikseliai atlieka tą patį vaidmenį kaip ir dp „Android“ sistemoje, panaikinant fizinį pikselių tankį.

Pasirinktinių šriftų atveju „Compose“ leidžia supakuoti šriftų išteklius arba juos išgauti vykdymo metu per tokius teikėjus kaip „Google Fonts“, o tada prijungti prie FontFamily ir tipografija. „Flutter“ naudoja beveik tą patį modelį: šriftų failus įdėkite į išteklių aplanką, išvardykite juos pubspec.yaml, o tada nurodykite šriftų šeimą pagal pavadinimą TextStyleJei norite vykdymo metu gaunamų šriftų, yra populiarus google_fonts įskiepis, kuris atskleidžia „Dart“ funkcijas, pavadintas pagal šriftus, pvz. GoogleFonts.robotoTextTheme()– greitai juos įtraukti į savo temą.

Abi ekosistemos eilutes ir lokalizaciją laiko svarbiausiu prioritetu, nors „Flutter“ neturi tiesioginio atitikmens „Android“ XML eilučių ištekliams. Geriausia praktika yra išlaikyti vertimus .arb failus ir sujungti juos su „Flutter“ lokalizacijos įrankių grandine. Prieiga tada atliekama per sugeneruotas „Dart“ klases, maždaug analogiškai tam, kaip naudojant R.string identifikatoriai „Android“ kode.

„Android“ platformos koncepcijos per „Flutter“ objektyvą

Be vartotojo sąsajos, vienas didžiausių klausimų, su kuriais susiduria „Compose“ kūrėjai, yra tai, kaip jų „Android“ žinios susiejamos su „Flutter“ architektūra. Laimei, daugelis pagrindinių idėjų – veiklos, gyvavimo ciklas, ketinimai, darbas su kitais, ištekliai, tinklaveika – turi aiškius atitikmenis, net jei paviršinė API atrodo kitaip.

„Android“ Activity bei Fragment yra jūsų pagrindiniai ekranai ir konteineriai; „Flutter“ sistemoje viskas yra valdiklis, o naršymas vyksta per Navigator bei Route daiktai. Maršrutas apytiksliai atitinka veiklą arba fragmentą, tačiau paprastai yra tik vienas prieglobos taškas. Activity „Android“ sistemoje, kurioje integruotas „Flutter“ variklis. Maršrutus galite įkelti ir išjungti „Navigator“ steke, naudodami įvardytus maršrutus, apibrėžtus MaterialApp arba tiesiogiai sukonstruotais PageRoute tokie atvejai kaip MaterialPageRoute.

„Android“ gyvavimo ciklo atgaliniai iškvietimai (onCreate, onStart, onResumeir kt.) „Flutter“ kode nėra individualių sąsajų, tačiau galite stebėti programos gyvavimo ciklą su WidgetsBindingObserver. Tai atskleidžia tokias valstybes kaip resumed, inactive, paused bei detached, kurie maždaug atitinka „Android“ matomumo, fono ir sunaikinimo fazes. Kai iš tiesų reikia žemo lygio gyvavimo ciklo kabliukų išteklių valdymui, jie paprastai įdiegiami gimtojoje „Android“ pusėje FlutterActivity arba įskiepis, ne „Dart“.

„Android“ sistemoje ketinimai atlieka du vaidmenis: naršymą programoje ir komunikaciją tarp programų. Kaip minėta, „Flutter“ neturi ketinimais pagrįstos naršymo API – „Navigator“ ją visiškai pakeičia „Dart“ pasaulyje. Užduotims keliose programose (kameros paleidimas, failų rinkiklis, bendrinimo ketinimų tvarkymas) paprastai naudojami papildiniai, kurie apima reikiamus „Android“ (ir „iOS“) iškvietimus. Jei papildinio nėra, galite parašyti savo naudodami „MethodChannels“, kad galėtumėte bendrauti tarp „Dart“ ir vietinio kodo, persiunčiant ketinimus ir rezultatus kaip pranešimus.

Tavo supratimas apie foninį darbą ir gijų sudarymą taip pat perkeliamas, bet primityvūs elementai atrodo kitaip. „Android“ verčia jus perkelti tinklo ir disko įvesties/išvesties operacijas iš pagrindinio srauto naudojant korutinas, „AsyncTask“ (senas), „WorkManager“, „JobScheduler“, „RxJava“ ir kt. „Dart“, priešingai, kiekvienam izoliato elementui naudoja vieno srauto įvykių ciklą su „async/await“ įvesties/išvesties funkcija ir atskirais izoliato elementais, skirtais intensyviai procesoriaus apkrovą turintiems darbams. Visiems įvesties/išvesties veiksmams tiesiog pažymėkite savo funkcijas. async, await operaciją ir leiskite įvykių ciklui išlaikyti vartotojo sąsają reaguojančią; sunkioms CPU užduotims atlikti paleidžiate izoliatą ir bendraujate perduodami pranešimus, o ne bendrai naudojama atmintis.

Tinklų srityje populiari „Flutter“ http Paketas atlieka panašų vaidmenį kaip „OkHttp + Retrofit“ pagrindiniais naudojimo atvejais. Jis paslepia didelę dalį žemo lygio sujungimo darbo ir natūraliai integruojasi su „async/await“. Sudėtingesniems poreikiams galite naudoti tokius paketus kaip dio, tačiau pagrindinis modelis išlieka: atlikti asinchroninį iškvietimą, laukti rezultato, atnaujinti būseną su setState() arba pasirinktą būsenos tvarkyklę ir atkurkite paveiktus valdiklius.

Įskiepiai, saugykla, „Firebase“ ir įrankiai

„Android“ sistemoje esate įpratę priklausomybes deklaruoti „Gradle“ programoje; „Flutter“ sistemoje jas deklaruojate pubspec.yaml ir parsisiųsti juos iš pub.dev. „Gradle“ failai, esantys po android/ „Flutter“ projekto aplankas dažniausiai skirtas konkrečios platformos integracijoms arba kai reikia pasirinktinių vietinių bibliotekų – kasdienis programų kūrimas lieka „Dart“ pasaulyje.

Bendros nuostatos ir „SQLite“ taip pat turi paruoštus atitikmenis. Kur siūlo „Android“ SharedPreferences mažų raktų ir reikšmių saugyklai ir SQLite (arba Room) struktūrizuotiems duomenims, „Flutter“ juos apvynioja per tokius papildinius kaip shared_preferences bei sqfliteŠie papildiniai suvienodina „Android“ ir „iOS“ veikimą, kad galėtumėte naudoti vieną „Dart“ API, nepriklausomai nuo platformos, tuo pačiu pasikliaudami pagrindinėmis vietinėmis įgyvendinimo sistemomis.

„Firebase“ integracija yra panašiai paprasta ir aukščiausios klasės. Dauguma „Firebase“ paslaugų – autentifikavimas, „Firestore“, realiojo laiko duomenų bazės, debesies pranešimų siuntimas, analizė, nuotolinė konfigūracija ir kitos – turi oficialius „Flutter“ papildinius, kuriuos prižiūri „Firebase“ ir „Flutter“ komandos. Jie atspindi „Android“ „Firebase“ SDK koncepcinį modelį, tačiau turi „Dart“ idiomatines API. Norėdami sužinoti daugiau apie nišines „Firebase“ funkcijas, kurios nėra tiesiogiai aptariamos, pub.dev svetainėje rasite puikią trečiųjų šalių papildinių ekosistemą.

Derinimui ir profiliavimui „Flutter“ „DevTools“ rinkinys suteikia jums platų įrankių rinkinį, tiesiogiai palyginamą su „Android Studio“ profiliavimo įrankiu ir išdėstymo inspektoriumi. Galite apžiūrėti valdiklių medį, sekti atkūrimą, stebėti atminties paskirstymą, diagnozuoti nutekėjimus ir fragmentaciją bei peržiūrėti „Dart“ kodą. Kartu su IDE palaikymu „Android Studio“ ir „VS Code“, karštojo perkrovimo ir karštojo paleidimo iš naujo galimybėmis, grįžtamojo ryšio ciklas kuriant „Flutter“ atrodo bent jau toks pat griežtas – o dažnai ir griežtesnis – nei tas, prie kurio esate įpratę naudodami „Compose“.

„Push“ pranešimai, dar viena dažna „Android“ problema, „Flutter“ sistemoje tvarkomi naudojant tokius papildinius kaip firebase_messaging. Iš esmės jie bendrauja su „Firebase Cloud Messaging“ ir vietinėmis pranešimų sistemomis „Android“ ir „iOS“ sistemose, tačiau jūsų programos logika yra vieningoje „Dart“ API sąsajoje. Konfigūracija ir platformoms būdingas veikimas (pvz., pranešimų kanalai „Android“ sistemoje) vis dar yra svarbūs, o jūsų esama patirtis su šiomis platformos detalėmis išlieka labai aktuali.

Net ir „Android“ pagrindinio ekrano valdikliai, kurių negalima įdiegti vien tik „Flutter“, vis tiek gali būti integruoti su „Flutter“ kodu. Paprastai juos kuriate naudodami „Jetpack Glance“ arba XML maketus, o tada naudojate paketą, pvz. home_widget bendrauti su „Flutter“ programėle, bendrinti duomenis ir netgi įterpti rasterinę „Flutter“ vartotojo sąsają kaip vaizdą į vietinį valdiklį. Šis hibridinis metodas leidžia išlaikyti pagrindinę patirtį „Flutter“, kartu atsižvelgiant į platformos apribojimus.

Žvelgiant į visas šias paraleles, „Jetpack Compose“ kūrėjas, žengiantis į „Flutter“, visai nepradeda nuo nulio. Jūsų supratimas apie deklaratyviąją vartotojo sąsają, „Android“ gyvavimo ciklą, navigaciją, būseną, išteklius ir asinchroninį darbą labai natūraliai atitinka „Flutter“ pasaulį; labiausiai pasikeičia pavadinimai, kalba („Dart“) ir daugiaplatformė mąstysena. Kai valdiklius ir „Navigator“ įvaldysite kaip pagrindines koncepcijas, likusi dalis gana greitai susiklostys savo vietose.