Flutter基礎系列之混合開發(二)

時間 2019-11-12

標籤 flutter 基礎系列混合開發简体版

原文原文鏈接

1.混合開發的場景

1.1做爲獨立頁面加入

這是以頁面級做爲獨立的模塊加入，而不是頁面的某個元素。html

原生頁面能夠打開Flutter頁面
Flutter頁面能夠打開原生頁面

1.2做爲頁面的一部分嵌入

好比說原生頁面中只有某一個item是Flutter；android

Flutter頁面中只有某一部分是原生視圖

2.Flutter混合開發的集成步驟

2.1建立Flutter Module

在作混合開發以前，咱們首先須要建立一個Flutter Module。ios

這裏建議Flutter Module的建立目錄和原生工程的目錄同級。假設Native的目錄是這樣的：xxx/Native項目。git

cd xxx/
flutter create -t module flutter_module

能夠看到生成的flutter_module目錄下有這些文件：github

README.md                  pubspec.lock
flutter_module.iml         pubspec.yaml
flutter_module_android.iml test
.android lib .ios

上面的.android和.ios目錄，是隱藏文件，也是這個flutter_module的宿主工程。由於有宿主工程的存在，這個flutter_module在不添加額外配置的狀況下是能夠獨立運行的：json

.android：flutter_module的Android宿主工程；
.ios：flutter_module的iOS宿主工程；
lib：flutter_module的Dart部分的代碼；
pubspec.yaml：flutter_module的項目依賴配置文件。

2.2添加Flutter Module依賴：爲原生項目添加Flutter的依賴

官方解決方案：https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-appsxcode

2.2.1爲已存在的iOS原生項目添加Flutter Module依賴

【說明】：在原生項目中添加Flutter Module，須要配置好CocoaPods到工程中。若是沒有使用CocoaPods的，能夠參考http://www.javashuo.com/article/p-fdprzbzd-ky.html進行配置。服務器

第一步：在Podfile文件中添加依賴：網絡

flutter_application_path = "../flutter_module"
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

第二步：安裝依賴：app

在項目的根目錄中，執行以下指令：

pod install

第三步：禁用Bitcode：

目前Flutter還不支持Bitcode，因此集成了Flutter的iOS項目須要禁用Bitcode。

第四步：添加Build Phase來構建Dart代碼。

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

添加完以後，要將這個Run Script拖動到Target Dependencies phase下面，接下來就能夠運行項目了。

2.2.2爲已存在的Android應用添加Flutter Module依賴

第一步：配置Android項目的Flutter Module依賴：打開Android項目的settings.gradle添加以下代碼。這段腳本的做用是讓Flutter做爲一個單獨的模塊打包進來。

//HybridAndroid/settings.gradle
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))

setBinding和evaluate容許Flutter模塊包括它本身在內的任何Flutter插件，在settings.gradle中以相似：:flutter、package_info、:video_player的方式存在。

第二步：添加:flutter依賴。

//app/build.gradle
//...
dependencies {
   //... 
    implementation project(':flutter')
}

在build.gradle中配置的時候，有兩個地方要特別注意：

    compileOptions {  //編譯須要設置成JAVA8
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
    defaultConfig {
        minSdkVersion 16  //Flutter中要求最低SDK版本爲16
        //...
    }

2.3在Java/OC中調用Flutter Module

2.3.1OC中調用Flutter Module

在OC中調用Flutter Module有兩種方式：

直接使用FlutterViewController的方式；
使用FlutterEngine的方式。

下面咱們分別來看一下這兩種方式。

2.3.1.1直接使用FlutterViewController

    FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    [GeneratedPluginRegistrant registerWithRegistry:flutterViewController];  //若是使用了插件
    [flutterViewController setInitialRoute:@"myApp"];
    [self.navigationController pushViewController:flutterViewController animated:YES];

經過上面的代碼，咱們能夠看到setInitialRoute方法傳遞了參數「myApp」，該參數用於告訴Dart代碼顯示哪一個Flutter視圖。在Flutter Module的main.dart文件中，須要經過window.defaultRouteName來獲取Native指定要顯示的路由名，以肯定要建立哪一個窗口小部件並傳遞給runApp：

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route) {
  switch (route) {
    case 'myApp':
      return MyApp();
    default:
      return MaterialApp(
        home: Center(
          child: Text('沒找到'),
        ),
      );
  }
}

2.3.1.2使用FlutterEngine的方式

第一步：須要AppDelegate繼承自FlutterAppDelegate

//AppDelegate.h
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate

@property (strong, nonatomic) FlutterEngine *flutterEngine;

@end

//AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    //FlutterEngine初始化
    self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
    [self.flutterEngine runWithEntrypoint:nil];
    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];  //有插件
    //設置RootVC
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    UIViewController *vc = [[ViewController alloc] init];
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
    self.window.rootViewController = nav;
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

第二步：經過FlutterEngine來初始化FlutterViewController。

    FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self.navigationController pushViewController:flutterViewController animated:YES];

由於在AppDelegate中，咱們已經提早初始化了FlutterEngine，因此這種方式打開一個Flutter模塊的速度，比第一種方式要快一些。

【注意】：使用FlutterEngine方式，調用 setInitialRoute 方法會無效，在Flutter端拿到的永遠是「I」，這是Flutter SDK的一個BUG，所以若是必須依賴 setInitialRoute 參數，那麼只能使用方式一進行賦值。

2.3.2Java中調用Flutter Module

在Java中調用Flutter Module有兩種方式：

使用Flutter.createView API的方式；
使用FlutterFragment的方式。

2.3.2.1使用Flutter.createView API的方式

fab.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
    View flutterView = Flutter.createView(
      MainActivity.this,
      getLifecycle(),
      "myApp"
    );
    FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
    layout.leftMargin = 100;
    layout.topMargin = 200;
    addContentView(flutterView, layout);
  }
});

2.3.2.2FlutterFragment的方式

fab.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
    FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
    tx.replace(R.id.someContainer, Flutter.createFragment("myApp"));
    tx.commit();
  }
});

上面都使用了字符串「myApp」來告訴Dart代碼，在Flutter視圖中顯示哪一個widget。在Flutter項目中能夠經過 window.defaultRouteName 來獲取Native傳過來的「myApp」字符串，以肯定要建立哪一個widget並傳遞給runApp。

2.4編寫Dart代碼

import 'package:flutter/material.dart';
import 'dart:ui';
import 'package:flutter/services.dart';

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route) {
  switch (route) {
    case 'myApp':
      return new MyApp();
    default:
      return Center(
        child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
      );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter 混合開發'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const platform = const MethodChannel('gof.flutter.io/battery');
  String _batteryLevel = 'Unknown battery level.';

  Future<Null> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = 'Battery level at $result % .';
    } on PlatformException catch(e) {
      batteryLevel = "Failed to get battery level: '${e.message}'.";
    }

    setState(() {
      _batteryLevel = batteryLevel;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              RaisedButton(
                child: Text('Get Battery Level'),
                onPressed: _getBatteryLevel,
              ),
              Text(_batteryLevel)
            ],
          ),
        )
    );
  }
}

View Code

2.5運行項目

代碼編寫完以後，就能夠運行項目了。

2.6熱重啓/從新加載

咱們知道，在作純Flutter開發的時候，它帶有熱重啓/從新加載的功能。可是，在混合開發中，是在原生工程中集成了Flutter項目，這時熱重啓/從新加載的功能失效了，那麼咱們怎樣啓用混合開發中的熱重啓/從新加載功能呢？

第一步：打開一個模擬器，或者鏈接一個設備到電腦上；
第二步：關閉咱們的app，而後運行指令「flutter attach」。

【注意】：執行「flutter attach」指令，有可能遇到以下報錯：

NoSuchMethodError: NoSuchMethodError: The getter 'port' was called on null.
Receiver: null
Tried calling: port

【解決方案】：https://github.com/flutter/flutter/issues/32471

flutter channel master
flutter upgrade

若是有多個模擬器或設備，那麼須要使用以下指令來使用熱重啓/從新加載：

flutter attach -d BD1389B9-FF73-4114-96E9-4EE9A572A2AE

[注意]：熱重啓/從新加載，須要原生工程是debug模式。

2.7調試Dart代碼

上一節講了在混合工程中使用熱重啓/從新加載，一樣的，咱們是否可以調試咱們的Dart代碼呢？答案是確定的，只須要以下兩個步驟：

第一步：關閉咱們的app；
第二步：點擊Android Studio的Flutter Attach按鈕(須要安裝flutter和dart插件)；
第三步：啓動咱們的app。

接下來就能夠像調試普通Flutter項目同樣來調試混合開發模式的Dart代碼了。

[注意]：調試Dart代碼，須要原生工程是debug模式。

2.8發佈應用

2.8.1發佈iOS應用

發佈iOS應用，首先須要一個99美圓的我的開發者帳號用於將app上傳到App Store，或者是299美圓的企業級帳號用於將App發佈到公司本身的服務器或者第三方服務器上。

接下來，大概就是這幾個步驟：申請AppID -> 在iTunes Connect建立應用 -> 打包程序 -> 將應用提交到App Store。

2.8.2發佈Android應用

發佈Android應用，主要有兩大步驟：簽名打包 -> 發佈到各個Store。

那麼如何簽名打包一個Flutter開發的App呢？

第一步：生成Android簽名證書。簽名APK須要一個證書用於爲APP簽名，生成簽名證書能夠在Android Studio中，以可視化的方式生成，也可使用終端命令的方式生成。

第二步：設置gradle變量。

將你的簽名證書拷貝到android/app目錄下；
編輯~/.gradle/gradle.properties或../android/gradle.properties（一個是全局gradle.properties，一個是項目中的gradle.properties），加入以下代碼：

在gradle配置文件中添加簽名配置。編輯android/app/build.gradle文件，添加以下代碼：

簽名打包APK。終端進入android目錄，運行以下代碼：

./gradlew assembleRelease

3.Flutter與Native通訊機制

在講解Flutter與Native之間是如何傳遞數據以前，咱們先來了解一下它們的通訊機制，Flutter與Native的通訊是經過Channel來完成的。

消息使用Channel(平臺通道)在Flutter和Native之間傳遞，以下圖所示：

平臺所支持的數據類型以下表所示：

Flutter定義了三種不一樣類型的Channel：

BasicMessageChannel：用於傳遞字符串和半結構化的信息，持續通訊，收到消息後能夠回覆這次消息。例如：Native將遍歷到的文件信息陸續傳遞到Dart；Flutter將服務端獲取的數據交給Native加工，Native處理完以後返回。
MethodChannel：用於傳遞方法調用，一次性通訊。例如：Flutter調用Native拍照。
EventChannel：用於數據流的通訊，持續通訊，收到消息後沒法回覆這次消息，一般用於Native向Dart的通訊。例如：手機電量變化，網絡鏈接變化，陀螺儀，傳感器等。

這三種類型的Channel都是全雙工通訊，即A <=> B，Dart能夠主動發送消息到Native端，而且Native接收消息後能夠作出迴應。一樣地，Native端也能夠主動發送消息到Dart端，Dart端接受消息後返回給Native端。

3.1Flutter與iOS通訊開發指南

如今咱們來看看上面三種類型的Channel，在iOS端是怎麼實現的。

3.1.1BasicMessageChannel

咱們先看一下iOS端該Channel的構造函數：

+ (instancetype)messageChannelWithName:(NSString*)name
                       binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger
                                 codec:(NSObject<FlutterMessageCodec>*)codec;

name：channel的名稱，也是惟一標識符；
messenger：消息信使，是消息發送和接收的工具；
codec：消息的編解碼器，它有幾種不一樣類型的實現：

- BinaryCodec：最爲簡單的一種Codec，由於其返回值類型和入參的類型相同，都是二進制格式(Android平臺爲ByteBuffer，iOS平臺爲NSData)。實際上，FlutterBinaryCodec在編解碼過程當中什麼都沒作，只是原封不動將二進制數據消息返回。能夠在這種狀況下使用：傳遞內存數據塊時，在編解碼階段免於內存拷貝。
- FlutterBinaryCodec：是FlutterBinaryMessenger的默認編解碼器，其支持基礎數據類型、二進制數據、列表、字典。

- FlutterStringCodec：用於字符串和二進制數據之間的編解碼，其編碼格式爲UTF-8；

- FlutterJSONMessageCodec：用於基礎數據與二進制數據之間的編解碼，其支持基礎數據類型以及列表、字典。其在iOS端使用了NSJSONSerialization做爲序列化的工具，而在Android端則使用了其自定義的JSONUtil和StringCodec做爲序列化工具。

在建立好BasicMessageChannel以後，若是要讓其接收到來自Dart端主動發出的消息，則須要設置它的setMessageHandler方法爲其設置一個消息處理器：

- (void)setMessageHandler:(FlutterMessageHandler _Nullable)handler;

handler：消息處理器，配合BinaryMessenger完成消息的處理。

FlutterMessageHandler的定義以下：

//message：消息內容
//callback：回覆消息的回調函數
typedef void (^FlutterMessageHandler)(id _Nullable message, FlutterReply callback);

若是要給Dart發送消息，能夠調用以下方法：

- (void)sendMessage:(id _Nullable)message;
- (void)sendMessage:(id _Nullable)message
              reply:(FlutterReply _Nullable)callback;

message：要傳遞給Dart的信息；
callback：消息發出去後，收到Dart回覆的回調函數。

主動發送數據到Dart和接收來自Dart的消息的代碼，能夠參考：

- (void)initMessageChannel{
    self.messageChannel = [FlutterBasicMessageChannel messageChannelWithName:@"BasicMessageChannelPlugin" binaryMessenger:self.flutterViewController codec:[FlutterStringCodec sharedInstance]];
    __weak typeof(self)weakSelf = self;
    //設置消息處理器，處理來自Dart主動發出的消息
    [self.messageChannel setMessageHandler:^(NSString* message, FlutterReply reply) {
        reply([NSString stringWithFormat:@"BasicMessageChannel收到：%@",message]);  
        [weakSelf sendShow:message];
    }];
}

//使用FlutterBasicMessageChannel發送數據
[self.messageChannel sendMessage:self.tfInput.text reply:^(id  _Nullable reply) {
    if (reply != nil) {
        [self sendShow:reply];
    }
}];

接下來咱們看一下Dart端的實現：

仍是先看構造函數：

const BasicMessageChannel(this.name, this.codec);

name：Channel的名字，要和Native端保持一致；
codec：消息的編解碼器，要和Native端保持一致，有四種類型的實現。

建立好BasicMessageChannel以後，若是要讓其接收來自Native端主動發出的消息，則須要調用它的setMessageHandler方法爲其設置一個消息處理器。

void setMessageHandler(Future<T> handler(T message))

handler：消息處理器，配合BinaryMessenger完成消息的處理。

若是要主動給Native發送消息，能夠調用send方法：

Future<T> send(T message)

message：要傳遞給Native的消息；
返回值：消息發出去後，收到Native回覆的回調函數。

主動發送數據到Native和接收來自Native的消息的代碼，能夠參考：

static const BasicMessageChannel<String> _basicMessageChannel = const BasicMessageChannel('BasicMessageChannelPlugin', StringCodec());
//使用BasicMessageChannel接收來自Native主動發出的消息，並向Native回覆
_basicMessageChannel.setMessageHandler((String message) => Future<String>(() {
    setState(() {
        showMessage = 'BasicMessageChannel:'+message;
    });
    return "收到Native的消息：" + message;
}));

//使用BasicMessageChannel向Native發送消息，並接收Native的回覆
String response;
try {
    response = await _basicMessageChannel.send(value);
} on PlatformException catch (e) {
    print(e);
}

3.1.2FlutterMethodChannel

咱們仍是先從iOS端的構造函數看起：

//建立FlutterStandardMethodCodec類型的codec
+ (instancetype)methodChannelWithName:(NSString*)name
                      binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;

+ (instancetype)methodChannelWithName:(NSString*)name
                      binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger
                                codec:(NSObject<FlutterMethodCodec>*)codec;

name：Channel名字，也是惟一標識符；
messenger：消息信使，消息發送和接收的工具；
codec：用做MethodChannel的編解碼器。

在建立好MethodChannel以後，須要設置一個消息處理器，以便可以接收來自Dart端主動發出的消息：

- (void)setMethodCallHandler:(FlutterMethodCallHandler _Nullable)handler;

handler：消息處理器，配合BinaryMessenger完成消息的處理。

FlutterMethodCallHandler的定義以下：

typedef void (^FlutterMethodCallHandler)(FlutterMethodCall* call, FlutterResult result);

call：消息內容，它有兩個成員變量：字符串類型的call.method表示調用的方法名；id類型的call.arguments表示調用方法所傳的參數。
result：回覆此消息的回調函數。

iOS端的具體使用：

- (void)initMethodChannel{
    self.methodChannel = [FlutterMethodChannel methodChannelWithName:@"MethodChannelPlugin" binaryMessenger:self.flutterViewController];
    __weak typeof(self)weakSelf = self;
    [self.methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        if ([@"send" isEqualToString:call.method]) {
            result([NSString stringWithFormat:@"MethodChannelPlugin收到：%@",call.arguments]);//返回結果給Dart);
            [weakSelf sendShow:call.arguments];
        }
    }];
}

接下來看一下Dart端的實現：

MethodChannel的構造函數：

const MethodChannel(this.name, [this.codec = const StandardMethodCodec(), this.binaryMessenger = defaultBinaryMessenger ])

name：Channel的名字，和Native端保持一致；
codec：消息的編解碼器，默認是StandardMethodCodec，要和Native端保持一致；

建立好MethodChannel以後，若是要主動給Native端發送消息，能夠調用 invokeMethod 方法：

Future<T> invokeMethod<T>(String method, [ dynamic arguments ])

method：調用的方法名稱，Native端要作對應；
arguments：傳遞參數。

主動發送數據到Native的代碼，能夠參考：

//初始化
static const MethodChannel _methodChannelPlugin =
      const MethodChannel('MethodChannelPlugin');

//主動發送數據到Native
String response;
try {
    response = await _methodChannelPlugin.invokeMethod('send', value);
} on PlatformException catch (e) {
      print(e);
}

3.1.3EventChannel

先看iOS端的構造函數：

//建立一個FlutterStandardMethodCodec類型的EventChannel
+ (instancetype)eventChannelWithName:(NSString*)name
                     binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;

+ (instancetype)eventChannelWithName:(NSString*)name
                     binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger
                               codec:(NSObject<FlutterMethodCodec>*)codec;

name：Channel名稱，也是惟一標識符；
messenger：消息信使，消息發送和接收的工具；
codec：EventChannel的編解碼器。

在建立好EventChannel以後，若是要讓其接收Dart發來的消息，須要調用以下方法來設置一個消息處理器：

- (void)setStreamHandler:(NSObject<FlutterStreamHandler>* _Nullable)handler;

handler：消息處理器，是一個協議，配合BinaryMessenger完成消息的處理。

@protocol FlutterStreamHandler
//Native監聽事件時調用
//arguments：傳遞的參數
//events：Native回調Dart時的回調函數，它提供success、error、endOfStream三個回調方法分別對應事件的不一樣狀態
- (FlutterError* _Nullable)onListenWithArguments:(id _Nullable)arguments
                                       eventSink:(FlutterEventSink)events;
//Flutter取消監聽時調用
- (FlutterError* _Nullable)onCancelWithArguments:(id _Nullable)arguments;
@end

iOS的具體使用：

- (void)initEventChannel{
    self.eventChannel = [FlutterEventChannel eventChannelWithName:@"EventChannelPlugin" binaryMessenger:self.flutterViewController];
    
    //設置消息處理器，處理來自Dart的消息
    [self.eventChannel setStreamHandler:self];
}

#pragma mark - <FlutterStreamHandler>

//這個onListen是Flutter端開始監聽這個channel時的回調，第二個參數 EventSink是用來傳數據的載體
- (FlutterError* _Nullable)onListenWithArguments:(id _Nullable)arguments eventSink:(FlutterEventSink)eventSink {
    //arguments flutter給native的參數
    //回調給flutter，建議使用實例指向，由於該block可使用屢次
    self.eventSink = eventSink;
    return nil;
}

//flutter再也不接收
- (FlutterError* _Nullable)onCancelWithArguments:(id _Nullable)arguments {
    // arguments flutter給native的參數
    self.eventSink = nil;
    return nil;
}

//使用EventChannel發送數據
if (self.eventSink != nil) {
    self.eventSink(message);
}

接下來看一下dart端的實現：

dart端主要是實現一個事件的監聽，來接聽來自Native端主動發送的數據，代碼以下：

//初始化
static const EventChannel _eventChannelPlugin =
      EventChannel('EventChannelPlugin');

StreamSubscription _streamSubscription = _eventChannelPlugin
        .receiveBroadcastStream('123')
        .listen(_onToDart, onError: _onToDartError);

//消息監聽
void _onToDart(message) {
  setState(() {
    showMessage = message;
  });
}

//錯誤
void _onToDartError(error) {
  print(error);
}

3.2Flutter與Android通訊開發指南

略。

4.混合開發實戰

4.1初始化時Native向Dart傳遞數據

Flutter容許咱們在初始化Flutter頁面時，向Flutter傳遞一個string類型的 initialRoute 參數，從這個名字能夠看出，它是用做路由名稱的。既然是string類型的，那麼咱們在初始化Flutter時，就能夠很靈活的去應用了，好比說傳一個json格式的字符串，傳遞更多參數給Flutter端。示例以下：

- (FlutterViewController *)flutterViewController {
    if (nil == _flutterViewController) {
        _flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
        [_flutterViewController setInitialRoute:@"{'name':'myApp','data':{'userId':'00001','userName':'LeeGof'}}"];
    }
    return _flutterViewController;
}

而後在Dart端經過以下方式接收參數：

void main() {
  String initParams = window.defaultRouteName;
  runApp(_widgetForRoute(initParams));
}

4.2Native到Dart的通訊(Native發送數據到Dart)

在Flutter中，Native向Dart傳遞消息能夠經過 BasicMessageChannel 或 EventChannel 來實現。

首先咱們看一下 BasicMessageChannel 方式的實現。

- (void)initMessageChannel{
    self.messageChannel = [FlutterBasicMessageChannel messageChannelWithName:@"BasicMessageChannelPlugin" binaryMessenger:self.flutterViewController codec:[FlutterStringCodec sharedInstance]];
    __weak typeof(self)weakSelf = self;
    //設置消息處理器，處理來自Dart的消息
    [self.messageChannel setMessageHandler:^(NSString* message, FlutterReply reply) {
        reply([NSString stringWithFormat:@"BasicMessageChannel收到：%@",message]);
        [weakSelf sendShow:message];
    }];
}

- (void)btnSend:(id)sender {
    [self.view endEditing:YES];
    NSString *message = self.tfInput.text;
    if (message && message.length > 0) {
        if (self.isEventChannel) {
            //使用EventChannel發送數據
            if (self.eventSink != nil) {
                self.eventSink(message);
            }
        }
        else {
            //使用FlutterBasicMessageChannel發送數據
            [self.messageChannel sendMessage:message reply:^(id  _Nullable reply) {
                if (reply != nil) {
                    [self sendShow:reply];
                }
            }];
        }
    }
}

EventChannel 方式和 BasicMessageChannel 方式相似：

- (void)initEventChannel{
    self.eventChannel = [FlutterEventChannel eventChannelWithName:@"EventChannelPlugin" binaryMessenger:self.flutterViewController];
    
    //設置消息處理器，處理來自Dart的消息
    [self.eventChannel setStreamHandler:self];
}

#pragma mark - <FlutterStreamHandler>

//這個onListen是Flutter端開始監聽這個channel時的回調，第二個參數 EventSink是用來傳數據的載體
- (FlutterError* _Nullable)onListenWithArguments:(id _Nullable)arguments eventSink:(FlutterEventSink)eventSink {
    //arguments flutter給native的參數
    //回調給flutter，建議使用實例指向，由於該block可使用屢次
    self.eventSink = eventSink;
    return nil;
}

//flutter再也不接收
- (FlutterError* _Nullable)onCancelWithArguments:(id _Nullable)arguments {
    // arguments flutter給native的參數
    self.eventSink = nil;
    return nil;
}

Dart端經過以下方式接收數據：

  static const BasicMessageChannel<String> _basicMessageChannel =
      const BasicMessageChannel('BasicMessageChannelPlugin', StringCodec());

    //使用BasicMessageChannel接受來自Native的消息，並向Native回覆
    _basicMessageChannel
        .setMessageHandler((String message) => Future<String>(() {
              setState(() {
                showMessage = 'BasicMessageChannel:' + message;
              });
              return "收到Native的消息：" + message;
            }));

  static const EventChannel _eventChannelPlugin =
      EventChannel('EventChannelPlugin');

  void _onToDart(message) {
    setState(() {
      showMessage = 'EventChannel:' + message;
    });
  }

  void _onToDartError(error) {
    print(error);
  }

4.3Dart到Native的通訊(Dart發送數據到Native)

在Flutter中，Dart向Native傳遞消息能夠經過 BasicMessageChannel 或 MethodChannel 來實現。

首先看一下Dart發送的相關代碼：

    String response;
    try {
      if (_isMethodChannelPlugin) {
        //使用BasicMessageChannel向Native發送消息，並接受Native的回覆
        response = await _methodChannelPlugin.invokeMethod('send', value);
      } else {
        response = await _basicMessageChannel.send(value);
      }
    } on PlatformException catch (e) {
      print(e);
    }
    setState(() {
      showMessage = response ?? "";
    });

Native端接收：

- (void)initMessageChannel{
    self.messageChannel = [FlutterBasicMessageChannel messageChannelWithName:@"BasicMessageChannelPlugin" binaryMessenger:self.flutterViewController codec:[FlutterStringCodec sharedInstance]];
    __weak typeof(self)weakSelf = self;
    //設置消息處理器，處理來自Dart的消息
    [self.messageChannel setMessageHandler:^(NSString* message, FlutterReply reply) {
        reply([NSString stringWithFormat:@"BasicMessageChannel收到：%@",message]);
        [weakSelf sendShow:message];
    }];
}

- (void)initMethodChannel{
    self.methodChannel = [FlutterMethodChannel methodChannelWithName:@"MethodChannelPlugin" binaryMessenger:self.flutterViewController];
    __weak typeof(self)weakSelf = self;
    [self.methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        if ([@"send" isEqualToString:call.method]) {
            result([NSString stringWithFormat:@"MethodChannelPlugin收到：%@",call.arguments]);//返回結果給Dart);
            [weakSelf sendShow:call.arguments];
        }
    }];
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。