如何在Flutter中嵌套Android布局
效果
本文具體demo效果如下
開發(fā)
1.首先創(chuàng)建flutter項(xiàng)目,在項(xiàng)目中定義好flutter需要展示布局:
@override Widget build(BuildContext context) { return Scaffold( body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Expanded( child: Center( child: Text( 'Android按鈕點(diǎn)擊了 $_counter 次', style: const TextStyle(fontSize: 17.0)), ), ), Container( padding: const EdgeInsets.only(bottom: 15.0, left: 5.0), child: Row( children: <Widget>[ Image.asset('assets/flutter-mark-square-64.png', scale: 1.5), const Text('Flutter', style: TextStyle(fontSize: 30.0)), ], ), ), ], ), floatingActionButton: FloatingActionButton( onPressed: _sendFlutterIncrement, child: const Icon(Icons.add), ), ); }
上述代碼所呈現(xiàn)的布局就是效果圖中Flutter那一部分(上半部分),設(shè)置FloatingActionButton是為了呈現(xiàn)Flutter與Android的交互過程, "Android按鈕點(diǎn)擊了 $_counter 次"呈現(xiàn)的是交互結(jié)果,Image.asset()則顯示的是Flutter的logo(標(biāo)記這是flutter中的布局)。之所以這樣做是因?yàn)镕lutter與Android頁面相互嵌套通產(chǎn)伴隨著數(shù)據(jù)交互。
2.創(chuàng)建Android中的布局:
<io.flutter.embedding.android.FlutterView android:id="@+id/flutter_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:background="@color/grey" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/button_tap" android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/button_tap" ... /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/android" ... /> </LinearLayout> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" ... /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
io.flutter.embedding.android.FlutterView就是需要展示的flutter布局也就是第一步中編寫的布局,剩下的部分和第一步的邏輯是一樣的,有用來展示交互結(jié)果的TextView(@+id/button_tap),標(biāo)記Android頁面的TextView(@string/android),用來交互的按鈕FloatingActionButton。
3.定義通信渠道
Flutter:
static const String _channel = 'increment'; static const String _pong = 'pong'; static const String _emptyMessage = ''; static const BasicMessageChannel<String> platform = BasicMessageChannel<String>(_channel, StringCodec()); int _counter = 0; @override void initState() { super.initState(); platform.setMessageHandler(_handlePlatformIncrement); } Future<String> _handlePlatformIncrement(String message) async { setState(() { _counter++; }); return _emptyMessage; } void _sendFlutterIncrement() { platform.send(_pong); }
代碼中通信渠道使用的是BasicMessageChannel,沒有用MethodChannel和EventChannel是因?yàn)锽asicMessageChannel可以隨時(shí)隨地進(jìn)行任何通信,而另外兩種則各自有各自的局限性,這里就不做解釋了,稍后會(huì)有文章專門介紹這三種通信渠道。_channel 是通信渠道的名稱,這個(gè)是唯一且固定的,一旦定義好,Android端也要使用相同的名稱,否則兩者無法對(duì)接,導(dǎo)致通信失敗。_pong是Flutter向Android傳遞的消息內(nèi)容,Android每次接收的內(nèi)容為"pong",相應(yīng)的Flutter按鈕點(diǎn)擊次數(shù)就+1,消息內(nèi)容和類型用戶都可以自定義,只要定義好BasicMessageChannel的泛型和消息編碼機(jī)制(文中使用的是StringCodec)即可。如果消息的內(nèi)容比較多,開發(fā)者可以使用Json進(jìn)行消息傳遞。_counter是flutter接收Android按鈕的點(diǎn)擊次數(shù),Android按鈕每點(diǎn)擊一次_counter就+1。相關(guān)變量或常量定義完后,開發(fā)者需要在initState()中進(jìn)行消息接收處理,因?yàn)锽asicMessageChannel是雙向通信,platform.setMessageHandler(_handlePlatformIncrement)就是對(duì)接收到的消息進(jìn)行處理,_handlePlatformIncrement方法說明了消息的類型是String,消息是異步,_counter+1后調(diào)用setState()刷新布局后相應(yīng)展示的Android按鈕點(diǎn)擊次數(shù)就+1了。platform.send(_pong)就是Flutter按鈕點(diǎn)擊完后調(diào)用這個(gè)方法,然后BasicMessageChannel將消息發(fā)送到Android。
Android:
private static FlutterEngine flutterEngine; private FlutterView flutterView; private int counter; private static final String CHANNEL = "increment"; private static final String EMPTY_MESSAGE = ""; private static final String PING = "ping"; private BasicMessageChannel<String> messageChannel; ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (flutterEngine == null) { flutterEngine = new FlutterEngine(this, args); flutterEngine.getDartExecutor().executeDartEntrypoint( DartEntrypoint.createDefault() ); } ... flutterView = findViewById(R.id.flutter_view); flutterView.attachToFlutterEngine(flutterEngine); messageChannel = new BasicMessageChannel<>(flutterEngine.getDartExecutor(), CHANNEL, StringCodec.INSTANCE); messageChannel. setMessageHandler(new MessageHandler<String>() { @Override public void onMessage(String s, Reply<String> reply) { onFlutterIncrement(); reply.reply(EMPTY_MESSAGE); } }); FloatingActionButton fab = findViewById(R.id.button); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { sendAndroidIncrement(); } }); ...
CHANNEL 是通信渠道的名稱也是渠道的標(biāo)識(shí)符,一定要和flutter統(tǒng)一,否則無法通信。BasicMessageChannel是通信渠道,如果使用了和flutter端不一樣的,也是無法通信的。EMPTY_MESSAGE是Android端收到Flutter消息后給Flutter的回復(fù),表示讓Flutter知道Android收到消息了。Android端收到消息后在setMessageHandler中進(jìn)行消息處理:將flutter點(diǎn)擊按鈕次數(shù)+1( onFlutterIncrement()),同時(shí)回復(fù)確認(rèn)收到的消息(reply.reply(EMPTY_MESSAGE))。FloatingActionButton發(fā)生點(diǎn)擊事件后調(diào)用sendAndroidIncrement方法就會(huì)向Flutter發(fā)送消息說自己點(diǎn)擊了一次按鈕:
private void sendAndroidIncrement() { messageChannel.send(PING); }
PING就是Android向Flutter發(fā)送的消息內(nèi)容,F(xiàn)lutter收到消息后就對(duì)Android點(diǎn)擊按鈕次數(shù)+1。如果傳遞的消息比較多,還需要對(duì)具體的消息進(jìn)行判斷來確認(rèn)需要做哪些處理,本文中只傳遞一種內(nèi)容的消息,所以對(duì)消息的參數(shù)和方法沒有做判斷。代碼中flutterView即是需要展示的Flutter布局,flutterEngine則是flutter引擎(說法不統(tǒng)一), flutterView.attachToFlutterEngine(flutterEngine)則是為flutterView注入生命和能量,否則flutterView就是空空沒有生命和內(nèi)容的控件。flutterEngine和AppCompatActivity的生命周期是綁定在一起:
@Override protected void onResume() { super.onResume(); flutterEngine.getLifecycleChannel().appIsResumed(); } @Override protected void onPause() { super.onPause(); flutterEngine.getLifecycleChannel().appIsInactive(); } @Override protected void onStop() { super.onStop(); flutterEngine.getLifecycleChannel().appIsPaused(); } @Override protected void onDestroy() { flutterView.detachFromFlutterEngine(); super.onDestroy(); }
Android中一旦出現(xiàn)了對(duì)生命周期的綁定,就是說只要按要求來,就不會(huì)出現(xiàn)亂七八糟的問題,即使有問題也不是它的問題。
總結(jié)
- Flutter與Android的交互在不斷迭代中已經(jīng)變得比較完善,最新Flutter版本中已經(jīng)比Flutter早期的版中簡單很多。
- 如果能避免Flutter與Android的相互嵌套就盡量避免,因?yàn)閮烧叩那短缀芎哪埽赡艹霈F(xiàn)卡頓、死機(jī)、高耗電等問題。
說明
有些代碼展示不全,詳情請查看demo。
以上就是如何在Flutter中嵌套Android布局的詳細(xì)內(nèi)容,更多關(guān)于Flutter中嵌套Android布局的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android設(shè)置Activity背景為透明style的簡單方法(必看)
下面小編就為大家?guī)硪黄狝ndroid設(shè)置Activity背景為透明style的簡單方法(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10Android實(shí)現(xiàn)淘寶選中商品尺寸的按鈕組實(shí)例
這篇文章介紹的是仿淘寶中的選中商品不同尺寸,比如衣服有L、M、XL等等的款式。這時(shí)候我們就需要一個(gè)button組來進(jìn)行了,當(dāng)時(shí)這個(gè)時(shí)候里面的尺寸可能有很多,那怎么辦呢?這里我們就肯定要做個(gè)自適應(yīng)的按鈕組了,要不然弄出來也沒用。2016-08-08Android studio實(shí)現(xiàn)簡單的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Android studio實(shí)現(xiàn)簡單的計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03Android編程實(shí)現(xiàn)壓縮圖片并加載顯示的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)壓縮圖片并加載顯示的方法,涉及Android開發(fā)中圖片的運(yùn)算、壓縮處理操作及界面布局顯示壓縮圖片等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10Android用ListView顯示SDCard文件列表的小例子
本文簡單實(shí)現(xiàn)了用ListView顯示SDCard文件列表,目錄的回退等功能暫不討論,獲取文件列表,files即為所選擇目錄下的所有文件列表2013-11-11Android實(shí)現(xiàn)兩圓點(diǎn)之間來回移動(dòng)加載進(jìn)度
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)兩圓點(diǎn)之間來回移動(dòng)加載進(jìn)度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Android實(shí)現(xiàn)截圖分享qq 微信功能
在日常生活中,經(jīng)常用到qq,微信截圖分享功能,今天小編通過本文給大家介紹Android實(shí)現(xiàn)截圖分享qq 微信功能,具體實(shí)現(xiàn)代碼大家參考下本文2017-12-12Flutter?Widget之FutureBuilder使用示例詳解
這篇文章主要為大家介紹了Flutter?Widget之FutureBuilder使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11