Flattern - Architekturanwendung

Lassen Sie uns in diesem Kapitel die Architektur des Flutter-Frameworks diskutieren.

Widgets

Das Kernkonzept des Flutter-Frameworks ist In Flutter, Everything is a widget. Widgets sind im Wesentlichen Benutzeroberflächenkomponenten, mit denen die Benutzeroberfläche der Anwendung erstellt wird.

In Flutter ist die Anwendung selbst ein Widget. Die Anwendung ist das Widget der obersten Ebene, und die Benutzeroberfläche wird mit einem oder mehreren untergeordneten Widgets (Widgets) erstellt, die wiederum mit den untergeordneten Widgets erstellt werden. Diesecomposability Mit dieser Funktion können wir eine Benutzeroberfläche beliebiger Komplexität erstellen.

Die Widget-Hierarchie der Hello World-Anwendung (im vorherigen Kapitel erstellt) entspricht beispielsweise der folgenden Abbildung:

Hier sind folgende Punkte bemerkenswert -

  • MyApp ist das vom Benutzer erstellte Widget und wird mit dem nativen Flutter-Widget MaterialApp erstellt .

  • MaterialApp verfügt über eine Home-Eigenschaft, mit der die Benutzeroberfläche der Homepage angegeben wird . Hierbei handelt es sich wiederum um ein vom Benutzer erstelltes Widget, MyHomePage .

  • MyHomePage wird mit einem anderen nativen Flatter-Widget, Scaffold, erstellt

  • Das Gerüst hat zwei Eigenschaften - body und appBar

  • body wird verwendet, um die Hauptbenutzeroberfläche anzugeben, und appBar wird verwendet, um die Header-Benutzeroberfläche anzugeben

  • Die Header-Benutzeroberfläche wird mit dem nativen Flatter-Widget erstellt, AppBar und die Body-Benutzeroberfläche mit dem Center- Widget.

  • Das Center- Widget verfügt über die Eigenschaft Child , die auf den tatsächlichen Inhalt verweist und mithilfe des Text- Widgets erstellt wird

Gesten

Flatter-Widgets unterstützen die Interaktion über ein spezielles Widget, GestureDetector . GestureDetector ist ein unsichtbares Widget, mit dem Benutzerinteraktionen wie Tippen, Ziehen usw. des untergeordneten Widgets erfasst werden können. Viele native Flutter-Widgets unterstützen die Interaktion mithilfe von GestureDetector . Wir können interaktive Funktionen auch in das vorhandene Widget integrieren, indem wir sie mit dem GestureDetector- Widget erstellen . Wir werden die Gesten in den kommenden Kapiteln separat lernen.

Staatskonzept

Flutter - Widgets unterstützen staatliche Wartung durch ein spezielles Widget bereitstellt, StatefulWidget . Das Widget muss vom StatefulWidget- Widget abgeleitet werden, um die Statusverwaltung zu unterstützen, und alle anderen Widgets sollten vom StatefulWidget abgeleitet werden . Flattern Widgets sindreactivein native. Dies ist ähnlich wie bei reactjs und StatefulWidget wird automatisch neu gerendert, wenn sein interner Status geändert wird. Das erneute Rendern wird optimiert, indem der Unterschied zwischen der alten und der neuen Widget-Benutzeroberfläche ermittelt und nur die erforderlichen Änderungen gerendert werden

Schichten

Das wichtigste Konzept des Flutter-Frameworks besteht darin, dass das Framework hinsichtlich seiner Komplexität in mehrere Kategorien eingeteilt und in Schichten mit abnehmender Komplexität klar angeordnet ist. Eine Ebene wird mit ihrer unmittelbaren Ebene der nächsten Ebene erstellt. Die oberste Ebene ist ein Widget, das für Android und iOS spezifisch ist . Die nächste Ebene enthält alle nativen Widgets. Die nächste Ebene ist die Rendering- Ebene, eine Renderer-Komponente auf niedriger Ebene, die alles in der Flatter-App rendert. Ebenen gehen auf plattformspezifischen Kerncode zurück

Die allgemeine Übersicht über eine Ebene in Flutter ist in der folgenden Abbildung dargestellt:

Die folgenden Punkte fassen die Architektur von Flutter zusammen -

  • In Flutter ist alles ein Widget und ein komplexes Widget besteht aus bereits vorhandenen Widgets.

  • Interaktive Funktionen können bei Bedarf mithilfe des GestureDetector- Widgets integriert werden.

  • Der Status eines Widgets kann bei Bedarf mithilfe des StatefulWidget- Widgets beibehalten werden .

  • Flutter bietet ein mehrschichtiges Design, sodass jede Ebene je nach Komplexität der Aufgabe programmiert werden kann.

Wir werden all diese Konzepte in den kommenden Kapiteln ausführlich diskutieren.