flutter plugin之路:flutter與原生交互傳值OC/java版(二)

  • 系列文章

flutter與原生交互傳值OC/java版(一)
flutter與原生交互傳值OC/java版(二)
四步實(shí)現(xiàn)flutter顯示iOS原生組件OC/java版(三)
四步實(shí)現(xiàn)flutter顯示安卓原生組件OC/java版(三)
本demo的github地址:https://github.com/iBinbro/flutterstudy

上一篇flutter plugin之路:flutter與原生交互傳值OC/java版(一)說道如何使用flutter調(diào)用原生api傳值(值的傳遞流程這樣:flutter->原生->flutter,flutter調(diào)用原生方法,此時(shí)flutter可以傳一個(gè)參數(shù)給原生,然后原生接受flutter的調(diào)用后,再返回一個(gè)值給flutter),這一篇說的是原生如何主動(dòng)傳值給flutter

實(shí)現(xiàn)流程

flutter通過標(biāo)識(shí)監(jiān)聽指定的通道->原生通過這個(gè)通道向flutter發(fā)送信息->flutter通過監(jiān)聽這個(gè)通道獲取原生發(fā)送的信息

實(shí)現(xiàn)目標(biāo),原生每1秒調(diào)用一次方法,自增數(shù)值,然后傳到flutter,再由flutter進(jìn)行顯示

本demo的github地址:https://github.com/iBinbro/flutterstudy
(補(bǔ)充了安卓java版,以O(shè)C為例作為分析,安卓java同理不做敘述了)

一、flutter端的實(shí)現(xiàn)

1.創(chuàng)建TwoCommunicate類(statefulwidget)
2.flutter注冊(cè)監(jiān)聽通道
3.聲明兩個(gè)方法用于處理接收到的數(shù)據(jù)以及異常錯(cuò)誤
4.執(zhí)行監(jiān)聽
5.build方法實(shí)現(xiàn)布局,將返回的數(shù)據(jù)顯示出來

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';

class TwoCommunicate extends StatefulWidget {
  @override
  _TwoCommunicateState createState() => _TwoCommunicateState();
}

class _TwoCommunicateState extends State<TwoCommunicate> {

  //****************原生主動(dòng)調(diào)用flutter****************//
  //存放原生傳給flutter的值
  String _nativeToFlutterString = '';

  //注冊(cè)監(jiān)聽原生通道
  EventChannel eventChannel = EventChannel('http://m.itdecent.cn/p/7dbbd3b4ce32');

  //監(jiān)聽到數(shù)據(jù)后用于處理數(shù)據(jù)的方法,這個(gè)函數(shù)是用于處理接收到原生傳進(jìn)來的數(shù)據(jù)的,可自行定義
  void _receiveFromeNative(Object para){
    print(para);
    setState(() {
      _nativeToFlutterString = para.toString();
    });
  }

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

  @override
  void initState() {
    // TODO: implement initState
    //實(shí)現(xiàn)通道的監(jiān)聽,并傳入兩個(gè)帶有參數(shù)的函數(shù)用于監(jiān)聽到數(shù)據(jù)后 對(duì)數(shù)據(jù)進(jìn)行處理
    eventChannel.receiveBroadcastStream().listen(_receiveFromeNative, onError: _fromNativeError);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('text'),
      ),
      body: Container(
        padding: EdgeInsets.all(32.0),
        child: Center(
          child: Column(
            children: <Widget>[
              //顯示原生傳過來的值
              MaterialButton(
                color: Colors.green,
                child: Text(_nativeToFlutterString),
                onPressed: () {
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

二、原生端iOS OC的實(shí)現(xiàn),
先運(yùn)行下工程,避免打開ios工程缺少文件,然后在工程目錄進(jìn)入ios文件夾,打開Runner.xcworkspace,使用xcode進(jìn)行原生代碼的編寫
#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"

//遵循代理方法
@interface AppDelegate()<FlutterStreamHandler>

@end

@implementation AppDelegate{
    /// 用于主動(dòng)傳值給flutter的橋梁.
    FlutterEventSink _eventSink;
    NSInteger _nativeCount;
}

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    __weak __typeof(self) weakself = self;
    
    FlutterViewController *controller = (FlutterViewController *)self.window.rootViewController;
    
    /**********原生主動(dòng)傳值給flutter-Start**********/
    _nativeCount = 0;
    
    NSLog(@"原生實(shí)現(xiàn) 原生傳值給flutter的通道標(biāo)識(shí)");
    FlutterEventChannel *eventChannel = [FlutterEventChannel eventChannelWithName:@"http://m.itdecent.cn/p/7dbbd3b4ce32" binaryMessenger:controller];
    //設(shè)置代理
    [eventChannel setStreamHandler:self];
    
    /**********原生主動(dòng)傳值給flutter-End**********/
    
    
    
  [GeneratedPluginRegistrant registerWithRegistry:self];
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

/**********原生主動(dòng)傳值給flutter-Start**********/
//flutter開始進(jìn)行監(jiān)聽,并在此方法傳入 原生主動(dòng)傳值給flutter的橋梁 event
- (FlutterError *)onListenWithArguments:(id)arguments eventSink:(FlutterEventSink)events{
    NSLog(@"flutter開始進(jìn)行監(jiān)聽,并在此方法傳入 原生主動(dòng)傳值給flutter的橋梁 event");
    _eventSink = events;
    
    [self repeatAddNativeCount];
    
    return nil;
}

//翻了下官方文檔 Invoked when the last listener is deregistered from the Stream associated to this channel on the Flutter side. 大致意思是stream關(guān)聯(lián)的這個(gè)通道監(jiān)聽器取消后調(diào)用,找了下flutter的dart代碼,沒取消監(jiān)聽的方法 后面再說吧 待解
- (FlutterError *)onCancelWithArguments:(id)arguments{
    _eventSink = nil;
    return nil;
}

- (void)repeatAddNativeCount{
    NSLog(@"重復(fù)傳值執(zhí)行");
    _nativeCount++;
    //通過橋梁傳值
    if (_eventSink) {
        _eventSink(@(_nativeCount));
    }
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self repeatAddNativeCount];
    });
}

/**********原生主動(dòng)傳值給flutter-Start**********/

@end

效果圖


image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容