Flutter中嵌入Android 原生TextView實例教程

更新時間：2020年09月20日 10:40:29 作者：早起的年輕人

這篇文章主要給大家介紹了關于Flutter中嵌入Android 原生TextView的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

本篇文章中寫到的是 flutter 調用了Android 原生的 TextView 案例

添加原生組件的流程基本上可以描述為：

1 android 端實現原生組件PlatformView提供原生view

2 android 端創(chuàng)建PlatformViewFactory用于生成PlatformView

3 android 端創(chuàng)建FlutterPlugin用于注冊原生組件

4 flutter 平臺嵌入原生view

1 創(chuàng)建原生組件

創(chuàng)建在fLutter工程時會生成幾個文件夾，lib是放flutter工程代碼，android和ios文件夾分別是對應的雙平臺的原生工程。

在這里直接打開Android工程目錄，項目默認生成了GeneratedPluginRegistrant和MainActivity兩個文件，GeneratedPluginRegistrant不要動，GeneratedPluginRegistrant是flutter中配制使用其他插件時，程序在編譯時自動進行插件注冊使用的類。

在MainActivity的包下新建自定義View，Flutter的原生View不能直接繼承自View，需要實現提供的PlatformView接口：

public class TestTextView implements PlatformView r{
	
	private final TextView mTestTextView;
	
	/**
	 * 
	 * @param context
	 * @param messenger
	 * @param id
	 * @param params 初始化時 flutter 傳遞過來的參數
	 */
	TestTextView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
		//創(chuàng)建 TextView
		TextView lTextView = new TextView(context);
		lTextView.setText("Android的原生TextView");
		this.mTestTextView = lTextView;
		
		//flutter 傳遞過來的參數
		if (params!=null&&params.containsKey("content")) {
			String myContent = (String) params.get("content");
			lTextView.setText(myContent);
		}
	}
	
	@Override
	public View getView() {
		return mTestTextView;
	}
	
	@Override
	public void dispose() {
	
	}
	
}

2 創(chuàng)建PlatformViewFactory

import android.content.Context;
import java.util.Map;
import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.StandardMessageCodec;
import io.flutter.plugin.platform.PlatformView;
import io.flutter.plugin.platform.PlatformViewFactory;

public class TestViewFactory extends PlatformViewFactory {
	private final BinaryMessenger messenger;
	public TestViewFactory(BinaryMessenger messenger) {
		super(StandardMessageCodec.INSTANCE);
		this.messenger = messenger;
	}
	
	/**
	 * 
	 * @param context
	 * @param id
	 * @param args args是由Flutter傳過來的自定義參數
	 * @return
	 */
	@SuppressWarnings("unchecked")
	@Override
	public PlatformView create(Context context, int id, Object args) {
		//flutter 傳遞過來的參數
		Map<String, Object> params = (Map<String, Object>) args;
		//創(chuàng)建 TestTextView
		return new TestTextView(context, messenger, id, params);
		
	}

3 創(chuàng)建Plugin并在ManActivity中注冊插件

/**
 * flutter 調用 android 原生view
 *
 */
public class TestFluttertoAndroidTextViewPlugin {
	public static void registerWith(PluginRegistry registry) {
		//防止多次注冊
		final String key = TestFluttertoAndroidTextViewPlugin.class.getCanonicalName();
		if (registry.hasPlugin(key)) return;
		//初始化 PluginRegistry
		PluginRegistry.Registrar registrar = registry.registrarFor(key);
		//設置標識
		registrar.platformViewRegistry().registerViewFactory("com.flutter_to_native_test_textview", new TestViewFactory(registrar.messenger()));
	}
}

MainActivity 中注冊

import android.os.Bundle

import io.flutter.app.FlutterActivity
import io.flutter.plugins.FlutterToAndroidPlugins
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterActivity() {
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 //flutter 項目工程中默認生成的 
 GeneratedPluginRegistrant.registerWith(this)
 //這是我們新創(chuàng)建的插件
 TestFluttertoAndroidTextViewPlugin.registerWith(this)
 
 }

 override fun onDestroy() {
 super.onDestroy()

 }
}

4 flutter頁面中嵌入android 原生Textview

4.1 最簡單的調用

//這里設置的 viewType值與 android 中插件注冊的標識 一至
//registrar.platformViewRegistry().registerViewFactory("com.flutter_to_native_test_textview", new TestViewFactory(registrar.messenger()));
mTextWidget = Container(
 height: 200,
 child: AndroidView(
 	//設置標識 
  viewType: "com.flutter_to_native_test_textview",
  ),
 );

@override
 Widget build(BuildContext context) {
 // TODO: implement build
 return Scaffold(
  appBar: appBar,
  //顯示的頁面
  body: mTextWidget,
 );
 }

4.2 flutter 調用原生view并傳參數

   mTextWidget = Container(
   height: 200,
   child: AndroidView(
    //標識
    viewType: "com.flutter_to_native_test_textview",
    creationParams: {
    "content": "flutter 傳入的文本內容",
    },
    //參數的編碼方式
    creationParamsCodec: const StandardMessageCodec(),
   ),
   );

android 原生中的接收（只會接收一次）

... ...	

TestTextView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
		... ..
		//flutter 傳遞過來的參數
		if (params!=null&&!params.isEmpty()&&params.containsKey("content")) {
			String myContent = (String) params.get("content");
			lTextView.setText(myContent);
		}

	... ...
	}

4.3 flutter 更新原生view 中的數據

原生組件初始化的參數并不會隨著setState重復賦值，可以通過MethodCall來實現更新數據。

首先讓原生view組件實現MethodCallHandler接口：

public class TestTextView implements PlatformView , MethodChannel.MethodCallHandler{
	
	private final TextView mTestTextView;
	
	TestTextView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
		
		... ...
		
		//com.flutter_to_native_test_view_ 是更新數據的通信標識
		MethodChannel methodChannel = new MethodChannel(messenger, "com.flutter_to_native_test_textview_" + id);
		methodChannel.setMethodCallHandler(this);
	}
	
	... ...
	
	@Override
	public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {

  //updateText 是flutter 中調用的方法名稱，可以隨意定義
		if ("updateText".equals(methodCall.method)) {
			String text = (String) methodCall.arguments;
			this.mTestTextView .setText(text);
			//對flutter 的回調
			result.success(null);
		}
	}
}

flutter 中調用 android 原生view

 MethodChannel _channel;
 int viewId=0;

   mTextWidget = Container(
   height: 200,
   child: AndroidView(
    //標識
    viewType: "com.flutter_to_native_test_textview",
    creationParams: {
    "content": "flutter 傳入的文本內容",
    },
    //參數的編碼方式
    creationParamsCodec: const StandardMessageCodec(),
    //view創(chuàng)建完成時的回調
    onPlatformViewCreated: (id) {
    viewId = id;
    },
   ),
   );

更新數據

//這里設置的標識 MethodChannel('com.flutter_to_native_test_textview_$viewId');
// 與android MethodChannel methodChannel = new MethodChannel(messenger, "com.flutter_to_native_test_textview_" + id); 中注冊的一至
void clickUpdtae(){
_channel = new MethodChannel('com.flutter_to_native_test_textview_$viewId');
 updateTextView();
}

//這里的標識 updateText
//與android 中接收消息的方法中
//if ("updateText".equals(methodCall.method)) {...} 一至
void updateTextView() async {
 return _channel.invokeMethod('updateText', "更新內容");
 }

通過onPlatformViewCreated回調，監(jiān)聽原始組件成功創(chuàng)建，并能夠在回調方法的參數中拿到當前組件的id，這個id是系統(tǒng)隨機分配的，然后通過這個分配的id加上我們的組件名稱最為前綴創(chuàng)建一個和組件通訊的MethodChannel，拿到channel對象之后就可以通過invokeMethod方法向原生組件發(fā)送消息了，這里這里調用的是‘updateText'這個方法，參數是一個String

總結

到此這篇關于Flutter中嵌入Android 原生TextView實例教程的文章就介紹到這了,更多相關Flutter嵌入Android 原生TextView內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Android Notification的多種用法總結
這篇文章主要介紹了Android Notification的多種用法總結的相關資料,需要的朋友可以參考下
2017-06-06
Android仿支付寶微信支付密碼界面彈窗封裝dialog
這篇文章主要介紹了Android仿支付寶微信支付密碼界面彈窗封裝dialog的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
Android ListView和Adapter數據適配器的簡單介紹
這篇文章主要介紹了Android ListView和Adapter數據適配器的簡單介紹，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
Android獲取實時連接熱點的設備IP
這篇文章主要介紹了Android獲取實時連接熱點的設備IP 的相關資料,文中給大家補充介紹了安卓獲取接入的Wifi熱點設備的Ip地址的代碼，需要的朋友可以參考下
2018-01-01
AndroidStudio修改Code Style來格式化自定義標簽的xml文件方式
這篇文章主要介紹了AndroidStudio修改Code Style來格式化自定義標簽的xml文件方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-03-03
Android編程獲取圖片和視頻縮略圖的方法
這篇文章主要介紹了Android編程獲取圖片和視頻縮略圖的方法,結合實例形式分析了Android圖形圖像處理所涉及的常用函數與使用技巧,需要的朋友可以參考下
2016-04-04
Android超詳細講解組件AdapterView的使用
AdapterView組件是一組重要的組件，AdapterView本身是一個抽象基類，它派生的子類在用法上十分相似，從AdapterView派生出的三個子類：AdsListView、AdsSpinner、AdapterViewAnimator，這3個子類依然是抽象的，實際運用時需要它們的子類
2022-03-03
Android用tabhost實現界面切換,每個界面為一個獨立的activity操作
這篇文章主要介紹了Android用tabhost實現界面切換,每個界面為一個獨立的activity操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
OpenGL Shader實現物件材料效果詳解
在一些主流app上有一些比較特殊的濾鏡效果，例如灰塵、塑料封面、光影效果等，這些其實是紋理疊加的效果。本文將用OpenGL Shader實現這些效果，需要的可以參考一下
2022-02-02
Android TabLayout 實現底部Tab的示例代碼
本篇文章主要介紹了Android TabLayout 實現底部Tab的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01