Flutter和原生iOS交互

作者: GA_ | 来源:发表于2018-10-31 11:19 被阅读13次

    具体集成请看下面文章
    此篇记录的是集成之后的iOS界面和flutter的交互,iOS界面怎么跳转到不同的flutter界面。

    老项目集成Flutter中文文档
    老项目集成Flutter详细一篇
    老项目集成Flutter详细另一篇
    老项目集成Flutter闲鱼一篇
    github flutter

    flutter主动和iOS交互

    flutter MyApp界面里
    1、flutter点击事件之后 iOS跳转界面
    2、flutter传map类型参数给iOS进行相应交互
    3、在flutter界面的事件响应之后,iOS返回响应数据给flutter

    iOS代码如下:
    //
    //  ViewController.m
    //  FlutterD
    //
    //  Created by 侯佳男 on 2018/10/30.
    //  Copyright © 2018年 侯佳男. All rights reserved.
    //
    
    #import "ViewController.h"
    #import "TargetViewController.h"
    #import <Flutter/Flutter.h>
    
    @interface ViewController ()
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    - (void)pushFlutterViewController {
        FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
        // 设置路由名字 跳转到不同的flutter界面
        /*flutter代码*/
        /*
        import 'dart:ui';
        
        void main() => runApp(_widgetForRoute(window.defaultRouteName));
        
        Widget _widgetForRoute(String route) {
            switch (route) {
                case 'myApp':
                    return new MyApp();
                case 'home':
                    return new HomePage();
                default:
                    return Center(
                      child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
                );
            }
        }
        */
        [flutterViewController setInitialRoute:@"myApp"];
        __weak __typeof(self) weakSelf = self;
    
        // 要与main.dart中一致
        NSString *channelName = @"com.pages.your/native_get";
    
        FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterViewController];
    
        [messageChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
            // call.method 获取 flutter 给回到的方法名,要匹配到 channelName 对应的多个 发送方法名,一般需要判断区分
            // call.arguments 获取到 flutter 给到的参数,(比如跳转到另一个页面所需要参数)
            // result 是给flutter的回调, 该回调只能使用一次
            NSLog(@"method=%@ \narguments = %@", call.method, call.arguments);
            
            // method和WKWebView里面JS交互很像
            // flutter点击事件执行后在iOS跳转TargetViewController
            if ([call.method isEqualToString:@"iOSFlutter"]) {
                TargetViewController *vc = [[TargetViewController alloc] init];
                [self.navigationController pushViewController:vc animated:YES];
            }
            // flutter传参给iOS
            if ([call.method isEqualToString:@"iOSFlutter1"]) {
                NSDictionary *dic = call.arguments;
                NSLog(@"arguments = %@", dic);
                NSString *code = dic[@"code"];
                NSArray *data = dic[@"data"];
                NSLog(@"code = %@", code);
                NSLog(@"data = %@",data);
                NSLog(@"data 第一个元素%@",data[0]);
                NSLog(@"data 第一个元素类型%@",[data[0] class]);
            }
            // iOS给iOS返回值
            if ([call.method isEqualToString:@"iOSFlutter2"]) {
                if (result) {
                    result(@"返回给flutter的内容");
                }
            }
        }];
        
        [self.navigationController pushViewController:flutterViewController animated:YES];
    }
    // 点击跳转到flutter界面
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
        [self pushFlutterViewController];
    }
    
    @end
    
    
    flutter代码
    import 'dart:ui' as ui; // 调用window拿到route判断跳转哪个界面
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    import 'package:flutter_module/HomePage.dart';
    
    
    void main() => runApp(_widgetForRoute(ui.window.defaultRouteName));
    
    // 根据iOS端传来的route跳转不同界面
    Widget _widgetForRoute(String route) {
      switch (route) {
        case 'myApp':
          return new MyApp();
        case 'home':
          return new HomePage();
        default:
          return Center(
            child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
          );
      }
    }
    
    class MyApp extends StatelessWidget {
    
      Widget _home(BuildContext context) {
        return new MyHomePage(title: 'Flutter Demo Home Page');
      }
    
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          routes: <String, WidgetBuilder>{
            "/home":(BuildContext context) => new HomePage(),
          },
          home: _home(context),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
    
      // 创建一个给native的channel (类似iOS的通知)
      static const methodChannel = const MethodChannel('com.pages.your/native_get');
    
      
      _iOSPushToVC() async {
        await methodChannel.invokeMethod('iOSFlutter', '参数');
      }
    
      _iOSPushToVC1() async {
        Map<String, dynamic> map = {"code": "200", "data":[1,2,3]};
        await methodChannel.invokeMethod('iOSFlutter1', map);
      }
    
      _iOSPushToVC2() async {
        dynamic result;
        try {
          result = await methodChannel.invokeMethod('iOSFlutter2');
        } on PlatformException {
          result = "error";
        }
        if (result is String) {
          print(result);
          showModalBottomSheet(context: context, builder: (BuildContext context) {
            return new Container(
              child: new Center(
                child: new Text(result, style: new TextStyle(color: Colors.brown), textAlign: TextAlign.center,),
              ),
              height: 40.0,
            );
          });
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new FlatButton(onPressed: () {
                  _iOSPushToVC();
                }, child: new Text("跳转ios新界面,参数是字符串")),
                new FlatButton(onPressed: () {
                  _iOSPushToVC1();
                }, child: new Text("传参,参数是map,看log")),
                new FlatButton(onPressed: () {
                  _iOSPushToVC2();
                }, child: new Text("接收客户端相关内容")),
              ],
            ),
          ),
        );
      }
    }
    
    
    

    iOS主动和flutter交互

    flutter MyApp界面里
    1、初始化flutter界面时候iOS传值给flutter

    iOS代码
    //
    //  TargetViewController.m
    //  FlutterD
    //
    //  Created by 侯佳男 on 2018/10/30.
    //  Copyright © 2018年 侯佳男. All rights reserved.
    //
    
    #import "TargetViewController.h"
    #import <Flutter/Flutter.h>
    
    @interface TargetViewController () <FlutterStreamHandler>
    
    @end
    
    @implementation TargetViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.title = @"TargetViewController";
        self.view.backgroundColor = [UIColor whiteColor];
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    - (void)pushFlutterViewController_EventChannel {
        FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
        flutterViewController.navigationItem.title = @"Demo";
        [flutterViewController setInitialRoute:@"home"];
        // 要与main.dart中一致
        NSString *channelName = @"com.pages.your/native_post";
        
        FlutterEventChannel *evenChannal = [FlutterEventChannel eventChannelWithName:channelName binaryMessenger:flutterViewController];
        // 代理FlutterStreamHandler
        [evenChannal setStreamHandler:self];
        
        [self.navigationController pushViewController:flutterViewController animated:YES];
    }
    
    #pragma mark - <FlutterStreamHandler>
    // // 这个onListen是Flutter端开始监听这个channel时的回调,第二个参数 EventSink是用来传数据的载体。
    - (FlutterError* _Nullable)onListenWithArguments:(id _Nullable)arguments
                                           eventSink:(FlutterEventSink)events {
        // arguments flutter给native的参数
        // 回调给flutter, 建议使用实例指向,因为该block可以使用多次
        if (events) {
            events(@"push传值给flutter的vc");
        }
        return nil;
    }
    
    /// flutter不再接收
    - (FlutterError* _Nullable)onCancelWithArguments:(id _Nullable)arguments {
        // arguments flutter给native的参数
        NSLog(@"%@", arguments);
        return nil;
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
        [self pushFlutterViewController_EventChannel];
    }
    
    @end
    
    
    flutter代码
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class HomePage extends StatefulWidget {
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
    
      // 注册一个通知
      static const EventChannel eventChannel = const EventChannel('com.pages.your/native_post');
    
      // 渲染前的操作,类似viewDidLoad
      @override
      void initState() {
        super.initState();
    
        // 监听事件,同时发送参数12345
        eventChannel.receiveBroadcastStream(12345).listen(_onEvent,onError: _onError);
      }
    
      String naviTitle = 'title' ;
      // 回调事件
      void _onEvent(Object event) {
        setState(() {
          naviTitle =  event.toString();
        });
      }
      // 错误返回
      void _onError(Object error) {
    
      }
    
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          home: new Material(
            child: new Scaffold(
              body: new Center(
                child: new Text(naviTitle),
              ),
            ),
          ),
        );
      }
    }
    
    
    

    UI界面搭建相关记录
    网络请求相关记录

    相关文章

      网友评论

      • zzq_hd:你好,方便给个demo学习下吗

      本文标题:Flutter和原生iOS交互

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