FlutterBoost 的具体使用
FlutterBoost
是阿里巴巴开源的一个 Flutter 混合栈解决方案,专注于解决 Flutter 和原生(Android/iOS)之间的页面跳转、通信和生命周期管理问题。它特别适用于需要在原生项目中集成 Flutter 的场景,尤其是需要频繁在原生页面和 Flutter 页面之间切换的复杂业务场景。
一、FlutterBoost 的核心原理
1. 单引擎模式
FlutterBoost 的核心思想是 单引擎模式(Single Flutter Engine)。在传统的混合开发中,每次打开一个 Flutter 页面都会创建一个新的 Flutter 引擎,这会导致性能开销大、内存占用高等问题。
FlutterBoost 通过复用单个 Flutter 引擎,避免了频繁创建和销毁引擎的开销,从而提升性能和用户体验。
- 单引擎的好处 :
- 减少内存占用。
- 提高页面切换速度。
- 保持 Flutter 页面之间的状态(如全局变量、路由栈等)。
2. 混合栈导航
FlutterBoost 将原生页面和 Flutter 页面统一管理,提供了一个混合栈导航机制。通过这个机制,开发者可以像管理普通原生页面一样管理 Flutter 页面。
-
原生页面跳转到 Flutter 页面 :
FlutterBoost 提供了一个路由机制,原生页面可以通过路由直接跳转到 Flutter 页面。
-
Flutter 页面跳转到原生页面 :
FlutterBoost 提供了一个
BoostNavigator
,可以在 Flutter 页面中调用原生页面。
3. 页面生命周期管理
FlutterBoost 提供了页面生命周期的回调机制,开发者可以监听页面的显示、隐藏等状态,方便管理页面状态。
- 页面生命周期事件 :
onPageShow
:页面显示时触发。onPageHide
:页面隐藏时触发。
4. 路由管理
FlutterBoost 提供了一个统一的路由管理机制,开发者可以在原生和 Flutter 中注册路由,并通过路由名称跳转页面。
二、FlutterBoost 的具体使用
1. 安装 FlutterBoost
1.1 添加依赖
在 Flutter 项目的 pubspec.yaml
文件中添加 flutter_boost
依赖:
yaml
dependencies:
flutter:
sdk: flutter
flutter_boost:
git:
url: 'https://github.com/alibaba/flutter_boost.git'
ref: 'v3.0-release' # 使用最新稳定版本
然后运行以下命令安装依赖:
bash
flutter pub get
2. 配置原生项目
2.1 Android 配置
-
修改
MainActivity
在
android/app/src/main/java/your/package/MainActivity.java
中,将MainActivity
修改为继承自BoostFlutterActivity
:javaimport com.idlefish.flutterboost.containers.BoostFlutterActivity; public class MainActivity extends BoostFlutterActivity { }
-
初始化 FlutterBoost
在
android/app/src/main/java/your/package/Application.java
中,初始化 FlutterBoost:javaimport com.idlefish.flutterboost.FlutterBoost; import com.idlefish.flutterboost.interfaces.INativeRouter; public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); INativeRouter router = (context, url, urlParams, requestCode, exts) -> { Intent intent = new Intent(context, FlutterBoostActivity.class); intent.putExtra("url", url); intent.putExtra("params", urlParams); context.startActivity(intent); }; FlutterBoost.instance().setup(this, router, engine -> { // 注册自定义插件 }); } }
2.2 iOS 配置
-
修改
AppDelegate
在
ios/Runner/AppDelegate.m
中,初始化 FlutterBoost:objective-c#import <FlutterBoost/FlutterBoost.h> @interface AppDelegate () <FlutterBoostDelegate> @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { FlutterBoostSetup(self, ^(id engine) { // 注册自定义插件 }); return YES; } @end
-
配置路由
在
AppDelegate
中实现FlutterBoostDelegate
的pushFlutterRoute
方法:objective-c- (void)pushFlutterRoute:(NSString *)pageName arguments:(NSDictionary *)arguments { FlutterViewController *vc = [[FlutterViewController alloc] init]; vc.modalPresentationStyle = UIModalPresentationFullScreen; [self.window.rootViewController presentViewController:vc animated:YES completion:nil]; }
3. 在 Flutter 中使用 FlutterBoost
3.1 初始化 FlutterBoost
在 Flutter 项目的入口文件(如 main.dart
)中初始化 FlutterBoost:
dart
import 'package:flutter_boost/flutter_boost.dart';
void main() {
FlutterBoost.singleton.registerPageBuilders({
'flutterPage': (pageName, params, _) => FlutterPage(params: params),
});
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
builder: FlutterBoost.init(),
home: Container(), // 初始页面可以为空
);
}
}
3.2 创建 Flutter 页面
创建一个 Flutter 页面,例如:
dart
import 'package:flutter/material.dart';
class FlutterPage extends StatelessWidget {
final Map<String, dynamic> params;
FlutterPage({required this.params});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Flutter Page')),
body: Center(
child: Text('This is a Flutter page with params: $params'),
),
);
}
}
3.3 跳转页面
-
从原生跳转到 Flutter 页面 :
在原生代码中调用 FlutterBoost 提供的路由方法。例如:
javaFlutterBoost.instance().open("flutterPage", urlParams);
-
从 Flutter 跳转到原生页面 :
在 Flutter 中调用
BoostNavigator
:dartBoostNavigator.instance.push("nativePage", arguments: {"key": "value"});
4. 页面生命周期管理
FlutterBoost 提供了页面生命周期的回调,方便开发者管理页面状态。例如:
dart
class FlutterPage extends StatefulWidget {
@override
_FlutterPageState createState() => _FlutterPageState();
}
class _FlutterPageState extends State<FlutterPage> with PageVisibilityObserver {
@override
void onPageShow() {
print("FlutterPage is visible");
}
@override
void onPageHide() {
print("FlutterPage is hidden");
}
@override
void initState() {
super.initState();
PageVisibilityBinding.instance.addObserver(this, ModalRoute.of(context)!);
}
@override
void dispose() {
PageVisibilityBinding.instance.removeObserver(this);
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Flutter Page')),
body: Center(child: Text('Flutter Page Content')),
);
}
}
三、总结
FlutterBoost 的优点
- 高性能:通过单引擎模式复用 Flutter 引擎,减少内存占用和性能开销。
- 灵活性:支持原生和 Flutter 页面之间的无缝跳转。
- 易用性:提供统一的路由和生命周期管理,简化开发流程。
适用场景
- 需要在现有原生项目中集成 Flutter。
- 需要频繁在原生页面和 Flutter 页面之间切换。
- 需要保持 Flutter 页面状态的复杂业务场景。
如果你有更多问题,欢迎随时提问! 😊