vorne schreiben

Heutzutage möchten die Menschen, dass Apps auf ihren Handys schöne Designs, flüssige Animationen und großartige Funktionen haben. Um dies zu erreichen, müssen Entwickler neue Funktionen schneller veröffentlichen, ohne Kompromisse bei Qualität und Leistung einzugehen. Forschung und Entwicklung, das ist der Kern von Flutter.

Bildbeschreibung hier einfügen

Was ist Flattern?

Einführung in Flutter

FlutterEs ist Googles Open-Source-Toolkit zum Erstellen von Benutzeroberflächen (UI), das Entwicklern dabei hilft, ansprechende Anwendungen für mehrere Plattformen durch eine Reihe von Codebasen zu erstellen, die Mobil-, Web-, Desktop- und eingebettete Plattformen unterstützen. Flutter ist Open Source, kostenlos und hat ein loses Open-Source-Protokoll, wodurch es für kommerzielle Projekte geeignet ist. Flutter hat eine stabile Version 2.0 veröffentlicht.
Bildbeschreibung hier einfügen

Flutter installieren

Installationsumgebung

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

## 检测环境是否安装成功
$flutter doctor
## 开发工具
android studio
visual studio code

Beispielcode

Wir werden das einfachste Hello World!Beispiel verwenden, um Ihnen ein Beispiel zu geben.

import 'package:flutter/material.dart';
void main() {
    runApp(new Center(
        child: new Text('Hello World!')
    ));
}

Nach Dart 2.0 kann neu weggelassen werden.

import 'package:flutter/material.dart';
void main() {
    runApp(Center(
        child: Text('Hello World!')
    ));
}

Beim Schreiben einer App ist es üblich, eigenständige Komponenten zu erstellen, die entweder ein zustandsloses StatelessWidget oder ein zustandsbehaftetes StatefulWidget erben, je nachdem, ob Ihre Komponenten den Zustand verwalten müssen. Die Hauptaufgabe einer Komponente besteht darin, eine Build-Funktion zu implementieren, die andere Low-Level-Komponenten verwendet, um sich selbst zu erstellen. Das Flutter-Framework erstellt diese Komponenten der Reihe nach und gelangt schließlich zu der Komponente, die das zugrunde liegende Renderobjekt darstellt – das RenderObject, das die Geometrie der Komponente berechnet und beschreibt.
Bildbeschreibung hier einfügen

Rahmen

Werfen wir einen Blick auf das Flutter-Framework-Diagramm, das offiziell von Flutter bereitgestellt wird, wie in Abbildung 1-1 gezeigt:

Bild 1-1

Kurz gesagt lässt sich Flutter von oben nach unten in drei Schichten unterteilen: die Framework-Schicht, die Engine-Schicht und die Embedded-Schicht, die wir im Folgenden separat vorstellen:

1. Gerüstschicht

Flutter Framework, die Gerüstschicht. Dies ist ein reines Dart-SDK, das eine Reihe grundlegender Bibliotheken implementiert. Lassen Sie uns von unten nach oben kurz vorstellen:

Die unteren beiden Ebenen (Grundlage und Animation, Malerei, Gesten) werden in einigen Google-Videos zu einer Dart-UI-Ebene zusammengeführt, die dem dart:ui-Paket in Flutter entspricht, der zugrunde liegenden UI-Bibliothek, die von Flutter Engine bereitgestellt wird und Animation, Gesture bereitstellt und Zeichenfähigkeit.
Der Rendering-Layer, der Rendering-Layer, ist ein abstrakter Layout-Layer, der von dem Dart-UI-Layer abhängt. Der Rendering-Layer erstellt einen Rendering-Baum, der aus renderbaren Objekten besteht. Wenn diese Objekte dynamisch aktualisiert werden, wird der Rendering-Baum herausfinden, was sich geändert hat, Aktualisieren Sie dann das Rendering. Der Rendering-Layer stellt den zentralen Teil des Flutter-Framework-Layers dar. Zusätzlich zur Bestimmung der Position und Größe jedes Rendering-Objekts führt er auch eine Koordinatentransformation und Zeichnung durch (Aufruf des zugrunde liegenden dart:ui).
Die Ebene „Widgets“ ist eine Reihe von Basiskomponentenbibliotheken, die von Flutter bereitgestellt werden. Zusätzlich zu der Basiskomponentenbibliothek bietet Flutter auch zwei Bibliotheken für visuelle Stilkomponenten, Material und Cupertino, die die Material- bzw. iOS-Designspezifikationen implementieren.

Das Flutter-Framework ist relativ klein, da einige der übergeordneten Funktionen, die Entwickler möglicherweise verwenden, in verschiedene Pakete aufgeteilt wurden, die unter Verwendung der Kernbibliotheken von Dart und Flutter implementiert wurden, die Plattform-Plugins wie camera(opens new window)und webview (opens new window)und plattformunabhängige Funktionen, z animations(opens new window).

Wenn wir Flutter entwickeln, haben wir Flutter Frameworkes .

2. Motorschicht

Motor, die Motorebene. Es besteht kein Zweifel, dass es der Kern von Flutter ist.Diese Schicht ist hauptsächlich in C++ implementiert, einschließlich Skia-Engine, Dart-Laufzeit, Textsatz-Engine usw. Wenn der Code die dart:ui-Bibliothek aufruft, geht der Aufruf schließlich zur Engine-Schicht und realisiert dann die eigentliche Zeichnung und Anzeige.

3. Einbettungsschicht

Embedder, die Einbettungsschicht. Das endgültige Rendering und die Interaktion von Flutter hängt von der Betriebssystem-API der Plattform ab, auf der es sich befindet, und die Einbettungsschicht "installiert" hauptsächlich die Flutter-Engine auf einer bestimmten Plattform. Die Einbettungsschicht ist in der Sprache der aktuellen Plattform geschrieben, z. B. Java und C++ für Android, Objective-C und Objective-C++ für iOS und macOS sowie C++ für Windows und Linux. Flutter-Code kann modular durch die Einbettungsschicht in bestehende Anwendungen integriert oder als Hauptteil der Anwendung verwendet werden. Flutter selbst enthält die Einbettungsschicht jeder gängigen Plattform. Wenn Flutter in Zukunft eine neue Plattform unterstützen möchte, muss es eine Einbettungsschicht für die neue Plattform schreiben.