Dart 层如何兼容 Android 和iOS平台特性 (1)

最新推荐文章于 2024-08-07 09:35:22 发布

原创最新推荐文章于 2024-08-07 09:35:22 发布 · 510 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#android #ios

程序员专栏收录该内容

440 篇文章

订阅专栏

文章讲述了如何在Flutter应用中通过MethodChannel处理Flutter请求，以及如何使用PlatformView嵌入Android和iOS的原生视图，以实现跨平台的能力复用。同时提到了创建和注册PlatformTextView的步骤，以及在AppDelegate中的应用注册过程。

GeneratedPluginRegistrant.register(with: self)
let controller : FlutterViewController = window?.rootViewController as! FlutterViewController;
// 1. 声明方法通道
let batteryChannel = FlutterMethodChannel.init(name: “samples.chenhang/utils”,binaryMessenger: controller.binaryMessenger);
batteryChannel.setMethodCallHandler({
//2.处理flutter 的请求
(call: FlutterMethodCall, result: FlutterResult) -> Void in
if(call.method==“openWeChat”){
// 处理方法名为 openWeChat的请求
self.openWeChat()
result(0)
}else{
result(FlutterMethodNotImplemented)
}
// Handle battery messages.
});
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
// 调用原生打开浏览器
func openWeChat() {
let urlString = “https://flutterchina.club/platform-channels/”
let url = URL(string: urlString)
if #available(iOS 10.0, *) {
UIApplication.shared.open(url!, options: [:], completionHandler: nil)
} else {
// Fallback on earlier versions
}
}
}

找到找到 Flutter 应用的入口，也就是在 AppDelegate，然后在 application 方法中进行 flutter 的请求处理。

flutter 如何使用原生视图

通过方法通道，我们可以把原生操作系统提供的底层能力，以及现有原生开发中一些相对成熟的解决方案，以接口封装的形式在 Dart 层快速搞定，从而解决原生代码在 Flutter 上的复用问题。然后，我们可以利用 Flutter 本身提供的丰富控件，做好 UI 渲染。

是不是只要通过方法通道就完成了APP开发中的所有事情呢？显然并不是这样的，下面我们一起来看看复杂APP的构建都有什么组成。

通过flutter 和方法通道，我们可以解决了应用层能力、应用层渲染、底层能力但是对于那些涉及到底层渲染，比如浏览器、相机、地图，以及原生自定义视图的场景，自己在 Flutter 上重新开发一套显然不太现实。

Flutter 提供了一个平台视图（Platform View）的概念。它提供了一种方法，允许开发者在 Flutter 里面嵌入原生系统（Android 和 iOS）的视图，并加入到 Flutter 的渲染树中，实现与 Flutter 一致的交互体验。

创建平台视图的流程：

首先，由作为客户端的 Flutter，通过向原生视图的 Flutter 封装类（在 iOS 和 Android 平台分别是 UIKitView 和 AndroidView）传入视图标识符，用于发起原生视图的创建请求；
然后，原生代码侧将对应原生视图的创建交给平台视图工厂（PlatformViewFactory）实现；
最后，在原生代码侧将视图标识符与平台视图工厂进行关联注册，让 Flutter 发起的视图创建请求可以直接找到对应的视图创建工厂。

下面就以一个使用 Android TextView 和iOS的 UIText 为例子：

flutter 端

// 加载原生视图，Android 使用：AndroidView;ios 使用UiKitView
class NativeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
if (defaultTargetPlatform == TargetPlatform.android) {
return AndroidView(viewType: “com.example.flutter_base_app/textView”);
} else {
return UiKitView(
viewType: “com.example.flutter_base_app/textView”,
);
}
}
}

class NativeWidgetDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“显示原生控件”),
),
body: Center(
child: NativeWidget(),
),
);
}
}

非常简单，只需要根据不同平台，创建不同的widget 即可；Android 为AndroidView;ios 为UiKitView。

Android：

构建返回的view 继承 PlatformView

class NativeTextView(val context: Context?, val message: BinaryMessenger) : PlatformView, MethodChannel.MethodCallHandler {
// 传入 BinaryMessenger 只是为了创建 MethodChannel使用
private var textView: TextView? = null
private val updateText = “update_text”

init {
textView = TextView(context)
textView?.text = “我是来自Android的textView”
val methodChannel = MethodChannel(message, “”)
methodChannel.setMethodCallHandler(this)
}

override fun getView(): View {
return textView!!
}

override fun dispose() {
}

override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
when (call.method) {
updateText -> {

}
}

}

创建视图工厂实现

class NativeViewFactory(private val message: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
override fun create(context: Context?, viewId: Int, args: Any?): PlatformView {
return NativeTextView(context = context, message = message)
}

}

自定义Plugin类，注册视图工厂

object NativeViewPlugin {
private val viewTypeId = “com.example.flutter_base_app/textView”

fun registerWith(flutterEngine: FlutterEngine?) {
flutterEngine?.let {
val key = NativeViewPlugin::class.java.canonicalName
val shimPluginRegistry = ShimPluginRegistry(flutterEngine);
if (shimPluginRegistry.hasPlugin(key)) return
val registry = shimPluginRegistry.registrarFor(key)
registry.platformViewRegistry().registerViewFactory(viewTypeId, NativeViewFactory(registry.messenger()))
}

}
}

iOS

在 info.plist 添加 io.flutter.embedded_views_preview= true

2. 创建返回的视图类

import Foundation

import Foundation
import Flutter
class PlatformTextView: NSObject,FlutterPlatformView {
let frame: CGRect;
let viewId: Int64;
var text:String = “”

init(_ frame: CGRect,viewID: Int64,args :Any?) {
self.frame = frame
self.viewId = viewID
// if(args is NSDictionary){
// let dict = args as! NSDictionary
// self.text = dict.value(forKey: “text”) as! String
// }
}
func view() -> UIView {
let label = UILabel()
label.text = “我是来自iOS的文本”
label.textColor = UIColor.red
label.frame = self.frame
return label
}
}

创建视图工厂类

import Foundation
import Flutter

class PlatformTextViewFactory: NSObject,FlutterPlatformViewFactory {
func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView {
//返回一个视图控件
return PlatformTextView(frame,viewID: viewId,args: args)
}
func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
return FlutterStandardMessageCodec.sharedInstance()
}
}