:一:Flutter
和原生之间
进行通信可以通过以下几种方式:
- 1,
Flutter MethodChannel
:Flutter提供了MethodChannel来实现Flutter与原生平台的双向方法调用。我们可以在Flutter中创建一个MethodChannel对象,并定义方法的名称和参数。然后在原生代码中注册相应的方法处理程序,当Flutter调用该方法时,原生代码会执行相应的操作,并返回结果给Flutter。
- 2,
Flutter EventChannel
:EventChannel用于在Flutter和原生之间传递事件流。我们可以在Flutter中创建一个EventChannel对象,并定义事件的名称和参数。然后在原生代码中监听该事件,并在特定条件下发送事件给Flutter。
- 3,
PlatformView
:如果你需要在Flutter中使用原生控件或视图,可以使用PlatformView。它允许我们在Flutter中嵌入原生视图,并与其进行交互。
- 4,
Flutter Plugin
:如果需要更复杂的功能或者想要封装一些原生功能为Flutter插件,可以创建一个Flutter插件。Flutter插件允许我们在Flutter和原生之间建立更高级的通信机制,并提供一致的API给Flutter开发者使用。
- 5,
FlutterBoost
是基于Flutter
的Boost库
,其实现原理主要包括以下几个方面:
FlutterBoost
说明:
- 引擎复用:FlutterBoost通过复用单个Flutter引擎实例,使得在原生和Flutter之间切换页面时,不需要每次都创建新的引擎实例。这大大提高了页面切换的流畅性和性能。
- 页面栈管理:FlutterBoost内部维护了一个页面栈,用于管理所有的Flutter页面和原生页面。当进行页面跳转时,它会根据页面栈的状态来决定是显示Flutter页面还是原生页面。
- 生命周期同步:FlutterBoost会监听原生页面的生命周期事件,并将这些事件同步到对应的Flutter页面上。这样,即使是在原生页面和Flutter页面之间切换,Flutter页面也能正确地响应各种生命周期事件。
- 消息通道:FlutterBoost使用了Flutter的平台通道(Platform Channels)机制,以实现原生和Flutter之间的数据通信。这使得在原生和Flutter页面之间传递参数、共享数据变得可能。
- 路由管理:FlutterBoost还提供了一套统一的路由管理机制,开发者只需要简单地注册路由,就可以方便地在原生和Flutter页面之间进行跳转。
FlutterBoost
的实现原理比较复杂,涉及到很多Flutter
的底层机制。上面只是对其实现原理的一个简单概述,如果想要深入了解,建议查阅其源代码和相关文档。接下来主要讲FlutterBoost
。
二:FlutterBoost
的具体使用:
https://github.com/alibaba/flutter_boost
FlutterBoost
的版本
For Flutter SDK 3.0 and above, use 4.0.1+.
For Flutter SDK below 3.0, use v3.0-release.2 or earlier versions.
The null safety versions supporting Flutter SDK 2.5.x are 3.1.0+.
The versions supporting Flutter SDK 3.16.x are 5.0.0+.
The versions supporting HarmonyOS are [4.5.0, 5.0.0).
1,flutter
工程项目里面,集成和使用flutter_boost
。
①flutter
工程项目里面,pubspec.yaml
配置依赖库。
修改配置:
注意: 这里一定要对 environment
进行修改. 不然会因为null safety
的问题报错。
flutter_boost:
git:
url: 'https://github.com/alibaba/flutter_boost.git'
ref: '4.5.11'
修改之后 ,执行
flutter pub get
// 报错的话,也可以执行下这个
flutter pub upgrade
没什么问题报错,就是集成成功了。
②flutter
工程项目里面,配置使用flutter_boost
。
修改main.dart
文件,配置页面路由
import 'package:flutter/material.dart';
import 'package:flutter_project/widget/HomeScreen.dart';
import 'package:flutter_project/widget/Routes.dart';
// 看下面 1,2,3 地方就行了
// 看下面 1,2,3 地方就行了
// 看下面 1,2,3 地方就行了
// 看下面 1,2,3 地方就行了
// 0 导入 flutter_boost
import 'package:flutter_boost/flutter_boost.dart';
void main() {
// 2, 这里初始化新增的CustomFlutterBinding类
CustomFlutterBinding();
runApp(const MyApp());
}
// 1, 新增CustomFlutterBinding类
class CustomFlutterBinding extends WidgetsFlutterBinding
with BoostFlutterBinding {}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
onGenerateRoute: onGenerateRoute);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 3,配置路由
////////////////////////////////////////////////////////////////////////////////
// HomeScreen 就是flutter的自定义的某个控制器页面
static Map<String, FlutterBoostRouteFactory> routerMap = {
'flutterPage_HomeScreen': (settings, uniqueId) {
return PageRouteBuilder<dynamic>(
settings: settings,
pageBuilder: (_, __, ___) => const HomeScreen(
title: "我是flutter页",
parms: {"age": "18", "sex": "女", "adress": "湖北省麻城市金桥大厦尚苑小区53栋301"},
),
);
}
};
Route<dynamic>? routeFactory(RouteSettings settings, String? uniqueId) {
FlutterBoostRouteFactory? func = routerMap[settings.name!];
if (func == null) {
return null;
}
return func(settings, uniqueId);
}
////////////////////////////////////////////////////////////////////////////////
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
child: Text('push新页面 路由带参数'),
onPressed: () {
Navigator.pushNamed(context, "/homeScreen");
},
),
],
),
),
);
}
}
③配置完成,需要执行
flutter run
运行一边flutter
工程,使其生成对应的各端代码,同时也检查是否有报错。
2,原生工程里面,集成和使用flutter_boost
。
①至于podfile
里面的配置,这里不多说了,其实不需要配置和之前,pod
集成flutter
一模一样,不需要做修改。
#pragma mark -- flutter配置1
# platform :ios, '9.0'
platform :ios, '12.0'
# flutter_application_path 是flutter 工程的项目路径
flutter_application_path = '../flutter_project'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
post_install do |installer|
flutter_post_install(installer) if defined?(flutter_post_install)
end
target 'iOSProject' do
#pragma mark -- flutter配置2
use_frameworks!
# 这边引入
install_all_flutter_pods(flutter_application_path)
pod 'MBProgressHUD', '~> 0.9.1'
pod 'Masonry', '~> 1.1.0'
end
执行
pod install
podhelper.rb
脚本会自动把你的plugins
,Flutter.framework
,和 App.framework
集成到你的项目中。
②添加flutter_boost
的Delegate
定义一个FlutterDelegate