écrire devant
Aujourd'hui, les gens veulent que les applications sur leurs téléphones aient de belles conceptions, des animations fluides et d'excellentes fonctionnalités. Pour ce faire, les développeurs doivent pousser les nouvelles fonctionnalités plus rapidement sans compromettre la qualité et les performances. La recherche et le développement, c'est le cœur de Flutter.
Annuaire d'articles
Qu'est-ce que Flutter ?
- Introduction au flottement
FlutterIl s'agit de la boîte à outils open source de construction d'interface utilisateur (UI) de Google, qui aide les développeurs à créer efficacement de belles applications multiplateformes via un ensemble de bases de code, prenant en charge les plates-formes mobiles, Web, de bureau et intégrées. Flutter est open source, gratuit et dispose d'un protocole open source lâche, ce qui le rend adapté aux projets commerciaux. Flutter a lancé une version stable 2.0.
Installation de Flutter
Environnement d'installation
exporter PUB_HOSTED_URL=https://pub.flutter-io.cn
exporter FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
## 检测环境是否安装成功
$flutter doctor
## 开发工具
android studio
visual studio code
exemple de code
Nous allons utiliser l'exemple le plus simple Hello World!pour vous donner un exemple"
import 'package:flutter/material.dart';
void main() {
runApp(new Center(
child: new Text('Hello World!')
));
}
Après Dart 2.0, new peut être omis.
import 'package:flutter/material.dart';
void main() {
runApp(Center(
child: Text('Hello World!')
));
}
Lors de l'écriture d'une application, il est courant de créer des composants autonomes, héritant d'un StatelessWidget sans état ou d'un StatefulWidget avec état, selon que vos composants doivent gérer l'état. Le travail principal d'un composant est d'implémenter une fonction de construction, qui utilise d'autres composants de bas niveau pour se construire. Le framework Flutter construira ces composants à leur tour, pour finalement arriver au composant qui représente l'objet de rendu sous-jacent - le RenderObject, qui calcule et décrit la géométrie du composant.
Cadre
Jetons un coup d'œil au diagramme du framework Flutter officiellement fourni par Flutter, comme illustré à la figure 1-1 :
En bref, Flutter peut être divisé en trois couches de haut en bas : la couche cadre, la couche moteur et la couche embarquée. Nous les présenterons séparément ci-dessous :
1. Couche cadre
Flutter Framework, la couche cadre. Il s'agit d'un SDK Dart pur qui implémente un ensemble de bibliothèques de base. De bas en haut, introduisons brièvement :
-
Les deux couches inférieures (Fondation et Animation, Peinture, Gestes) sont fusionnées dans une couche d'interface utilisateur de fléchettes dans certaines vidéos Google, correspondant au package dart:ui dans Flutter, qui est la bibliothèque d'interface utilisateur sous-jacente exposée par Flutter Engine, fournissant une animation, Gesture et capacité de dessin.
-
La couche de rendu, la couche de rendu, est une couche de mise en page abstraite qui dépend de la couche d'interface utilisateur Dart. La couche de rendu construira un arbre de rendu composé d'objets pouvant être rendus. Lorsque ces objets sont mis à jour dynamiquement, l'arbre de rendu découvrira ce qui a changé, puis mettez à jour le rendu. La couche de rendu peut être considérée comme la partie centrale de la couche de structure Flutter. En plus de déterminer la position et la taille de chaque objet de rendu, il effectue également la transformation et le dessin des coordonnées (en appelant le sous-jacent dart:ui).
-
La couche Widgets est un ensemble de bibliothèques de composants de base fournies par Flutter. En plus de la bibliothèque de composants de base, Flutter fournit également deux bibliothèques de composants de style visuel, Material et Cupertino, qui implémentent respectivement les spécifications de conception Material et iOS.
Le framework Flutter est relativement petit, car certaines des fonctionnalités de niveau supérieur que les développeurs peuvent utiliser ont été divisées en différents packages, implémentés à l'aide des bibliothèques principales de Dart et Flutter, qui incluent des plugins de plate-forme tels que camera(opens new window)et webview (opens new window), et des fonctions indépendantes de la plate-forme, par exemple animations(opens new window).
Lorsque nous développons Flutter, nous Flutter Frameworktraitons .
2. Couche moteur
Moteur, la couche moteur. Il ne fait aucun doute qu'il s'agit du cœur de Flutter.Cette couche est principalement implémentée en C++, y compris le moteur Skia, le runtime Dart, le moteur de composition de texte, etc. Lorsque le code appelle la bibliothèque dart:ui, l'appel ira finalement à la couche moteur, puis réalisera le dessin et l'affichage réels.
3. Couche d'intégration
Embedder, la couche d'intégration. Le rendu final et l'interaction de Flutter dépendent de l'API du système d'exploitation de la plate-forme sur laquelle il se trouve, et la couche d'intégration "installe" principalement le moteur Flutter sur une plate-forme spécifique. La couche d'intégration est écrite dans le langage de la plate-forme actuelle, comme Java et C++ pour Android, Objective-C et Objective-C++ pour iOS et macOS, et C++ pour Windows et Linux. Le code Flutter peut être intégré dans des applications existantes de manière modulaire via la couche d'intégration, ou il peut être utilisé comme corps principal de l'application. Flutter lui-même inclut la couche d'intégration de chaque plate-forme commune. Si Flutter souhaite prendre en charge une nouvelle plate-forme à l'avenir, il doit écrire une couche d'intégration pour la nouvelle plate-forme.
