這篇文章主要介紹了如何在Flutter中嵌套Android布局的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇如何在Flutter中嵌套Android布局文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為甘孜州企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作,甘孜州網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。本文具體demo效果如下
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的交互過(guò)程, "Android按鈕點(diǎn)擊了 $_counter 次"呈現(xiàn)的是交互結(jié)果,Image.asset()則顯示的是Flutter的logo(標(biāo)記這是flutter中的布局)。之所以這樣做是因?yàn)镕lutter與Android頁(yè)面相互嵌套通產(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布局也就是第一步中編寫(xiě)的布局,剩下的部分和第一步的邏輯是一樣的,有用來(lái)展示交互結(jié)果的TextView(@+id/button_tap),標(biāo)記Android頁(yè)面的TextView(@string/android),用來(lái)交互的按鈕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,沒(méi)有用MethodChannel和EventChannel是因?yàn)锽asicMessageChannel可以隨時(shí)隨地進(jìn)行任何通信,而另外兩種則各自有各自的局限性,這里就不做解釋了,稍后會(huì)有文章專(zhuān)門(mén)介紹這三種通信渠道。_channel 是通信渠道的名稱(chēng),這個(gè)是且固定的,一旦定義好,Android端也要使用相同的名稱(chēng),否則兩者無(wú)法對(duì)接,導(dǎo)致通信失敗。_pong是Flutter向Android傳遞的消息內(nèi)容,Android每次接收的內(nèi)容為"pong",相應(yīng)的Flutter按鈕點(diǎn)擊次數(shù)就+1,消息內(nèi)容和類(lèi)型用戶都可以自定義,只要定義好BasicMessageChannel的泛型和消息編碼機(jī)制(文中使用的是StringCodec)即可。如果消息的內(nèi)容比較多,開(kāi)發(fā)者可以使用Json進(jìn)行消息傳遞。_counter是flutter接收Android按鈕的點(diǎn)擊次數(shù),Android按鈕每點(diǎn)擊一次_counter就+1。相關(guān)變量或常量定義完后,開(kāi)發(fā)者需要在initState()中進(jìn)行消息接收處理,因?yàn)锽asicMessageChannel是雙向通信,platform.setMessageHandler(_handlePlatformIncrement)就是對(duì)接收到的消息進(jìn)行處理,_handlePlatformIncrement方法說(shuō)明了消息的類(lèi)型是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 是通信渠道的名稱(chēng)也是渠道的標(biāo)識(shí)符,一定要和flutter統(tǒng)一,否則無(wú)法通信。BasicMessageChannel是通信渠道,如果使用了和flutter端不一樣的,也是無(wú)法通信的。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ā)送消息說(shuō)自己點(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)行判斷來(lái)確認(rèn)需要做哪些處理,本文中只傳遞一種內(nèi)容的消息,所以對(duì)消息的參數(shù)和方法沒(méi)有做判斷。代碼中flutterView即是需要展示的Flutter布局,flutterEngine則是flutter引擎(說(shuō)法不統(tǒng)一), flutterView.attachToFlutterEngine(flutterEngine)則是為flutterView注入生命和能量,否則flutterView就是空空沒(méi)有生命和內(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ì)生命周期的綁定,就是說(shuō)只要按要求來(lái),就不會(huì)出現(xiàn)亂七八糟的問(wèn)題,即使有問(wèn)題也不是它的問(wèn)題。
關(guān)于“如何在Flutter中嵌套Android布局”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“如何在Flutter中嵌套Android布局”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文標(biāo)題:如何在Flutter中嵌套Android布局-創(chuàng)新互聯(lián)
路徑分享:http://muchs.cn/article36/cecgpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容