跨平台网站制作,网站建设推荐书籍,django 做网站 原理,网站建设流程及细节一、Flutter 与原生页面交互的重要性和应用场景
Flutter 是一个由 Google 开发的开源框架#xff0c;用于创建跨平台的移动、Web 和桌面应用程序。Flutter 允许开发者使用一套代码库为 Android 和 iOS 等平台构建美观、高性能的应用程序。然而#xff0c;尽管 Flutter 提供了…一、Flutter 与原生页面交互的重要性和应用场景
Flutter 是一个由 Google 开发的开源框架用于创建跨平台的移动、Web 和桌面应用程序。Flutter 允许开发者使用一套代码库为 Android 和 iOS 等平台构建美观、高性能的应用程序。然而尽管 Flutter 提供了丰富的组件和库某些情况下开发者可能仍需要使用平台特有的功能或集成现有的原生页面和服务。
在以下场景中Flutter 与原生页面交互显得尤为重要
利用现有原生代码在项目中可能已经存在大量的原生代码重新用 Flutter 实现可能不现实或成本过高。调用平台特有的API一些平台特有的API如支付、地图等只能通过原生代码访问。集成第三方原生库一些第三方库只提供原生的接口需要通过原生代码来集成。性能关键任务对于一些性能敏感的任务原生代码往往可以提供更好的性能表现。遵循平台设计规范有时为了保持应用的一致性需要使用原生组件来遵守特定平台的设计规范。
通过与原生页面的交互Flutter 开发者可以充分利用平台的能力同时保持应用的流畅性和用户体验的一致性。 二、基本概念
1.平台通道Platform Channels介绍
平台通道是Flutter中一个强大的机制它允许Flutter与宿主平台如Android和iOS进行数据和任务的双向通信。这种机制解决了Flutter无法直接调用平台特定API的限制使得Flutter应用能够实现原生平台的功能。
(1).通道的工作原理
平台通道通过使用一个消息传递的系统工作该系统包括以下三个关键概念
消息传递的数据单元可以是简单的字符串、数字或者更复杂的序列化数据结构。编解码器负责消息的序列化与反序列化。Flutter提供了几种标准的编解码器例如JSONMessageCodec、StandardMessageCodec、StringCodec和BinaryCodec。通道连接Flutter和原生平台代码的通信通道。
(2).通道的种类
Flutter提供了三种类型的平台通道每种通道都适合不同的应用场景
MethodChannel用于传递方法调用及其响应。方法调用是单次的通常用于执行原生操作并获取结果。
EventChannel用于创建一个数据流它允许原生代码发送连续的事件数据给Flutter。这适合于监听原生端的事件或数据变化如传感器数据或用户位置更新。
BasicMessageChannel用于传递没有固定响应的消息支持自定义的编解码器。这适合于双向通信比如状态同步或数据共享。
(3).序列化机制
由于消息需要在Flutter和原生代码之间传递所以它们需要被序列化转换为字节序列和反序列化。Flutter框架提供了几个内置的编解码器来处理常见的数据类型开发者也可以自定义编解码器。
(4).平台通道的使用
使用平台通道时通常需要在Flutter端和原生端同时进行代码编写。
以下是一个简单的MethodChannel使用示例
Flutter端
import package:flutter/services.dart;class BatteryLevel {static const MethodChannel _channel MethodChannel(com.example.battery);static Futureint getBatteryLevel() async {final int batteryLevel await _channel.invokeMethod(getBatteryLevel);return batteryLevel;}
}
Android端Kotlin
class MainActivity: FlutterActivity() {private val CHANNEL com.example.batteryoverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {call, result -if (call.method getBatteryLevel) {val batteryLevel getBatteryLevel()if (batteryLevel ! -1) {result.success(batteryLevel)} else {result.error(UNAVAILABLE, Battery level not available., null)}} else {result.notImplemented()}}}private fun getBatteryLevel(): Int {val batteryLevel: Intif (VERSION.SDK_INT VERSION_CODES.LOLLIPOP) {val batteryManager getSystemService(Context.BATTERY_SERVICE) as BatteryManagerbatteryLevel batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)} else {val intent ContextWrapper(applicationContext).registerReceiver(null, IntentFilter(Intent.ACTION_BATTERY_CHANGED))batteryLevel intent!!.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100 / intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1)}return batteryLevel}
}
iOS端Swift
import Flutter
import UIKitUIApplicationMain
objc class AppDelegate: FlutterAppDelegate {private let batteryChannel com.example.batteryoverride func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) - Bool {GeneratedPluginRegistrant.register(with: self)let controller: FlutterViewController window?.rootViewController as! FlutterViewControllerlet methodChannel FlutterMethodChannel(name: batteryChannel,binaryMessenger: controller.binaryMessenger)methodChannel.setMethodCallHandler({[weak self] (call: FlutterMethodCall, result: escaping FlutterResult) - Void in// Handle battery messages.guard call.method getBatteryLevel else {result(FlutterMethodNotImplemented)return}self?.receiveBatteryLevel(result: result)})return super.application(application, didFinishLaunchingWithOptions: launchOptions)}private func receiveBatteryLevel(result: FlutterResult) {let device UIDevice.currentdevice.isBatteryMonitoringEnabled trueif device.batteryState UIDevice.BatteryState.unknown {result(FlutterError(code: UNAVAILABLE,message: Battery level not available.,details: nil))} else {result(Int(device.batteryLevel * 100))}}
} 2.Flutter 平台通道比较及示例
在Flutter中MethodChannel、EventChannel和BasicMessageChannel是三种不同的平台通道用于实现Dart代码和原生平台代码之间的通信。
MethodChannel
MethodChannel通常用于发送方法调用请求并接收单次响应。它适合于执行原生操作并获取结果的场景。
Flutter端
import package:flutter/services.dart;// 创建MethodChannel实例
const MethodChannel methodChannel MethodChannel(com.example.channel/method);// 调用原生方法并获取电池电量
Futureint getBatteryLevel() async {try {// 调用原生平台的getBatteryLevel方法final int result await methodChannel.invokeMethod(getBatteryLevel);return result;} on PlatformException catch (e) {// 处理异常情况return -1;}
}
Android端Kotlin
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannelclass MainActivity: FlutterActivity() {// 定义通道名称private val CHANNEL com.example.channel/methodoverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)// 创建MethodChannel实例并设置方法调用处理器MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result -if (call.method getBatteryLevel) {// 执行获取电池电量的操作并将结果返回给Flutter端val batteryLevel getBatteryLevel()if (batteryLevel ! -1) {result.success(batteryLevel)} else {result.error(UNAVAILABLE, Battery level not available., null)}} else {result.notImplemented()}}}// 模拟获取电池电量的函数private fun getBatteryLevel(): Int {// 这里只是一个示例实际获取电池电量的方法与此不同return 100 // 假设电池电量是100%}
}
iOS端Swift
import Flutter
import UIKitUIApplicationMain
objc class AppDelegate: FlutterAppDelegate {// 定义通道名称private let methodChannelName com.example.channel/methodoverride func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) - Bool {GeneratedPluginRegistrant.register(with: self)guard let controller window?.rootViewController as? FlutterViewController else {fatalError(rootViewController is not type FlutterViewController)}// 创建MethodChannel实例并设置方法调用处理器let methodChannel FlutterMethodChannel(name: methodChannelName,binaryMessenger: controller.binaryMessenger)methodChannel.setMethodCallHandler({[weak self] (call: FlutterMethodCall, result: escaping FlutterResult) - Void in// 检查方法名并执行相应操作if call.method getBatteryLevel {// 执行获取电池电量的操作并将结果返回给Flutter端self?.receiveBatteryLevel(result: result)} else {result(FlutterMethodNotImplemented)}})return super.application(application, didFinishLaunchingWithOptions: launchOptions)}private func receiveBatteryLevel(result: FlutterResult) {// 这里只是一个示例实际获取电池电量的方法与此不同result(100) // 假设电池电量是100%}
} EventChannel
EventChannel用于数据流event streams可以用来监听原生端发出的事件。例如原生端的传感器数据或数据库更新。
Flutter端
import package:flutter/services.dart;// 创建EventChannel实例
const EventChannel eventChannel EventChannel(com.example.channel/stream);// 监听来自原生平台的事件流
void listenToNativeEvents() {eventChannel.receiveBroadcastStream().listen((event) {// 处理原生平台发送的数据print(Received event: $event);}, onError: (error) {// 处理错误print(Received error: ${error.message});});
}
Android端Kotlin
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.EventChannel
import java.util.*class MainActivity : FlutterActivity() {// 定义通道名称private val CHANNEL com.example.channel/stream// 模拟传感器数据流private val sensorDataStream Timer()override fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)// 创建EventChannel实例并设置事件流处理器EventChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setStreamHandler(object : EventChannel.StreamHandler {override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {// 设置定时器模拟传送传感器数据sensorDataStream.schedule(object : TimerTask() {override fun run() {// 模拟事件数据这里发送当前时间戳events?.success(System.currentTimeMillis())}}, 0, 1000)}override fun onCancel(arguments: Any?) {// 取消事件流sensorDataStream.cancel()}})}
}
iOS端Swift
import Flutter
import UIKitclass StreamHandler: NSObject, FlutterStreamHandler {private var eventSink: FlutterEventSink?private var timer: Timer?func onListen(withArguments arguments: Any?, eventSink events: escaping FlutterEventSink) - FlutterError? {eventSink events// 设置定时器模拟传送传感器数据timer Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in// 模拟事件数据这里发送当前时间戳events(Date().timeIntervalSince1970 * 1000)}return nil}func onCancel(withArguments arguments: Any?) - FlutterError? {// 取消定时器timer?.invalidate()timer nileventSink nilreturn nil}
}UIApplicationMain
objc class AppDelegate: FlutterAppDelegate {// 定义通道名称private let streamChannelName com.example.channel/streamoverride func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) - Bool {GeneratedPluginRegistrant.register(with: self)let controller: FlutterViewController window?.rootViewController as! FlutterViewController// 创建EventChannel实例并设置事件流处理器let eventChannel FlutterEventChannel(name: streamChannelName, binaryMessenger: controller.binaryMessenger)let streamHandler StreamHandler()eventChannel.setStreamHandler(streamHandler)return super.application(application, didFinishLaunchingWithOptions: launchOptions)}
} BasicMessageChannel
BasicMessageChannel 允许发送和接收字符串和半结构化信息适用于自定义编码和协议或者需要频繁通信但数据量不大的场景。
Flutter端
import package:flutter/services.dart;// 创建BasicMessageChannel实例
BasicMessageChannelString basicMessageChannel BasicMessageChannelString(com.example.channel/basic, StringCodec());// 向原生发送消息
Futurevoid sendMessage(String message) async {String response await basicMessageChannel.send(message);print(Received response: $response);
}// 接收来自原生的消息
void receiveMessages() {basicMessageChannel.setMessageHandler((String message) async {print(Received message: $message);return Received!;});
}
Android端Kotlin
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.BasicMessageChannel
import io.flutter.plugin.common.StringCodecclass MainActivity: FlutterActivity() {private val CHANNEL com.example.channel/basicoverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)// 创建BasicMessageChannel实例val messageChannel BasicMessageChannelString(flutterEngine.dartExecutor.binaryMessenger, CHANNEL, StringCodec.INSTANCE)// 设置消息接收器messageChannel.setMessageHandler { message, reply -// 在这里处理从Flutter接收到的消息println(Received message: $message)// 回复消息给Flutter端reply.reply(Echo: $message)}}
}
iOS端Swift
import Flutter
import UIKitUIApplicationMain
objc class AppDelegate: FlutterAppDelegate {private let basicMessageChannelName com.example.channel/basicoverride func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) - Bool {GeneratedPluginRegistrant.register(with: self)guard let controller window?.rootViewController as? FlutterViewController else {fatalError(rootViewController is not type FlutterViewController)}// 创建BasicMessageChannel实例let messageChannel FlutterBasicMessageChannel(name: basicMessageChannelName,binaryMessenger: controller.binaryMessenger,codec: FlutterStringCodec.sharedInstance())// 设置消息接收器messageChannel.setMessageHandler { (message: Any?, reply: FlutterReply) in// 在这里处理从Flutter接收到的消息if let messageStr message as? String {print(Received message: \(messageStr))// 回复消息给Flutter端reply(Echo: \(messageStr))}}return super.application(application, didFinishLaunchingWithOptions: launchOptions)}
} 3.异步编程在平台通道中的应用
在Flutter中平台通道的调用通常是异步的这意味着你可以使用async和await关键字来等待原生代码的执行结果而不会阻塞UI线程。
例如使用MethodChannel请求电池电量时你通常会这样做
Futurevoid _getBatteryLevel() async {String batteryLevel;try {final int result await NativeBridge.getBatteryLevel();batteryLevel Battery level at $result % .;} on PlatformException {batteryLevel Failed to get battery level.;}print(batteryLevel);
} 三、设置平台通道
1.定义通道名
我们将设置一个名为 com.example.channel/method 的 MethodChannel 平台通道这个通道将用于Flutter与原生平台iOS和Android之间的通信。 2.在 Flutter端创建MethodChannel
在Flutter端你需要创建一个 MethodChannel 实例并通过它发送消息到原生平台。
// 导入相关包
import package:flutter/services.dart;// 定义通道名
const platformChannel MethodChannel(com.example.channel/method);// 调用原生方法
Futurevoid getNativeData() async {try {final String result await platformChannel.invokeMethod(getNativeData);print(从原生平台获取的数据$result);} on PlatformException catch (e) {print(调用原生平台方法失败${e.message});}
}
在上面的代码中我们定义了一个方法通道名 com.example.channel/method并创建了 MethodChannel 实例。我们定义了一个名为 getNativeData 的函数该函数调用原生平台的 getNativeData 方法并处理来自原生平台的响应或异常。 3.在AndroidKotlin端监听通道
在Android端我们需要在 MainActivity 中设置 MethodChannel 并定义方法调用的处理逻辑。
// 导入相关包
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandlerclass MainActivity: FlutterActivity() {private val CHANNEL com.example.channel/methodoverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)// 设置MethodChannel并监听来自Flutter的调用MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result -// 判断调用的方法名if (call.method getNativeData) {// 执行获取数据的逻辑val nativeData 来自Android的数据// 使用result对象发送结果回Flutterresult.success(nativeData)} else {// 如果方法未实现返回未实现的错误result.notImplemented()}}}
}
在这段代码中我们在 MainActivity 类中创建了一个 MethodChannel 实例然后设置了一个 MethodCallHandler 来监听来自Flutter的方法调用。当Flutter调用 getNativeData 方法时我们返回一些模拟的数据给Flutter。 3.在iOSSwift端监听通道
在iOS端我们在 AppDelegate 中设置 MethodChannel 并处理方法调用。
import UIKit
import FlutterUIApplicationMain
objc class AppDelegate: FlutterAppDelegate {// 定义通道名 与Flutter端定义的通道名称保持一致private let channelName com.example.channel/methodoverride func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) - Bool {GeneratedPluginRegistrant.register(with: self)guard let controller window?.rootViewController as? FlutterViewController else {fatalError(rootViewController is not type FlutterViewController)}let channel MethodChannel(name: channelName, binaryMessenger: controller.binaryMessenger)// 设置监听器以处理来自Flutter的方法调用channel.setMethodCallHandler {(call: FlutterMethodCall, result: escaping FlutterResult) - Void in// 检查方法名以确定执行哪个原生方法if call.method getNativeData {// 执行获取数据逻辑let nativeData 来自iOS的数据// 发送结果回Flutterresult(nativeData)} else {// 如果方法未实现返回未实现的错误result(FlutterMethodNotImplemented)}}return super.application(application, didFinishLaunchingWithOptions: launchOptions)}
}
在这段Swift代码中我们在 AppDelegate 类中同样定义了一个 MethodChannel并设置了一个闭包作为 MethodCallHandler 来监听Flutter的方法调用。当Flutter请求 getNativeData 方法时我们返回一串模拟的数据。 四、跳转到原生页面
为了实现Flutter跳转到原生页面的功能我们需要在三个平台上编写相应的代码Flutter、iOS和Android。
Flutter端
在Flutter端我们使用MethodChannel来发起跳转到原生页面的请求。
// 导入必要的包
import package:flutter/material.dart;
import package:flutter/services.dart;void main() runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(home: HomeScreen(),);}
}class HomeScreen extends StatelessWidget {// 创建MethodChannel实例通道名称要与原生端一致static const platformChannel MethodChannel(com.example.channel/native);// 调用原生方法跳转到原生页面的函数Futurevoid openNativeScreen() async {try {// 调用原生平台的openNativeScreen方法await platformChannel.invokeMethod(openNativeScreen);} on PlatformException catch (e) {// 如果跳转失败捕获异常print(Failed to open native screen: ${e.message});}}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(Flutter Home Screen),),body: Center(child: ElevatedButton(onPressed: openNativeScreen, // 点击按钮时发起跳转child: Text(Go to Native Screen),),),);}
}
在上面的Flutter代码中我们定义了一个按钮当用户点击这个按钮时openNativeScreen函数会通过MethodChannel发起一个名为openNativeScreen的方法调用。 Android端Kotlin
在Android端在MainActivity中监听MethodChannel并对openNativeScreen方法调用进行处理启动一个新的Activity。
// MainActivity.kt
import android.content.Intent
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannelclass MainActivity: FlutterActivity() {private val CHANNEL com.example.channel/nativeoverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result -if (call.method openNativeScreen) {// 创建Intent并启动新的Activityval intent Intent(this, NativeActivity::class.java)startActivity(intent)// 返回成功结果result.success(null)} else {result.notImplemented()}}}
}
// NativeActivity.kt
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity// 创建新的Activity用于展示原生页面
class NativeActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 设置原生页面的布局setContentView(R.layout.activity_native)}
}
在Android项目中我们还需要在AndroidManifest.xml中注册NativeActivity。
activity android:name.NativeActivity!-- 配置和其他Activity相关的属性 --
/activity iOS端Swift
在iOS端在AppDelegate中监听MethodChannel并对openNativeScreen方法调用进行处理启动一个新的UIViewController。
import UIKit
import FlutterUIApplicationMain
objc class AppDelegate: FlutterAppDelegate {private let channelName com.example.channel/nativeoverride func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) - Bool {GeneratedPluginRegistrant.register(with: self)if let controller window?.rootViewController as? FlutterViewController {let channel FlutterMethodChannel(name: channelName, binaryMessenger: controller.binaryMessenger)channel.setMethodCallHandler { (call: FlutterMethodCall, result: escaping FlutterResult) - Void inif call.method openNativeScreen {// 实现UIViewController的跳转逻辑self.openNativeScreen(from: controller)result(nil)} else {result(FlutterMethodNotImplemented)}}}return super.application(application, didFinishLaunchingWithOptions: launchOptions)}private func openNativeScreen(from flutterViewController: FlutterViewController) {// 创建原生页面的UIViewController
let nativeViewController NativeViewController()// 从当前FlutterViewController进行页面跳转flutterViewController.present(nativeViewController, animated: true, completion: nil)}
}// NativeViewController.swift
import UIKit// 创建一个新的UIViewController子类作为原生页面
class NativeViewController: UIViewController {override func viewDidLoad() {super.viewDidLoad()// 设置原生页面的属性例如背景色view.backgroundColor UIColor.white}
} 五、从 Flutter 传值给原生页面并得到响应
为了实现从Flutter应用传递数据到原生页面并在原生页面中接收和解析这些数据我们需要分别在Flutter、Android和iOS端编写代码。
Flutter端发送数据
import package:flutter/material.dart;
import package:flutter/services.dart;
import dart:convert;void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(home: HomeScreen(),);}
}class HomeScreen extends StatelessWidget {// 创建MethodChannel实例通道名称要与原生端一致static const platformChannel MethodChannel(com.example.channel/transfer);// 向原生页面发送简单数据Futurevoid sendSimpleData() async {try {final String response await platformChannel.invokeMethod(sendSimpleData, {message: Hello from Flutter!});print(response); // 打印原生页面返回的响应} on PlatformException catch (e) {print(Failed to send simple data: ${e.message});}}// 向原生页面发送复杂数据如JSONFuturevoid sendComplexData() async {try {final MapString, dynamic complexData {user: {id: 1,name: John Doe,email: johndoeexample.com,}};final String response await platformChannel.invokeMethod(sendComplexData, {data: json.encode(complexData)});print(response); // 打印原生页面返回的响应} on PlatformException catch (e) {print(Failed to send complex data: ${e.message});}}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(Flutter to Native Data Transfer),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: Widget[ElevatedButton(onPressed: sendSimpleData,child: Text(Send Simple Data),),ElevatedButton(onPressed: sendComplexData,child: Text(Send Complex Data),),],),),);}
}
在Flutter端我们创建了两个函数sendSimpleData和sendComplexData用于发送简单和复杂数据。数据通过MethodChannel的invokeMethod函数发送到原生端同时可以从原生端接收响应。 Android端Kotlin
在Android端我们监听MethodChannel并使用Gson库来解析JSON格式的复杂数据。
// MainActivity.kt
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import com.google.gson.Gson
import com.google.gson.reflect.TypeTokenclass MainActivity: FlutterActivity() {private val CHANNEL com.example.channel/transferoverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result -when (call.method) {sendSimpleData - {val message call.argumentString(message)// 使用传递的简单数据// ...// 发送响应回Flutter端result.success(Received simple data: $message)}sendComplexData - {val data call.argumentString(data)val type object : TypeTokenMapString, Any() {}.typeval complexData: MapString, Any Gson().fromJson(data, type)// 使用传递的复杂数据// ...// 发送响应回Flutter端result.success(Received complex data)}else - result.notImplemented()}}}
} iOS端Swift
在iOS端我们监听MethodChannel并使用Swift的Codable协议或JSONSerialization来解析JSON格式的复杂数据。
// AppDelegate.swift
import UIKit
import FlutterUIApplicationMain
objc class AppDelegate: FlutterAppDelegate {private let channelName com.example.channel/transferoverride func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions:[UIApplication.LaunchOptionsKey: Any]?) - Bool {GeneratedPluginRegistrant.register(with: self)guard let controller window?.rootViewController as? FlutterViewController else {fatalError(rootViewController is not type FlutterViewController)}let channel FlutterMethodChannel(name: channelName,binaryMessenger: controller.binaryMessenger)channel.setMethodCallHandler { [weak self] (call, result) inswitch call.method {case sendSimpleData:if let message call.arguments as? String {// 使用传递的简单数据// ...// 发送响应回Flutter端result(Received simple data: \(message))} else {result(FlutterError(code: INVALID_ARGUMENT, message: Expected a string argument, details: nil))}case sendComplexData:if let jsonString call.arguments as? String,let data jsonString.data(using: .utf8) {do {// 使用Codable进行解析let user try JSONDecoder().decode(User.self, from: data)// 使用传递的复杂数据// ...// 发送响应回Flutter端result(Received complex data)} catch {result(FlutterError(code: JSON_PARSE_ERROR, message: Error parsing JSON, details: nil))}} else {result(FlutterError(code: INVALID_ARGUMENT, message: Expected a JSON string argument, details: nil))}default:result(FlutterMethodNotImplemented)}}return super.application(application, didFinishLaunchingWithOptions: launchOptions)}
}// 定义User结构体以匹配传递的复杂数据结构
struct User: Codable {var id: Intvar name: Stringvar email: String
} 六、从原生页面回传数据到 Flutter
当需要从原生页面回传数据到Flutter时有两种常见的方法使用MethodChannel或者使用ActivityResultAndroid端/使用委托(delegate)/闭包(closures)iOS端。 使用MethodChannel回传数据此方法适用于任何时候原生代码需要主动发送数据到Flutter端的情况不仅限于页面返回时。Flutter端通过MethodChannel与原生代码通信可以接收来自原生端的数据。 使用ActivityResultAndroid/闭包和协议委托iOS此方法一般用于原生页面关闭时将数据回传到Flutter端。在Android上可以通过setResult方法和Intent返回数据给前一个Activity。在iOS上可以通过代理模式或闭包将数据回传给之前的控制器。
在Flutter端我们需要设置好MethodChannel监听原生端发来的数据或者在启动原生页面时等待结果。 方式一远程过程调用
Flutter端设置了MethodChannel监听并处理原生端的调用当原生代码处理完毕后通过相同的MethodChannel返回结果。这是一种典型的RPC远程过程调用模式。
单次请求-响应模式Flutter发起调用原生端返回数据通信完成。Flutter端主动请求Flutter通过invokeMethod主动请求原生数据。异步等待原生端响应Flutter调用后使用await关键字等待原生端完成操作并返回结果。适用场景当Flutter需要原生端某个特定操作的结果时使用比如获取设备信息、处理完毕的数据等。
Flutter端接收返回数据
import package:flutter/material.dart;
import package:flutter/services.dart;class HomeScreen extends StatefulWidget {override_HomeScreenState createState() _HomeScreenState();
}class _HomeScreenState extends StateHomeScreen {// 创建一个MethodChannel用于与原生平台通信static const platformChannel MethodChannel(com.example.channel/transfer);// 用于显示从原生平台接收到的数据String _dataFromNative No data;overridevoid initState() {super.initState();// 在 initState 中设置监听器以处理原生平台发来的方法调用platformChannel.setMethodCallHandler(_handleMethodCall);}// 处理从原生平台接收到的方法调用Futuredynamic _handleMethodCall(MethodCall call) async {switch (call.method) {case onDataReturn:// 当原生平台返回数据时更新状态以显示数据setState(() {_dataFromNative call.arguments;});break;default:throw MissingPluginException(notImplemented);}}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(Flutter Native Data Return),),body: Center(// 显示从原生端接收到的数据child: Text(_dataFromNative),),);}
}
Android端Kotlin设置返回数据
在Android端你可以在MainActivity中创建一个按钮并在点击事件中使用MethodChannel向Flutter发送消息
// ...其他导入
import io.flutter.embedding.android.FlutterActivity
import io.flutter.plugin.common.MethodChannelclass MainActivity: FlutterActivity() {// 与Flutter端相同的通道名称private val CHANNEL com.example.channel/transferoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 初始化MethodChannelval channel MethodChannel(flutterEngine!!.dartExecutor.binaryMessenger, CHANNEL)// ...其他代码// 用于向Flutter发送数据fun sendDataToFlutter() {// 使用MethodChannel调用Flutter端定义的方法并传递数据channel.invokeMethod(onDataReturn, 这是来自原生平台的数据)}// 假设有个触发发送数据到Flutter的逻辑sendDataToFlutter()}
} iOS端Swift设置返回数据
在iOS端你可以在ViewController中为一个按钮并在这个按钮回调中使用MethodChannel向Flutter发送消息
// ...其他导入
import Flutterclass ViewController: UIViewController {private var channel: FlutterMethodChannel?override func viewDidLoad() {super.viewDidLoad()// 初始化MethodChannelguard let controller self as? FlutterViewController else {fatalError(ViewController is not type FlutterViewController)}channel FlutterMethodChannel(name: com.example.channel/transfer, binaryMessenger: controller.binaryMessenger)// ...其他代码// 用于向Flutter发送数据func sendDataToFlutter() {// 使用MethodChannel调用Flutter端定义的方法并传递数据channel?.invokeMethod(onDataReturn, arguments: 这是来自原生平台的数据)}// 假设有个触发发送数据到Flutter的逻辑sendDataToFlutter()}
} 方式二事件订阅模式
是一种事件订阅模式Flutter端通过MethodChannel设置监听器任何时候原生端都可以主动调用这个通道并发送数据到Flutter而Flutter端则在_listener_方法中处理所有接收到的消息。
持续监听模式Flutter监听原生端的方法调用原生端可以在任何时刻主动发送消息。原生端主动发送消息原生代码在适当的时候如某事件发生后主动调用MethodChannel向Flutter发送消息。适用场景对于原生端事件的实时监听和处理如位置更新、传感器数据等。
Flutter端接收返回数据
import package:flutter/material.dart;
import package:flutter/services.dart;class HomeScreen extends StatelessWidget {// 创建MethodChannel实例static const platformChannel MethodChannel(com.example.channel/transfer);// 调用原生页面并等待返回结果Futurevoid _navigateAndDisplaySelection(BuildContext context) async {final result await platformChannel.invokeMethod(startNativeView);// 使用返回结果更新UI或状态if (result ! null) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(原生页面返回的数据: $result)),);}}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(Flutter Native Data Return),),body: Center(child: ElevatedButton(onPressed: () _navigateAndDisplaySelection(context),child: Text(打开原生页面),),),);}
}
在上面的Flutter端代码中我们通过platformChannel.invokeMethod调用原生端的方法打开一个原生页面并使用await关键字等待异步结果。当原生页面关闭并返回数据时我们可以通过result变量接收这个数据并通过ScaffoldMessenger显示在一个SnackBar中。 Android端Kotlin设置返回数据
在Android端我们可以使用setResult方法和Intent回传数据。
// 原生页面Activity
import android.app.Activity
import android.content.Intent
import android.os.Bundleclass NativeActivity : Activity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 设置布局、初始化等操作// ...// 假设这是一个按钮点击后触发的事件val button findViewByIdButton(R.id.button_id)button.setOnClickListener {val returnIntent Intent()returnIntent.putExtra(result_key, 这里是从原生返回的数据)setResult(Activity.RESULT_OK, returnIntent)finish() // 关闭当前原生页面回传数据到Flutter}}
} 在Android原生端你需要定义一个MethodChannel并监听startNativeView方法调用然后打开一个新的Activity并在关闭时设置返回结果
// MainActivity.kt (Android端)
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannelclass MainActivity: FlutterActivity() {private val CHANNEL com.example.channel/transferoverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {call, result -if (call.method startNativeView) {// 调用原生页面val intent Intent(this, NativeActivity::class.java)startActivityForResult(intent, REQUEST_CODE)} else {result.notImplemented()}}}// 接收原生页面返回的结果override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {super.onActivityResult(requestCode, resultCode, data)if (requestCode REQUEST_CODE resultCode Activity.RESULT_OK) {val returnData data?.getStringExtra(result_key) ?: No data// 使用MethodChannel返回数据到FlutterMethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).invokeMethod(onDataReturn, returnData)}}companion object {const val REQUEST_CODE 100}
} iOS端Swift设置返回数据
在iOS端我们可以使用闭包或者协议委托来回传数据。
// 原生页面ViewController
import UIKitclass NativeViewController: UIViewController {// 定义闭包用于回传数据var onReturnData: ((String) - Void)?override func viewDidLoad() {super.viewDidLoad()// 设置布局、初始化等操作// ...let button UIButton()button.addTarget(self, action: #selector(didTapButton), for: .touchUpInside)}objc func didTapButton() {// 当按钮被点击时通过闭包传递数据回Flutter端onReturnData?(这里是从原生返回的数据)dismiss(animated: true, completion: nil) // 关闭当前页面}
}
在iOS原生端你需要在Flutter与原生端之间建立一个MethodChannel并监听Flutter端的调用然后打开一个新的ViewController并在关闭时回传数据
// AppDelegate.swift (iOS端)
import UIKit
import FlutterUIApplicationMain
objc class AppDelegate: FlutterAppDelegate {private var flutterResult: FlutterResult?override func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) - Bool {if let controller window?.rootViewController as? FlutterViewController {let channel FlutterMethodChannel(name: com.example.channel/transfer,binaryMessenger: controller.binaryMessenger)channel.setMethodCallHandler({[weak self] (call: FlutterMethodCall, result: escaping FlutterResult) - Void in// 保存FlutterResult回调self?.flutterResult result// 检查是否是打开原生页面的调用if call.method startNativeView {self?.showNativeView(from: controller)} else {result(FlutterMethodNotImplemented)}})}return super.application(application, didFinishLaunchingWithOptions: launchOptions)}private func showNativeView(from controller: FlutterViewController) {let nativeViewController NativeViewController()// 设置回调闭包以便在ViewController关闭时返回数据nativeViewController.onReturnData { [weak self] data inself?.flutterResult?(data)}// 展示原生ViewControllercontroller.present(nativeViewController, animated: true, completion: nil)}
} 七、错误处理和异常安全
错误处理是编写健壮软件的重要组成部分。下面将详细介绍如何在Flutter、AndroidKotlin、iOSSwift三个平台上进行错误处理和异常安全。
我们在Flutter端通过MethodChannel调用原生代码并且在原生端使用try-catchKotlin或do-try-catchSwift来捕获可能发生的异常。如果捕获到异常原生端会通过MethodChannel.ResultKotlin或FlutterResultSwift将错误信息传递回Flutter。
异常处理机制确保了当原生代码执行出错时Flutter端可以收到错误信息并且可以根据错误信息做出相应的处理从而提供更加健壮的用户体验。 Flutter端处理原生代码抛出的异常
在Flutter端我们可以通过try-catch块来捕获和处理通过MethodChannel调用原生代码时可能抛出的异常。
import package:flutter/material.dart;
import package:flutter/services.dart;class ExceptionHandlingScreen extends StatefulWidget {override_ExceptionHandlingScreenState createState() _ExceptionHandlingScreenState();
}class _ExceptionHandlingScreenState extends StateExceptionHandlingScreen {static const platformChannel MethodChannel(com.example.channel/methods);String _result No data;Futurevoid _invokeNativeMethod(String methodName) async {try {final String result await platformChannel.invokeMethod(methodName);setState(() {_result result;});} on PlatformException catch (e) {// 捕获由原生代码抛出的异常setState(() {_result 原生代码发生异常${e.message};});} catch (e) {// 捕获其他异常setState(() {_result 未知异常${e.toString()};});}}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(异常处理示例),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: Widget[ElevatedButton(onPressed: () _invokeNativeMethod(someMethod),child: Text(调用原生方法),),Padding(padding: const EdgeInsets.all(8.0),child: Text(_result),),],),),);}
} Android端Kotlin
在AndroidKotlin端我们可以使用try-catch块来处理可能在执行方法调用时发生的异常并通过MethodChannel.Result向Flutter端传递错误信息。
// MainActivity.kt (Android端)
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannelclass MainActivity : FlutterActivity() {private val CHANNEL com.example.channel/methodsoverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result -try {when (call.method) {someMethod - {// 你的原生方法处理result.success(从原生返回的数据)}else - result.notImplemented()}} catch (e: Exception) {// 捕获异常并将错误返回到Flutterresult.error(ERROR, 方法执行出错: ${e.localizedMessage}, null)}}}
} iOS端Swift
在iOSSwift端我们一般通过do-try-catch块来处理方法调用时可能抛出的异常并通过FlutterResult传递错误信息给Flutter端。
// AppDelegate.swift (iOS端)
import UIKit
import FlutterUIApplicationMain
objc class AppDelegate: FlutterAppDelegate {private let channelName com.example.channel/methodsoverride func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) - Bool {guard let controller window?.rootViewController as? FlutterViewController else {fatalError(rootViewController is not type FlutterViewController)}let channel FlutterMethodChannel(name: channelName, binaryMessenger: controller.binaryMessenger)channel.setMethodCallHandler { (call, result) in// 检查方法名称并执行相应的原生代码if call.method someMethod {do {// 尝试执行方法并捕获可能的异常let data try self.someNativeMethod()result(data)} catch {// 如果有异常将异常信息返回给Flutterresult(FlutterError(code: ERROR,message: 方法执行出错: \(error.localizedDescription),details: nil))}} else {result(FlutterMethodNotImplemented)}}return super.application(application, didFinishLaunchingWithOptions: launchOptions)}private func someNativeMethod() throws - String {// 这里是你的原生方法实现可能会抛出异常// 例如我们这里直接抛出一个异常来模拟错误情况throw NSError(domain: , code: 0, userInfo: [NSLocalizedDescriptionKey: 演示错误])}
}
