Flutter學習筆記（30）--Android原生與Flutter混編

如需轉載，請註明出處：Flutter學習筆記（30）--Android原生與Flutter混編

 這篇文章旨在學習如何在現有的Android原生項目上集成Flutter，實現Android與Flutter的混編，文章主體內容分爲5部分，以下：

• Android項目如何集成FlutterModule

• Flutter視圖是如何展現到前臺界面的

• Flutter與Weex對比

• 如何進行原生頁面跳轉到Flutter頁面

• 原生如何與Flutter進行傳值通訊（以EventChannel爲例說明）

接下來我會按照上面列出來的5點，逐一的進行實例講解說明

1.Android項目如何集成FlutterModule

Android原生項目集成Flutter有兩種方式，一種是在原生項目內集成FlutterModule，還有一種是將FLutter項目打包成arr文件，而後以組件的形式被原生項目依賴。這裏咱們就只說一下在原生項目內集成FlutterModule。

第一步：在主工程下建立FlutterModule，File->New->New Flutter Project，而後選擇Flutter Module點擊Next。

 設置完成以後點擊Finish，建立完module後咱們來看一下工程的目錄結構

 第二步：在app下的build.gradle添加依賴

   
    //在android下添加jdk1.8支持
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }


    //在dependencies下添加flutter依賴
    implementation project(':flutter')
    implementation 'android.arch.lifecycle:runtime:1.1.0'
    implementation 'android.arch.lifecycle:extensions:1.1.0'

第三步：在根目錄下的settings.gradle添加配置

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

 最後同步一下，將相關的依賴下載下來，至此就成功集成了FlutterModule了。

2.Flutter視圖是如何展現到前臺界面的

其實Flutter視圖是以View的形式添加到原生頁面中的，這個和weex很像，簡單的來講就是咱們首先要經過某一個方法來建立一個Flutter的視圖，而後在原生的Activity中建立一個容器，這個容器的做用就是來裝載咱們Flutter的視圖，最後咱們將Flutter的View添加到容器裏面就能夠了。接下來咱們看一下實現的代碼。

package com.example.flutterdemo;

import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import io.flutter.facade.Flutter;
import io.flutter.view.FlutterView;

public class MyFlutterActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);
        //建立一個FlutterView
        final FlutterView flutterView = Flutter.createView(this, getLifecycle(), "route1");
        //實例化容器
        final FrameLayout layout = findViewById(R.id.flutter_container);
        //將FlutterView添加到容器中去
        layout.addView(flutterView);
        //解決原生頁面跳轉Flutter頁面黑屏的問題（原理就是先讓界面隱藏，等第一幀繪製完成後，再讓他顯示出來）
        final FlutterView.FirstFrameListener[] listeners = new FlutterView.FirstFrameListener[1];
        listeners[0] = new FlutterView.FirstFrameListener() {
            @Override
            public void onFirstFrame() {
                layout.setVisibility(View.VISIBLE);
            }
        };
        flutterView.addFirstFrameListener(listeners[0]);
    }
}

xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <FrameLayout
        android:id="@+id/flutter_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>
</LinearLayout>

特別說一下建立Flutter視圖這一塊Flutter.createView(this, getLifecycle(), "route1");，createView中傳了3個參數，前兩個就不說了，重點說一下最後一個參數，最後一個參數你們能夠理解爲原生跳轉到第一個Flutter頁面的路由，可能有的人仍是不理解是什麼意思，我舉一個例子來講明一下就會理解了。

一般咱們的Flutter頁面確定不止一個，也許有不少狀況下，原生要跳轉到不一樣的Flutter頁面，可是咱們Flutter的入口只有這一個，那麼咱們要如何跳轉到指定的Flutter頁面呢？這時候createView的最後一個參數就發揮做用，由於咱們在Flutter工程的main入口，能夠獲取到這個參數，進而咱們就能夠根據這個參數來跳轉到不一樣的Flutter頁面了。看一下Flutter的代碼感覺一下。

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

Widget _MainEntrance(String defaultRouteName) {
  print(defaultRouteName);
  switch (defaultRouteName){
    case 'flutter_main':
      return new Center(
        child: SettingPage(),
      );
    case 'other':
      return new Center(
        child: defaultPage(),
      );
  }
}

window.defaultRouteName這個方法會獲取到原生中createView傳遞過來的第三個參數，咱們能夠經過一個switch語句來控制不一樣的路由來跳轉到不一樣的頁面。即：第三個參數爲flutter_main跳轉到設置頁面。第三個參數爲other跳轉到默認頁面。

3.Flutter與Weex對比

在上面第2條咱們說到了原生加載Flutter視圖和Weex很像，那麼weex又是怎樣的呢？

在weex中，也是須要咱們來建立一個原生的容器用來裝載weex的view視圖，如咱們新建一個WeexActivity實現IWXRenderListener，重寫onViewCreated，在onViewCreated中系統會返回給咱們一個建立好的weex的view，咱們須要作的只須要將這個view添加到原生的容器中便可。

總的來講很像是由於Flutter和Weex對於Android或者iOS來講都是透明的，平臺只會認爲整個Flutter展現的內容是一個view，因此，Flutter視圖都是以view的形式來添加到咱們的原生項目中。

4.如何進行原生頁面跳轉到Flutter頁面

這塊就很簡單了，前面咱們已經說了，Flutter頁面是以view的形式添加到咱們的原生項目中的，那麼我想要跳轉到Flutter頁面就只須要跳轉到這個容器就行了

package com.example.flutterdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.mButton).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setClass(MainActivity.this, MyFlutterActivity.class);
                startActivity(intent);
            }
        });
    }
}

xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/mButton"
        android:layout_width="200dp"
        android:layout_height="50dp"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

5.原生如何與Flutter進行傳值通訊（以EventChannel爲例說明）

在上一篇博客中咱們有講過原生與Flutter通訊的三種方式，這裏我再說一下EventChannel通訊。

EventChannel是單向的通訊方式，即只能經過原生向Flutter發起通訊。

（1）原生髮起通訊

new EventChannel(flutterView,"NATIVE/HMLT/Channel/Setting").setStreamHandler(new EventChannel.StreamHandler() {
    @Override
    public void onListen(Object o, EventChannel.EventSink eventSink) {
        eventSink.success( SharedPreferenceUtil.getToken(context));
    }

    @Override
    public void onCancel(Object o) {

    }
});

其中onCancel表明對面再也不接收，這裏咱們應該作一些clean up的事情。而 onListen則表明通道已經建好，Native能夠發送數據了。注意onListen裏帶的EventSink這個參數，後續Native發送數據都是通過EventSink的。

（2）在Flutter中註冊監聽

//註冊監聽原生通道
EventChannel eventChannel = EventChannel('NATIVE/HMLT/Channel/Setting');

（3）在Flutter中重寫initState併發起通訊請求

void initState() {
  //實現通道的監聽，並傳入兩個帶有參數的函數用於監聽到數據後 對數據進行處理
  eventChannel.receiveBroadcastStream().listen(_receiveFromeNative, onError: _fromNativeError);
  super.initState();
}

（4）監聽到通訊數據後進行成功或失敗的處理

void _receiveFromeNative(Object para){
  print(para);
  setState(() {
    _nativeToFlutterHMToken = para.toString();
    print("原生界面數據" + _nativeToFlutterHMToken);
  });
}

//原生返回錯誤信息
void _fromNativeError(Object error){
  print(error);
}

總結：以上就是Android與Flutter混編的所有內容了，總體就分爲4部分，1.建立FlutterModule，2.建立Flutter視圖容器，3.原生跳轉到Flutter頁面，4.原生與FLutter進行通訊。以arr組件的形式集成到項目中我尚未嘗試過，還在學習的過程當中，若是有寫的不對的地方歡迎大佬們留言指證。