Flutter 的优势与缺点
Flutter 作为一个跨平台的移动 UI 框架&＃xff0c;可以快速在 ios 和 android 上构建高质量的原生用户界面。可以说是一套代码做到了多端运行&＃xff0c;我们常说的 Flutter 跨平台&＃xff0c;其实是 UI 跨平台&＃xff0c;编写好了一套 UI 代码&＃xff0c;就可以在 IOS、Android、Web 上呈现出同样的效果&＃xff0c;节省了大量的人力成本&＃xff0c;这也是 Flutter 越来越流行的原因之一。
然而 Flutter 也有它的缺点&＃xff0c;很明显的是它并不能直接调用平台的系统功能&＃xff0c;比如使用蓝牙、相机、GPS、音量、电池等&＃xff0c;因此要在 Flutter 中调用这些能力就必须和原生平台进行通信。
Flutter 架构概览
了解一个框架的全貌&＃xff0c;有助于我们从更高的视角去看待一门新技术&＃xff0c;而避免深陷代码细节&＃xff0c;无法自拔。首先来看一张官方给出的 Flutter 整体架构图&＃xff0c;如下。
官方将 Flutter 框架大致分为了三层&＃xff0c;Framework、Engine、Embedder。下面我将详细讲解一下这三层到底是什么&＃xff0c;在实际开发中承担着怎样的角色。
Dart Framework 层
作为一个 Flutter 开发者&＃xff0c;辛勤的码农&＃xff0c;你每天都在这片土地挥洒着汗水。 你每天使用的各种 UI 组件&＃xff08;Flutter UI 控件已经快接近 400 个了&＃xff09;&＃xff0c;各种 Flutter Package&＃xff0c;Flutter Plugin&＃xff0c;层出不穷的第三方库让你感到头皮发凉。所以我不过多介绍大家都应该懂了吧&＃xff0c;Dart 是最好的语言~
Engine 层
Flutter 引擎&＃xff0c;官方是这样介绍它的。
Flutter 的核心&＃xff0c;主要使用 C&＃43;&＃43; 编写&＃xff0c;提供了 Flutter 应用所需的原语。当需要绘制新一帧的内容时&＃xff0c;引擎将负责对需要合成的场景进行栅格化。它提供了 Flutter 核心 API 的底层实现&＃xff0c;包括图形&＃xff08;通过
Skia&＃xff09;、文本布局、文件及网络 IO、辅助功能支持、插件架构和 Dart 运行环境及编译环境的工具链。
我觉得官方描述得已经很详细了&＃xff0c;总结一下就是&＃xff1a;它负责 Flutter UI 的渲染以及宿主的交互&＃xff0c;接入了 Engine 的就叫做宿主&＃xff0c;如 Android 品台接入了 Flutter Engine&＃xff0c;那么宿主就是 Android 平台。
Flutter Engine 是开源的&＃xff0c;在 github 上可以找到&＃xff0c;传送门 github.com/flutter/eng… 直观感受下这个 Engine 项目都是用哪些语言编写的&＃xff0c;如下图。其实主要语言还是 C&＃43;&＃43;&＃xff0c;其中 Dart 很多是测试代码。
Embedder 平台嵌入层
官方是这样介绍它的。
平台嵌入层是用于呈现所有 Flutter 内容的原生系统应用&＃xff0c;它充当着宿主操作系统和 Flutter 之间的粘合剂的角色。当你启动一个 Flutter 应用时&＃xff0c;嵌入层会提供一个入口&＃xff0c;初始化 Flutter 引擎&＃xff0c;获取 UI 和栅格化线程&＃xff0c;创建 Flutter 可以写入的纹理。嵌入层同时负责管理应用的生命周期&＃xff0c;包括输入的操作&＃xff08;例如鼠标、键盘和触控&＃xff09;、窗口大小的变化、线程管理和平台消息的传递。 Flutter 拥有 Android、iOS、Windows、macOS 和 Linux 的平台嵌入层&＃xff0c;当然&＃xff0c;开发者可以创建自定义的嵌入层
我觉得官方这段解释得同样很好&＃xff0c;我几乎无法有更好的解释~但我还是要谈谈自己的见解&＃xff0c;因为从程序员的角度看代码比谈概念更具体。Embedder 层的代码同样包含于 Engine 项目中&＃xff0c;如下图。
Embedder 层代码整体可以分为两大块
- 各平台的 Embedder 层代码&＃xff0c;用于接入 Flutter Engine。如 Android 平台 Embedder 是用 Java 写的&＃xff0c;当然还有与其对应的 C&＃43;&＃43; 代码&＃xff0c;方便 Java 调用 JNI 来和 Flutter Engine 之间通信。自然 IOS 就是 Object-C 了。
- 共用的 Embedder 层代码&＃xff0c;C&＃43;&＃43; 编写&＃xff0c; 用于平台消息传递等功能。
了解了 Flutter 架构&＃xff0c;下面开始进入实战环节。
Flutter 如何与特定平台进行通信
本小节再次强调“特定平台”这个概念&＃xff0c;因为 Flutter 它只是一个 UI 跨平台的框架&＃xff0c;读者需要牢记于心&＃xff0c;凡是涉及到平台相关的功能&＃xff0c;还是必须要由原生平台来实现。本文以 Flutter 在 Android 平台上的应用&＃xff0c;来讲解 Flutter 该怎样和 Android 原生进行通信。
Flutter 与特定平台进行通信的流程大致是这样的。
- Flutter 通过类似 JNI 方法调用的方式与 Flutter Engine 通信
- Flutter Engine 层调用特定平台的 Embedder 层代码
- 特定平台接收到来自 Embedder 层的消息&＃xff0c;进行业务处理
反之&＃xff0c;特定平台想和 Flutter 进行通信&＃xff0c;过程刚好和上面相反。
使用 MethodChannel 通道进行方法调用
Flutter 与特定平台进行通信需要通过“平台通道”&＃xff0c;细心的读者可能已经发现&＃xff0c;平台通道&＃xff08;Platform Channels&＃xff09;被官方划分在 Engine 层。平台通道分为三种类型&＃xff0c;分别是 BasicMessageChannel、MethodChannel、EventChannel。其中 MethodChannel 它使用异步方法调用的方式进行平台通信&＃xff0c;这也是最常用的一种方式。
编写 Flutter 端代码
这里以官方的一个手机电量查询例子来演示整个方法调用过程&＃xff0c;Flutter 端代码如下。优雅的做法是&＃xff0c;遵循职责单一的原则&＃xff0c;将每一个方法通道封装成一个类。比如我这个通道是用来管理电量的&＃xff0c;那么就叫 BatteryChannel &＃xff0c;所有和电量有关的方法都封装在这个类中。
class BatteryChannel {
static const _batteryChannelName &＃61; "cn.blogss/battery"; // 1.方法通道名称
static MethodChannel _batteryChannel;
static void initChannels(){
_batteryChannel &＃61; MethodChannel(_batteryChannelName); // 2\\. 实例化一个方法通道
}
// 3\\. 异步任务&＃xff0c;通过平台通道与特定平台进行通信&＃xff0c;获取电量&＃xff0c;这里的宿主平台是 Android
static getBatteryLevel() async {
String batteryLevel;
try {
final int result &＃61; await _batteryChannel.invokeMethod(&＃39;getBatteryLevel&＃39;);
batteryLevel &＃61; &＃39;Battery level at $result % .&＃39;;
} on PlatformException catch (e) {
batteryLevel &＃61; "Failed to get battery level: &＃39;${e.message}&＃39;.";
}
return batteryLevel;
}
}
在你需要使用这个通道的时候&＃xff0c;在 Flutter 页面中这样做就行了。
class BatteryRoute extends StatefulWidget {
&＃64;override
State createState() {
return BatteryRouteState();
}
}
class BatteryRouteState extends State {
String _batteryLevel &＃61; &＃39;Unknown battery level.&＃39;;
// 3.异步获取到电量&＃xff0c;然后重新渲染页面
getBatteryLevel() async{
_batteryLevel &＃61; await BatteryChannel.getBatteryLevel();
setState(() {});
}
&＃64;override
void initState() {
super.initState();
BatteryChannel.initChannels(); // 1\\. 初始化通道
}
&＃64;override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("BatteryRoute"),
centerTitle: true,
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new ElevatedButton(
child: new Text(&＃39;Get Battery Level&＃39;),
onPressed: (){
getBatteryLevel(); // 2\\. 调用通道方法
},
),
new Text(_batteryLevel),
],
),
),
);
}
}
编写 Android 端代码
Android 端代码与 Flutter 端类似&＃xff0c;如下所示。同样这个类叫 BatteryChannel&＃xff0c;下面是 Kotlin 写的&＃xff0c;没了解过的读者理解上来可能有点难度。不过它也很简单&＃xff0c;这个通道就负责电量的查询了。只需实现 MethodChannel.MethodCallHandler 接口&＃xff0c;重写 onMethodCall 方法&＃xff0c;这样 Flutter 端的方法调用就会进入到这里。
class BatteryChannel(flutterEngine: BinaryMessenger, context: Context): MethodChannel.MethodCallHandler {
private val batteryChannelName &＃61; "cn.blogss/battery"
private var channel: MethodChannel
private var mContext: Context
companion object {
private const val TAG &＃61; "BatteryChannel"
}
init {
Log.d(TAG, "init")
channel &＃61; MethodChannel(flutterEngine, batteryChannelName)
channel.setMethodCallHandler(this)
mContext &＃61; context;
}
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
Log.d(TAG, "onMethodCall: " &＃43; call.method)
if (call.method &＃61;&＃61; "getBatteryLevel") {
val batteryLevel &＃61; getBatteryLevel()
if (batteryLevel !&＃61; -1) {
result.success(batteryLevel)
} else {
result.error("UNAVAILABLE", "Battery level not available.", null)
}
} else {
result.notImplemented()
}
}
private fun getBatteryLevel(): Int {
val batteryLevel: Int
if (Build.VERSION.SDK_INT >&＃61; Build.VERSION_CODES.LOLLIPOP) {
val batteryManager &＃61; mContext.getSystemService(Context.BATTERY_SERVICE) as BatteryManager
batteryLevel &＃61; batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
} else {
val intent &＃61; ContextWrapper(mContext).registerReceiver(null, IntentFilter(Intent.ACTION_BATTERY_CHANGED))
batteryLevel &＃61; intent!!.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) *
100 / intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1)
}
return batteryLevel
}
}
然后我们还要在 MainActivity 中实例化一下这个通道&＃xff0c;如下。常用的做法是在 configureFlutterEngine 这个方法中实例化我们的通道就行了&＃xff0c;有多少个通道&＃xff0c;就在这里实例化多少个通道。
class MainActivity: FlutterActivity() {
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
BatteryChannel(flutterEngine.dartExecutor.binaryMessenger,context) // 实例化通道
}
}
最后看下效果。
写在最后
本文详细介绍了 Flutter 框架概览&＃xff0c;分析了 Dart Framework、Engine、Embedded 三层实际开发中所处的位置&＃xff0c;然后通过代码实战&＃xff0c;Flutter 通过平台通道与 Android 平台进行通信&＃xff0c;查询到了手机电量。读者应该对这两部分知识有了深刻的理解与运用&＃xff0c;下一篇&＃xff0c;我将继续带领大家更深层次的探索平台通道通信机制&＃xff01;
京公网安备 11010802041100号