Flutter學習筆記(30)--Android原生與Flutter混編

来源:https://www.cnblogs.com/upwgh/archive/2019/11/28/11950392.html

這篇文章旨在學習如何在現有的Android原生項目上集成Flutter,實現Android與Flutter的混編,文章主體內容分為5部分,如下: Android項目如何集成FlutterModule Flutter視圖是如何展示到前臺界面的 Flutter與Weex... ...


如需轉載,請註明出處: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組件的形式集成到項目中我還沒有嘗試過,還在學習的過程中,如果有寫的不對的地方歡迎大佬們留言指證。


您的分享是我們最大的動力!

更多相關文章
  • 1、首先關閉虛擬機點擊編輯虛擬機設置 2、點擊想要擴容的硬碟點擊擴容 3、增加容量 輸入想增加的容量,因為我本身是30G寫到35G是加了5G不是增加30G.(此處為了演示只增加5G) 4、開啟虛擬機 查看虛擬機當前磁碟掛載情況 fdisk -l 5、選擇磁碟 fdisk /dev/sda 6、查看磁 ...
  • 本文參考 https://www.cnblogs.com/CareySon/archive/2011/12/22/2297568.html https://www.jb51.net/softjc/126055.html https://docs.microsoft.com/zh-cn/sql/rel ...
  • 腳本:單實例靜默安裝echo '[GENERAL] RESPONSEFILE_VERSION = "11.2.0" //查看虛擬機的版本,不能更改 OPERATION_TYPE = "createDatabase" [CREATEDATABASE] GDBNAME = "PROD2" //資料庫名字 ...
  • 問題描述:搭建DG的時候,要rman從orcl恢復到orclstd資料庫來,dup複製了半天,結果最後報錯:ORA-17627: ORA-12577: Message 12577 not found; product=RDBMS; facility=ORA網上找了文檔,查到是磁碟被寫滿的問題於是就解 ...
  • MySql的主從複製 sudo docker pull MySQL:5.7 拉取MySQL的鏡像文件(版本號為 5.7) sudo docker run -p 3339:3306 --name master -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7 主數據 ...
  • USE DBNAME --指定要生成數據字典的資料庫 GO SELECT 表名= CASE WHEN a.colorder= 1 THEN d.name ELSE '' END, 表說明= CASE WHEN a.colorder= 1 THEN isnull( f.value, '' ) ELSE ...
  • 生命周期感知組件可以感知其他組件的生命周期,例如 Activity,Fragment等,以便於在組件的生命周期狀態變化時做出相應的操作。支持生命感知的組件可以幫你更好的組織代碼,讓你的代碼更輕,更好維護。 ...
  • 靜態載入好後的界面如下,兩個碎片分別位於一個活動的左邊和右邊: 左邊和右邊分別為一個碎片,這兩個碎片正好將一整個活動佈滿。一個活動當中可以擁有多個碎片,碎片的含義就是可以在同一個UI界面下,將這個界面分成好幾個界面,並且可以分別更新自己的狀態,如果沒有碎片,那麼如果你想要單獨在某一個區域實現活動的“ ...
一周排行
  • FastDBF源代碼地址:https://github.com/SocialExplorer/FastDBF 第一步在解決方案中新建一個類庫的項目:取名為SocialExplorer.FastDBF 第二步:引入FASTDBF的源文件 源代碼可以通過github地址下載引入 源文件:DbfColum ...
  • 目 錄 1. 概述... 2 2. 演示信息... 2 3. 安裝Docker容器... 2 4. 安裝dotnet鏡像... 3 5. 複製iNeuKernel到容器中... 4 6. 進入指定容器... 4 7. 安裝dotnet框架... 4 8. 在Docker容器中運行iNeuKernel ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7699301.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第二個模式--橋接模式,也有叫橋模式的。橋在我們現實生活中經常是連接著A地和B地,再往後來發展,橋引申為一種紐 帶, ...
  • static void AggregateExceptionsDemo() { var task1 = Task.Factory.StartNew(() => { var child1 = Task.Factory.StartNew(() => { throw new CustomException ...
  • http請求在我們實際工作中天天見,為了不重覆造輪子,現在分享一下最近的一次封裝整理,供大家參考,交流,學習! ...
  • 隨著你的 Python 項目越來越多,你會發現不同的項目會需要 不同的版本的 Python 庫。同一個 Python 庫的不同版本可能不相容。虛擬環境可以為每一個項目安裝獨立的 Python 庫,這樣就可以隔離不同項目之間的 Python 庫,也可以隔離項目與操作系統之間的 Python 庫。 1. ...
  • TypeScript 介紹 TypeScript 是什麼 TypeScript 是 JavaScript 的強類型版本。然後在編譯期去掉類型和特有語法,生成純粹的 JavaScript 代碼。由於最終在瀏覽器中運行的仍然是 JavaScript,所以 TypeScript 並不依賴於瀏覽器的支持,也 ...
  • Hello World 新建 並寫入以下內容: 安裝編譯器: 編譯: 修改 文件中的代碼,為 greeter 函數的參數 person 加上類型聲明 : 重新編譯執行。 讓我們繼續修改: 重新編譯,你將看到如下錯誤: 介面(Interface) 類(Class) 變數聲明 作用域 重覆聲明 塊級作用 ...
  • 解構賦值 數組解構 上面的寫法等價於: 利用解構賦值交換變數: 函數參數解構: 解構剩餘參數: 也可以忽略其它參數: 或者跳過解構: 對象解構 示例一: 就像數組解構,你可以用沒有聲明的賦值: 你可以在對象里使用 語法創建剩餘變數: 屬性解構重命名 你也可以給屬性以不同的名字: 註意,這裡的冒號 不 ...
  • 函數 函數參數 參數及返回值類型 可選參數 預設參數 剩餘參數 箭頭函數 基本示例 for of 迴圈 for 迴圈 forEach 不支持 break for in 會把數組當作對象來遍歷 for of 支持 break 類型推斷(Type Inference) 類型相容性 模塊 概念 模塊通信: ...
x