Continúe con el último capítulo para crear un entorno de desarrollo.Este capítulo aprende sobre la administración de enrutamiento, paquetes y recursos en Flutter.
1. Gestión de ruta
La ruta en Flutter se llama ruta, que se puede entender como la actividad en Android. La gestión de ruta se refiere a saltos, transferencias de valor y datos de retorno entre rutas. Controlado principalmente por Navigator, Navigator es un componente de administración de enrutamiento, que proporciona métodos para abrir y salir de las páginas de enrutamiento. Navigator gestiona la colección de enrutamiento activa a través de una pila. Por lo general, la página que se muestra en la pantalla actual es la ruta en la parte superior de la pila. Navigator proporciona una serie de métodos para administrar la pila de enrutamiento, aquí solo presentamos los dos métodos más utilizados:
Empuje futuro (contexto BuildContext, ruta de ruta)
coloca la ruta dada en la pila (es decir, abre una nueva página), el valor de retorno es un objeto Futuro, que se utiliza para recibir los datos de retorno cuando la nueva ruta se saca de la pila (es decir, cerrada).
bool pop (contexto BuildContext, [resultado])
enruta la parte superior de la pila fuera de la pila, y el resultado son los datos devueltos a la página anterior cuando se cierra la página.
1.1 Salto de ruta
Por ejemplo, queremos saltar a una ruta llamada Nueva ruta, la escritura básica es así:
NavigatorState navigatorState = Navigator.of(context);
prefix0.MaterialPageRoute materialPageRoute = new MaterialPageRoute(builder: (context){return new NewRoute();});
navigatorState.push(materialPageRoute);
//这段代码和下面的Android中的启动一个Activity很像
Intent intent = new Intent();
intent.setClass(this,MainActivity.class);
startActivity(intent);
Veamos la diferencia entre taquigrafía:
Navigator.of(context)
.push(new MaterialPageRoute(builder: (context) {
return new NewRoute();
}));
----------------------------------------------------------------
startActivity(new Intent(this,MainActivity.class));
Pero todavía es muy problemático escribir de esta manera. También hay una forma empaquetada de comenzar una actividad en Android. Mira el código empaquetado:
ActivityUtils.startActivity(MainActivity.class);
这样来说一行代码就能用普通方式启动一个activity。
Entonces, existe una forma tan simple de comenzar en Flutter, que se denomina enrutamiento. La llamada ruta con nombre es darle primero un nombre a la ruta. Cuando queremos comenzar la ruta, podemos comenzar la ruta en función de este nombre. Aquí se explica cómo implementar el código:
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.orange,
),
//注册路由表
routes: {
"路由名称": (context) => new NewRoute(),
--省略其他路由注册
},
);
Las rutas en el código anterior son en realidad un mapa, la clave es el nombre de la ruta y es una cadena; el valor es una función de devolución de llamada del generador, que se utiliza para generar el widget de ruta correspondiente. Cuando abrimos una nueva ruta por el nombre de la ruta, la aplicación encontrará la función de devolución de llamada WidgetBuilder correspondiente en la tabla de enrutamiento de acuerdo con el nombre de la ruta, y luego llamará a la función de devolución de llamada para generar el widget de ruta y regresar. Entonces, veamos qué fácil es comenzar una ruta con nombre:
Navigator.pushNamed(context, “路由名称”);
Una línea de código es suficiente, es muy simple.
1.2 Enrutamiento por valor
¿Cómo pasar datos al iniciar una ruta?
Mira la función oficial:
static Future<T> pushNamed<T extends Object>(
BuildContext context,
String routeName, {
Object arguments,
}) {
return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}
De hecho, es la función pushNamed anterior. El primer parámetro es el contexto del contexto, el segundo parámetro es el nombre de la ruta a iniciar, y el tercer parámetro son los datos a pasar. Vea cómo lograrlo:
Navigator.pushNamed(context, "路由名称",arguments: "要传递的数据");
Es agregar un parámetro, este parámetro puede ser una cadena puede ser int, siempre que sea una subclase de objeto. ¿Cómo recibe la ruta iniciada los datos pasados? Vea el código:
class 路由名称 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 下面这行代码就是接收传递数据的代码。
var data = ModalRoute.of(context).settings.arguments;
--省略其他代码
}
1.3 Devolución de datos de enrutamiento
Si comienza una ruta y recibe los datos que se devuelven cuando la ruta está cerrada, cómo lograrlo. En este momento, utilicé la función pop con la que comencé.
Mira el código oficial del sitio web:
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
return Navigator.of(context).pop<T>(result);
}
Esta función es eliminar la ruta en la parte superior de la pila, es decir, la página actual, a la pila. El primer parámetro es el contexto y el segundo parámetro son los datos que se devolverán. Mire la implementación específica:
RaisedButton(
onPressed: () => Navigator.pop(context, "NewRoute返回的数据"),
child: Text("返回"),
)
De esta manera, la ruta se cerrará y se devolverán los datos. Cómo recibir los datos devueltos también es muy simple. Simplemente cambie el código que comenzó antes, vea el código:
onPressed: () async {
var pushNamed = await Navigator.pushNamed(
context, StringsConst.ROUTE_NEW,
arguments: "来自main的数据");
print("NewRoute返回的数据：$pushNamed");
}
Aquí async / await se usa para esperar a que la página se cierre, y la función pushNamed devolverá un var, que son los datos devueltos por la ruta.
Nota: Este método solo devolverá datos cuando haga clic en el botón de retorno que agregó. Al hacer clic en el retorno en la barra de aplicaciones o en el botón de retorno que viene con el teléfono, se devuelve la ruta anterior. No se pueden recibir datos. Cómo lograrlo sin importar cómo regresar Se devuelven los datos, que no se mencionan en el libro. Veré si hay otra forma más adelante.
1.4 Iniciar una nueva ruta y cerrar la ruta actual
Si desea comenzar una nueva ruta y cerrar la ruta actual, use cualquiera de las siguientes tres funciones:
Navigator.of(context).pushReplacementNamed("路由名称");
--------------------------------------------------------------------------------------
Navigator.of(context).pushReplacement(
new MaterialPageRoute(builder: (context) {
return new NewRoute();
}));
---------------------------------------------------------------------------------------
Navigator.popAndPushNamed(context, "路由名称");
1.5 Iniciar una nueva ruta y cerrar todas las rutas anteriores
Existe otra situación, es decir, cuando el usuario cierra la sesión, la ruta para volver a iniciar sesión, por lo que debemos cerrar todas las rutas existentes e iniciar la ruta de inicio de sesión, luego usar la siguiente función:
Future<T> pushNamedAndRemoveUntil<T extends Object>(
String newRouteName,
RoutePredicate predicate, {
Object arguments,
}) {
return pushAndRemoveUntil<T>(_routeNamed<T>(newRouteName, arguments: arguments), predicate);
}
El primer parámetro: el nombre de la ruta para comenzar.
El segundo parámetro: no está claro por el momento.
El tercer parámetro: los datos a pasar.
Mire el código de implementación específico:
Navigator.of(context).pushNamedAndRemoveUntil("路由名称", (Route<dynamic> route) => false);
Otra función es cerrar todas las rutas:
void popUntil(RoutePredicate predicate) {
while (!predicate(_history.last))
pop();
}
2 gestión de paquetes
Los paquetes en realidad se refieren a algunas bibliotecas públicas o SDK. Si queremos usar estos paquetes públicos, necesitamos tener una administración unificada de estos paquetes. Antes de introducir la administración de paquetes, primero introduzca el archivo pubspec.yaml en Flutter. Este archivo es el archivo de configuración del proyecto para administrar y configurar el proyecto y el paquete. Vea lo que significa el código predeterminado en este archivo:
# 应用或包名称。
name: first_flutter_app
# 应用或包简介、描述。
description: A new Flutter application.
# 应用或包的版本号。
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
# 应用或包依赖的其它包或插件。
dependencies:
flutter:
sdk: flutter
# 类iOS风格图标
cupertino_icons: ^0.1.2
# 常用英文单词以及一些实用功能
english_words: ^3.1.5
# 开发环境依赖的工具包（而不是flutter应用本身依赖的包）。
dev_dependencies:
flutter_test:
sdk: flutter
# flutter相关的配置选项。
flutter:
uses-material-design: true
Las anteriores son algunas introducciones simples, entre ellas: english_words: ^ 3.1.5. Es un paquete público que utilizamos.
Todos estos paquetes se gestionan en pub.dev , aquí podemos encontrar los paquetes que necesitamos.
Por ejemplo, english_words:
Example es un ejemplo de cómo instalar.
Paso 1: Agregue english_words: ^ 3.1.5 a pubspec.yaml.
Paso 2: haz clic en pub en la esquina superior derecha.
El tercer paso: guíe el paquete en la ruta utilizada: importe 'paquete: english_words / english_words.dart'.
3 Gestión de recursos
3.1 Adaptación de la imagen
La gestión de recursos se refiere a la gestión de algunos iconos, imágenes, fuentes, html, etc. Aquí hay una breve introducción a la gestión de iconos, y el resto se utilizará más adelante para aprender cómo usarlos.
La gestión de recursos de imagen está registrada en pubspec.yaml, Flutter elegirá cargar diferentes imágenes de acuerdo con la densidad de píxeles de la pantalla del dispositivo, cómo administrar imágenes de diferentes tamaños, el sistema elegirá la imagen correcta, creará un activo diferente La carpeta de ampliación se usa para almacenar imágenes de los tamaños correspondientes, como se muestra en la figura:
luego regístrese en pubspec.yaml:
luego puede usarlo, no necesita escribir 2x \ 3x, el sistema elegirá automáticamente la imagen correspondiente de acuerdo con la resolución:
Image.asset(
"assets/wxr.jpg",
width: 200,
height: 200,
fit: BoxFit.cover,
),
3.2 Modificar el ícono de la aplicación y la página de inicio
Android APP modificado iconos necesitan para reemplazar la cifra archivo de icono
iOS APP modificado necesidades icono del archivo para ser reemplazados en la siguiente figura:
Android modificar la página de inicio tiene que modificar el archivo en la siguiente figura:
IOS modificar la página de inicio tiene que modificar el archivo en la siguiente figura:
