escribir delante

Hoy en día, las personas quieren que las aplicaciones en sus teléfonos tengan diseños hermosos, animaciones fluidas y excelentes funciones. Para hacer esto, los desarrolladores deben impulsar nuevas funciones más rápido sin comprometer la calidad y el rendimiento. Investigación y desarrollo, este es el núcleo de Flutter.

inserte la descripción de la imagen aquí

¿Qué es Flutter?

Introducción a Flutter

FlutterEs el conjunto de herramientas de interfaz de usuario (UI) de creación de código abierto de Google, que ayuda a los desarrolladores a crear de manera eficiente hermosas aplicaciones multiplataforma a través de un conjunto de bases de código, compatibles con plataformas móviles, web, de escritorio e integradas. Flutter es de código abierto, gratuito y tiene un protocolo de código abierto flexible, lo que lo hace adecuado para proyectos comerciales. Flutter ha lanzado una versión estable 2.0.
inserte la descripción de la imagen aquí

Instalación de aleteo

Entorno de instalación

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

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

Código de muestra

Usaremos el Hello World!ejemplo más simple para darle un ejemplo"

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

Después de Dart 2.0, se puede omitir new.

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

Al escribir una aplicación, es común crear componentes independientes, heredando un StatelessWidget sin estado o un StatefulWidget con estado, dependiendo de si sus componentes necesitan administrar el estado. El trabajo principal de un componente es implementar una función de construcción, que utiliza otros componentes de bajo nivel para construirse a sí mismo. El marco Flutter construirá estos componentes a su vez, llegando finalmente al componente que representa el objeto de representación subyacente: el RenderObject, que calcula y describe la geometría del componente.
inserte la descripción de la imagen aquí

Estructura

Echemos un vistazo al diagrama del marco Flutter proporcionado oficialmente por Flutter, como se muestra en la Figura 1-1:

Imagen 1-1

En resumen, Flutter se puede dividir en tres capas de arriba a abajo: la capa del marco, la capa del motor y la capa incrustada. Las presentaremos por separado a continuación:

1. Capa de marco

Flutter Framework, la capa del marco. Este es un SDK de Dart puro que implementa un conjunto de bibliotecas básicas. De abajo hacia arriba, presentemos brevemente:

Las dos capas inferiores (Fundación y Animación, Pintura, Gestos) se fusionan en una capa de interfaz de usuario de dardo en algunos videos de Google, lo que corresponde al paquete dart:ui en Flutter, que es la biblioteca de interfaz de usuario subyacente expuesta por Flutter Engine, que proporciona animación, Gesto y capacidad de dibujo.
La capa de renderizado, la capa de renderizado, es una capa de diseño abstracto que depende de la capa de interfaz de usuario de Dart. La capa de renderizado creará un árbol de renderizado compuesto por objetos renderizables. Cuando estos objetos se actualicen dinámicamente, el árbol de renderizado descubrirá qué cambió, luego actualice la representación. Se puede decir que la capa de representación es la parte central de la capa del marco Flutter. Además de determinar la posición y el tamaño de cada objeto de representación, también realiza la transformación de coordenadas y el dibujo (llamando al dart:ui subyacente).
La capa Widgets es un conjunto de bibliotecas de componentes básicos proporcionados por Flutter Además de la biblioteca de componentes básicos, Flutter también proporciona dos bibliotecas de componentes de estilo visual, Material y Cupertino, que implementan las especificaciones de diseño de Material e iOS respectivamente.

El marco de Flutter es relativamente pequeño, ya que parte de la funcionalidad de nivel superior que los desarrolladores pueden usar se ha dividido en diferentes paquetes, implementados usando las bibliotecas principales de Dart y Flutter, que incluyen complementos de plataforma como camera(opens new window)y webview (opens new window)funciones independientes de la plataforma, por ejemplo animations(opens new window).

Cuando desarrollamos Flutter, la mayor parte del tiempo Flutter Frameworktratamos .

2. Capa motor

Motor, la capa del motor. No hay duda de que es el núcleo de Flutter Esta capa se implementa principalmente en C ++, incluido el motor Skia, el tiempo de ejecución de Dart, el motor de composición de texto, etc. Cuando el código llama a la biblioteca dart:ui, la llamada eventualmente irá a la capa del motor y luego realizará el dibujo y la visualización reales.

3. Capa de incrustación

Embedder, la capa de incrustación. La representación final y la interacción de Flutter dependen de la API del sistema operativo de la plataforma en la que se encuentra, y la capa de incrustación "instala" principalmente el motor de Flutter en una plataforma específica. La capa de incrustación está escrita en el lenguaje de la plataforma actual, como Java y C++ para Android, Objective-C y Objective-C++ para iOS y macOS, y C++ para Windows y Linux. El código de Flutter se puede integrar en las aplicaciones existentes de forma modular a través de la capa de incrustación, o se puede utilizar como el cuerpo principal de la aplicación. Flutter en sí mismo incluye la capa de incrustación de cada plataforma común. Si Flutter quiere admitir una nueva plataforma en el futuro, debe escribir una capa de incrustación para la nueva plataforma.