Tabla de contenido
prefacio
Flutter puede completar proyectos de forma independiente, pero en el caso de proyectos existentes, la mejor manera es el desarrollo mixto y la transición gradual. De esta manera coexistirán los códigos native y flutter, y lo más importante es cómo native inicia la página de flutter y cómo flutter interactúa con native.
Este artículo toma Android como ejemplo para mostrar cómo introducir flutter en un proyecto existente, iniciar flutter, cómo acelerar el inicio y cómo pasar parámetros.
Introducir Flutter en proyectos existentes
En el proyecto de Android existente, cree un nuevo módulo flutter. Después de crear el módulo, encontrará que depende automáticamente del módulo principal. Eso sí, si usamos este módulo flutter en otros proyectos, este paso no se realizará automáticamente, por lo que primero debemos registrarlo en setting.gradle, de la siguiente manera:
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir,
'flutter_module/.android/include_flutter.groovy'
))
include ':flutter_module'
Luego depende del módulo principal:
implementation project(path: ':flutter')
Esto permite el desarrollo híbrido.
Iniciar la página de aleteo
Después de crear un nuevo módulo flutter, se creará automáticamente una página principal, entonces, ¿cómo abre esta página nativa?
Primero agregue en el manifiesto del módulo principal:
<activity
android:name="io.flutter.embedding.android.FlutterActivity"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
/>
Luego usa el código para abrir la página principal de flutter
startActivity(FlutterActivity.createDefaultIntent(this))
Entonces, ¿cómo abrir otras páginas?
Por ejemplo, creamos una nueva página flutter en segundo lugar:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SecondPage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _SecondPage();
}
}
class _SecondPage extends State<SecondPage>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("test"),
),
body:Text("test")
);
}
}
Luego registre esta página en la aplicación de main.dart:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
routes: {
"second" : (BuildContext context) => SecondPage(), //也可以用其他方式注册
},
);
}
}
De esta forma, se puede usar el siguiente código para abrir esta página en flutter:
Navigator.of(context).pushNamed("second");
En Android, puede usar el siguiente código para abrir la página:
startActivity(FlutterActivity.withNewEngine().initialRoute("second").build(this))
Acelerar inicio
Cuando se abre la página flutter a través del código anterior, aparecerá una pantalla negra y el tiempo no es corto, lo que afecta en gran medida la experiencia. Porque cada vez que se crea un nuevo motor flutter (el interior de la función createDefaultIntent es en realidad withNewEngine().build(launchContext)).
La solución oficial es usar el caché del motor, como agregar caché a la aplicación:
var flutterEngine = FlutterEngine(this)
flutterEngine.dartExecutor.executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
)
FlutterEngineCache.getInstance().put("main", flutterEngine)
Luego cambie el inicio a:
startActivity(FlutterActivity.withCachedEngine("main").build(this))
Pero lo anterior es solo para iniciar la página principal. Si desea iniciar otras páginas, como la segunda, debe continuar agregando caché:
var flutterEngine2 = FlutterEngine(this)
flutterEngine2.navigationChannel.setInitialRoute("second")
flutterEngine2.dartExecutor.executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
)
FlutterEngineCache.getInstance().put("second", flutterEngine2)
Tenga en cuenta que setInitialRoute establece la ruta aquí. Entonces empiezalo:
startActivity(FlutterActivity.withCachedEngine("second").build(this))
Al almacenar en caché el motor, el tiempo de pantalla negra al inicio se acorta mucho y es casi imperceptible (tenga en cuenta que la pantalla puede estar ligeramente negra por primera vez).
Iniciar paso de parámetros
Arriba, abrimos las páginas principal y secundaria sin pasar parámetros, así que si queremos pasar algunos parámetros necesarios para la inicialización, ¿cómo lidiar con eso?
Actualmente, el framework flutter no encapsula la api con parámetros, es decir, el salto nativo a flutter oficialmente no tiene parámetros. Pero nuestra escena actual tiene tal demanda, ¿cómo lidiar con ella?
El funcionario no dio la api correspondiente, por lo que solo podemos encontrar un camino desde la ruta. Primero, cambia la forma de registrar rutas en la App. Lo anterior usa directamente la forma de mapa de rutas, y la reemplazamos con la forma de RouteFactory de onGenerateRoute, de la siguiente manera:
onGenerateRoute: (RouteSettings settings) {
if(settings.name.startsWith("second")){
return MaterialPageRoute(builder: (BuildContext context) {
return SecondPage(settings.name);
});
}
else {
return MaterialPageRoute(builder: (BuildContext context) {
return Scaffold(
body: Center(
child: Text("page not found"),
),
);
});
}
},
El settings.name aquí es la ruta, porque queremos agregar parámetros después de la ruta, para que podamos juzgar qué página es desde el principio.
Nota: En el ejemplo, la URL de la ruta se pasa directamente a la página. De hecho, debe analizarse aquí y pasarse a la página en forma de mapa.
Luego modifique la Segunda página:
class SecondPage extends StatefulWidget{
String url;
SecondPage(String url){
this.url = url;
}
@override
State<StatefulWidget> createState() {
return _SecondPage();
}
}
class _SecondPage extends State<SecondPage>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("test"),
),
body:Text("test:${widget.url}")
);
}
}
No hay análisis aquí, y la URL se muestra directamente, el propósito es pasar los parámetros en su lugar.
Finalmente, use el siguiente código en nativo:
startActivity(FlutterActivity.withNewEngine().initialRoute("second?text=second test").build(this))
Puede pasar parámetros.
Pero esto lleva a otro problema, porque el método de inicio anterior no usa el caché del motor.Si se usa el caché del motor, la ruta debe configurarse de antemano para que pueda colocarse en el caché en Appllication. Pero dado que queremos pasar parámetros, significa que la ruta cambia dinámicamente, por lo que estos dos están en conflicto, ¿de modo que el inicio no se puede acelerar cuando se pasan los parámetros?
Debido a que nuestro paso de parámetros en sí mismo no es un comportamiento oficial de la API, el caché del motor oficial no tiene el soporte correspondiente. Pero este problema no es irresoluble. Por ejemplo, el marco híbrido de flutter abierto por Xianyu, flutter-boost, puede realizar fácilmente parámetros de portabilidad nativos para abrir páginas de flutter. Sin embargo, hay muchas cosas involucradas aquí, la más importante es la forma de interacción entre Flutter y nativo, que se puede ver en mi otro blog "[ Flutter Advanced] Three Ways to Interact with Native "
Resumir
Lo anterior explica brevemente cómo introducir el módulo Flutter e iniciar la página en el proyecto de Android existente. La ventaja de esto es que puede usar Flutter para desarrollar nuevas páginas sin una reconstrucción a gran escala de los proyectos existentes, y hacer una transición gradual a Flutter.
Este artículo trata sobre el proyecto Android, entonces, ¿qué pasa con el proyecto Ios? Consulte
[Desarrollo mixto de Flutter] Introducción de Flutter en proyectos de iOS existentes