美文网首页Flutter 快速查看手册Flutter开发圈
flutter plugin之路:flutter与原生交互传值O

flutter plugin之路:flutter与原生交互传值O

作者: 帅气的阿斌 | 来源:发表于2019-02-12 15:42 被阅读1次
    上一篇flutter plugin之路:flutter与原生交互传值OC/java版(一)说道如何使用flutter调用原生api传值(值的传递流程这样:flutter->原生->flutter,flutter调用原生方法,此时flutter可以传一个参数给原生,然后原生接受flutter的调用后,再返回一个值给flutter),这一篇说的是原生如何主动传值给flutter

    实现流程

    flutter通过标识监听指定的通道->原生通过这个通道向flutter发送信息->flutter通过监听这个通道获取原生发送的信息

    实现目标,原生每1秒调用一次方法,自增数值,然后传到flutter,再由flutter进行显示

    本demo的github地址:https://github.com/iBinbro/flutterstudy
    (补充了安卓java版,以OC为例作为分析,安卓java同理不做叙述了)

    一、flutter端的实现

    1.创建TwoCommunicate类(statefulwidget)
    2.flutter注册监听通道
    3.声明两个方法用于处理接收到的数据以及异常错误
    4.执行监听
    5.build方法实现布局,将返回的数据显示出来

    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> {
    
      //****************原生主动调用flutter****************//
      //存放原生传给flutter的值
      String _nativeToFlutterString = '';
    
      //注册监听原生通道
      EventChannel eventChannel = EventChannel('https://www.jianshu.com/p/7dbbd3b4ce32');
    
      //监听到数据后用于处理数据的方法,这个函数是用于处理接收到原生传进来的数据的,可自行定义
      void _receiveFromeNative(Object para){
        print(para);
        setState(() {
          _nativeToFlutterString = para.toString();
        });
      }
    
      //原生返回错误信息
      void _fromNativeError(Object error){
        print(error);
      }
    
      @override
      void initState() {
        // TODO: implement initState
        //实现通道的监听,并传入两个带有参数的函数用于监听到数据后 对数据进行处理
        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的实现,
    先运行下工程,避免打开ios工程缺少文件,然后在工程目录进入ios文件夹,打开Runner.xcworkspace,使用xcode进行原生代码的编写
    #include "AppDelegate.h"
    #include "GeneratedPluginRegistrant.h"
    
    //遵循代理方法
    @interface AppDelegate()<FlutterStreamHandler>
    
    @end
    
    @implementation AppDelegate{
        /// 用于主动传值给flutter的桥梁.
        FlutterEventSink _eventSink;
        NSInteger _nativeCount;
    }
    
    - (BOOL)application:(UIApplication *)application
        didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        
        __weak __typeof(self) weakself = self;
        
        FlutterViewController *controller = (FlutterViewController *)self.window.rootViewController;
        
        /**********原生主动传值给flutter-Start**********/
        _nativeCount = 0;
        
        NSLog(@"原生实现 原生传值给flutter的通道标识");
        FlutterEventChannel *eventChannel = [FlutterEventChannel eventChannelWithName:@"https://www.jianshu.com/p/7dbbd3b4ce32" binaryMessenger:controller];
        //设置代理
        [eventChannel setStreamHandler:self];
        
        /**********原生主动传值给flutter-End**********/
        
        
        
      [GeneratedPluginRegistrant registerWithRegistry:self];
      // Override point for customization after application launch.
      return [super application:application didFinishLaunchingWithOptions:launchOptions];
    }
    
    /**********原生主动传值给flutter-Start**********/
    //flutter开始进行监听,并在此方法传入 原生主动传值给flutter的桥梁 event
    - (FlutterError *)onListenWithArguments:(id)arguments eventSink:(FlutterEventSink)events{
        NSLog(@"flutter开始进行监听,并在此方法传入 原生主动传值给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关联的这个通道监听器取消后调用,找了下flutter的dart代码,没取消监听的方法 后面再说吧 待解
    - (FlutterError *)onCancelWithArguments:(id)arguments{
        _eventSink = nil;
        return nil;
    }
    
    - (void)repeatAddNativeCount{
        NSLog(@"重复传值执行");
        _nativeCount++;
        //通过桥梁传值
        if (_eventSink) {
            _eventSink(@(_nativeCount));
        }
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self repeatAddNativeCount];
        });
    }
    
    /**********原生主动传值给flutter-Start**********/
    
    @end
    

    效果图


    image.png

    相关文章

      网友评论

        本文标题:flutter plugin之路:flutter与原生交互传值O

        本文链接:https://www.haomeiwen.com/subject/yxjkeqtx.html