全面理解-Flutter(万字长文,深度解析,android插件化框架

1)介绍一下 Skia

Skia 是一个 2D 的绘图引擎库,其前身是一个向量绘图软件,Chrome 和 Android 均采用 Skia 作为绘图引擎。Skia 提供了非常友好的 API,并且在图形转换、文字渲染、位图渲染方面都提供了友好、高效的表现。Skia 是跨平台的,所以可以被嵌入到 Flutter 的 iOS SDK 中,而不用去研究 iOS 闭源的 CoreGraphics / Core Animation。

Skia 是用 C++ 开发的、性能彪悍的 2D 图像绘制引擎,其前身是一个向量绘图软件。Skia 在图形转换、文字渲染、位图渲染方面都表现卓越,并提供了开发者友好的 API。Android 自带了 Skia,所以 Flutter Android SDK 要比 iOS SDK 小很多。正是得益于 Skia 的存在:

  • Flutter 底层的渲染能力得到了统一,不在需要使用做双端适配;
  • 通过 OpenGL、GPU,不需要依赖原生的组件渲染框架。
  • Flutter 可以最大限度的抹平平台差异,提升渲染效率和性能。

2)Flutter 的渲染流程

用户可以看到一张图像展示,至少需要三类介质:CPU、GPU 和 显示器。CPU 负责图像的数据计算,GPU 负责图像数据的渲染,而显示器是最终图片展示的载体。CPU 拿到需要上屏的数据做处理和加工,处理完成之后交给 GPU,GPU 在渲染之后将数据放入帧缓冲区,随后随着控制同步信号 (VSync)以周期性的频率,从缓冲区内读出数据,在显示器上进行图像呈现。而且操作系统就是一个无限循环的机制,不停的重复上面的操作,进行显示器的更新.

Flutter 的渲染整体流程也是这样的, Dart 进行视图数据的合成,然后交给 Skia 引擎进行处理,处理之后再交给 GPU 进行数据合成,然后准备上屏。当一帧图像绘制完毕后准备绘制下一帧时,显示器会发出一个垂直同步信号(VSync),所以 60Hz 的屏幕就会一秒内发出 60 次这样的信号。

3)Flutter 绘制流程

如上图所示,Flutter 渲染流程分为 7 个步骤:

首先是获取到用户的操作,然后你的应用会因此显示一些动画 ;

接着 Flutter 开始构建 Widget 对象。Widget 对象构建完成后进入渲染阶段,这个阶段主要包括三步:

  • 布局元素:决定页面元素在屏幕上的位置和大小;
  • 绘制阶段:将页面元素绘制成它们应有的样式;
  • 合成阶段:按照绘制规则将之前两个步骤的产物组合在一起

最后的光栅化由 Engine 层来完成。

4)布局

布局时 Flutter 深度优先遍历渲染对象树。数据流的传递方式是从上到下传递约束,从下到上传递大小。也就是说,父节点会将自己的约束传递给子节点,子节点根据接收到的约束来计算自己的大小,然后将自己的尺寸返回给父节点。整个过程中,位置信息由父节点来控制,子节点并不关心自己所在的位置,而父节点也不关心子节点具体长什么样子。

  • 24
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Flutter中调用Android原生方法,可以使用Flutter插件Flutter插件是一个将Flutter应用程序与原生平台通信的桥梁。下面是一些步骤来创建一个Flutter插件并在其中调用Android原生方法: 1. 使用Flutter插件模板创建一个Flutter插件: ``` flutter create --template=plugin <plugin-name> ``` 2. 在Flutter插件项目的`android`目录下,打开`build.gradle`件,并添加以下代码: ``` dependencies { implementation 'io.flutter:flutter_embedding_v2.7.0' // 其他依赖项 } ``` 3. 在Flutter插件项目的`android/src/main`目录下,创建一个`java`包,并在其中创建一个类,该类将包含您要调用的Android原生方法。例如,您可以创建一个名为`MyPlugin`的类,并在其中添加以下代码: ``` package com.example.my_plugin; import android.content.Context; import android.widget.Toast; import io.flutter.embedding.engine.plugins.FlutterPlugin; public class MyPlugin implements FlutterPlugin { private Context context; @Override public void onAttachedToEngine(FlutterPluginBinding flutterPluginBinding) { context = flutterPluginBinding.getApplicationContext(); } @Override public void onDetachedFromEngine(FlutterPluginBinding flutterPluginBinding) { context = null; } public void showToast(String message) { Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); } } ``` 4. 在Flutter插件项目的`lib`目录下,创建一个件夹,并在其中创建一个`dart`件,该件将包含您要在Flutter中调用的方法。例如,您可以创建一个名为`my_plugin.dart`的件,并在其中添加以下代码: ``` import 'package:flutter/services.dart'; class MyPlugin { static const MethodChannel _channel = const MethodChannel('my_plugin'); static Future<void> showToast(String message) async { try { await _channel.invokeMethod('showToast', {'message': message}); } on PlatformException catch (e) { print(e.message); } } } ``` 5. 在Flutter插件项目的`android/src/main`目录下,创建一个`res`目录,并在其中创建一个`values`目录。在`values`目录中,创建一个`strings.xml`件,并添加以下代码: ``` <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">My Plugin</string> </resources> ``` 6. 在Flutter插件项目的`android/src/main`目录下,打开`AndroidManifest.xml`件,并添加以下代码: ``` <application android:name="io.flutter.app.FlutterApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher"> <activity android:name="io.flutter.embedding.android.FlutterActivity" android:exported="true" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> ``` 7. 在Flutter插件项目的`android/src/main`目录下,打开`MyPlugin.java`件,并添加以下代码: ``` package com.example.my_plugin; import android.content.Context; import android.widget.Toast; import io.flutter.embedding.engine.plugins.FlutterPlugin; import io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel; import io.flutter.plugin.common.PluginRegistry.Registrar; public class MyPlugin implements FlutterPlugin { private Context context; private MethodChannel channel; public static void registerWith(Registrar registrar) { final MethodChannel channel = new MethodChannel(registrar.messenger(), "my_plugin"); channel.setMethodCallHandler(new MyPlugin(registrar.context(), channel)); } private MyPlugin(Context context, MethodChannel channel) { this.context = context; this.channel = channel; } @Override public void onAttachedToEngine(FlutterPluginBinding flutterPluginBinding) { context = flutterPluginBinding.getApplicationContext(); channel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), "my_plugin"); channel.setMethodCallHandler(new MyPlugin(context, channel)); } @Override public void onDetachedFromEngine(FlutterPluginBinding flutterPluginBinding) { context = null; channel.setMethodCallHandler(null); channel = null; } public void showToast(String message) { Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); } private void onMethodCall(MethodCall call, MethodChannel.Result result) { if (call.method.equals("showToast")) { String message = call.argument("message"); showToast(message); result.success(null); } else { result.notImplemented(); } } } ``` 8. 在Flutter应用程序中,导入您的Flutter插件,并使用以下代码调用Android原生方法: ``` import 'package:flutter/material.dart'; import 'package:my_plugin/my_plugin.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: ElevatedButton( onPressed: () { MyPlugin.showToast('Hello World!'); }, child: Text('Show Toast'), ), ), ), ); } } ``` 这样,您就可以在Flutter应用程序中调用Android原生方法了!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值