iOS原生与Flutter页面交互--从如何集成到相互跳转与传值(有demo)

先提供demo，目录如下图

做到效果如下：
1、原生项目如何集成，配置flutter，实现混编
2、主工程是原生的老项目，调用一些flutter页面，实现页面跳转；
3、flutter页面主动与原生交互，传值给原生，并接受原生的回调；
4、原生页面主动与flutter页面交互，传值给flutter；
5、flutter页面，导航栏使用flutter自己的，可以返回
效果演示图


1、原生项目和flutter如何混合开发，如何配置

1、在和项目根目录上一级，平级目录下，新建一个flutter_module，怎么做如下
1、cd到指定目录

例如我的项目

2、执行如下命令：
flutter create -t module flutter_module
2、原生项目支持cocoapod

不支持的，在项目根目录
执行pod init

3、podfile文件中添加如下代码（没有的，请添加）
flutter_application_path = '../flutter_module/'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')),binding)
4、执行pod install
5、项目配置bitcode为NO
6、新建run script phase
添加代码
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" buiObject-cld
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
7、拖动这个新建的run script到target dependencies 下面（看上图，在下面了）

到这里就完成了混编的集成配置，下面可以混编了

2、原生页面跳转到flutter，flutter页面主动传值给原生，并回调给flutter

1、跳转通过FlutterViewController

导入头文件#import <Flutter/Flutter.h>
//如果用到flutter插件时,导入下面头文件
import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

2、确定跳到那个页面

3、接受flutter主动传过来的方法名字，传的值，以及可以再次回调给flutter

FlutterMethodChannel

flutter代码

import 'package:flutter/material.dart';
//引入下面这个，是为了调用window的defaultRouteName拿到route判断跳转哪个界面
import 'dart:ui';
import 'package:flutter/services.dart';
import 'package:flutter_module/flutter_first.dart';

void main() => runApp(_widgetForRoute(window.defaultRouteName));

//根据原生给的民资，确定显示那个界面
Widget _widgetForRoute(String route){
  switch (route){
    case 'myApp':
      return MyApp();
    case 'home':
      return FlutterFirst();
    default:
      return MyApp();
  }

}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      routes: <String, WidgetBuilder>{
        "/home":(BuildContext context) => FlutterFirst(),
      },
      home: MyHomePage(title: '我是flutter-->MyHomePage页面',),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title,}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {

  //创建一个给native的channel (类似iOS的通知）
  static const methodChannel = const MethodChannel('wg/native_get');

  //告诉ios，需要跳转到下一页了。ios自己跳,并传给ios一个字符串
  _iosPushToVC() async {
    //invokeMethod:两个参数Method:方法名（两端要统一），arguments：此方法名下需要传的参数
    await methodChannel.invokeMethod('iOSFlutter', '这是flutter传的字符串');
  }

  //传给ios一个map
  _iosGetMap() async {
    Map<String, dynamic> value = {"code": "200", "data":[1,2,3]};
    await methodChannel.invokeMapMethod('iOSFlutter1',value);
  }

  //拿到ios的返回值
  _getIosValue() async {
   dynamic result;
   try{
     result = await methodChannel.invokeMethod('iOSFlutter2');
   }on PlatformException{
     result = "error";
   }

   if(result is String){
     showModalBottomSheet(context: context, builder: (BuildContext context){
       return Container(
         child: Center(
           child: Text(result,style: TextStyle(color: Colors.brown), textAlign: TextAlign.center,),
         ),
         height: 40,
       );
     });
   }
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //添加观察者
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    // TODO: implement didChangeAppLifecycleState
    super.didChangeAppLifecycleState(state);

    if(state != AppLifecycleState.resumed){
      methodChannel.invokeMethod('changeNavStatus', 'didChangeAppLifecycleState:${state}-show');
    }else{
      methodChannel.invokeMethod('changeNavStatus', 'didChangeAppLifecycleState:${state}-hiden');
    }
  }

  @override
  void dispose() {
    // TODO: implement dispose
    WidgetsBinding.instance.removeObserver(this); //销毁观察者
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
//        automaticallyImplyLeading: true,
        leading: Container(
          color: Colors.green,
          child: RaisedButton(
            onPressed: (){
              methodChannel.invokeMethod('backToViewController');
            },
            child: Icon(
              Icons.arrow_back,
//              color: Colors.white,
            ),
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            InkWell(
                onTap: _iosPushToVC,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.forward),
                    Text('跳转ios新界面，参数是字符串'),
                  ],
                ),
            ),
            InkWell(
              onTap: _iosGetMap,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.forward),
                  Text('传参，参数是map'),
                ],
              )
            ),
            InkWell(
              onTap: _getIosValue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.forward),
                  Text('接收iOS返回的内容'),
                ],
              )
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

ios代码

//
#define Screen_width [UIScreen mainScreen].bounds.size.width
#define Screen_height [UIScreen mainScreen].bounds.size.height

#import "ViewController.h"
#import <Flutter/Flutter.h>
//如果用到flutter插件时,导入下面头文件
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

#import "FirstViewController.h"


@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = UIColor.whiteColor;
    self.title = @"我是原生-ViewController页面";
    
    UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(15, 100, Screen_width-30, 30)];
    btn.layer.cornerRadius = 15;
    btn.layer.masksToBounds = YES;
    btn.backgroundColor = UIColor.greenColor;
    [btn setTitle:@"调用flutter页面,flutter主动和iOS交互" forState:UIControlStateNormal];
    [btn addTarget:self action:@selector(btnClicked) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)btnClicked{
    
    [self pushToFlutterView];
}

- (void)pushToFlutterView{
    
    FlutterViewController *flutterVC = [FlutterViewController new];
    [flutterVC setInitialRoute:@"myApp"];
    
    __weak __typeof(self) weakSelf = self;
    
    NSString *channelName = @"wg/native_get";
    
    //FlutterMethodChannel是flutter页面主动交互iOS页面
    FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterVC];
    //flutter页面方法触发
    [methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        
        // call.method 获取 flutter 给回到的方法名，要匹配到 channelName 对应的多个 发送方法名，一般需要判断区分
        // call.arguments 获取到 flutter 给到的参数，（比如跳转到另一个页面所需要参数）
        // result 是给flutter的回调， 该回调只能使用一次
        
        NSLog(@"---->call.method=%@ \n call.arguments = %@", call.method, call.arguments);
        
        // method和WKWebView里面JS交互很像
        // flutter点击事件执行后需要iOS做的事
        if ([call.method isEqualToString:@"iOSFlutter"]) {
            
            FirstViewController *firstVC = [[FirstViewController alloc] init];
            [weakSelf.navigationController pushViewController:firstVC animated:YES];
        }
        
        // flutter给iOS传的参数
        if ([call.method isEqualToString:@"iOSFlutter1"]) {
            
            NSDictionary *dic = call.arguments;
            UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"flutter页面传过来的字典" message:[NSString stringWithFormat:@"%@",dic] delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
            [alert show];
        }
        
        //iOS给flutter返回值
        if ([call.method isEqualToString:@"iOSFlutter2"]) {
            if (result) {
                result(@"这是iOS返回给flutter的内容");
            }
        }
        
        if ([call.method isEqualToString:@"changeNavStatus"]) {
            NSString *arguments = call.arguments;
            if ([arguments containsString:@"show"]) {
                weakSelf.navigationController.navigationBarHidden = NO;
            }else{
                weakSelf.navigationController.navigationBarHidden = YES;
            }
        }
        
        if ([call.method isEqualToString:@"backToViewController"]) {
            [weakSelf.navigationController popViewControllerAnimated:YES];
        }
    }];
    
    //原生iOS跳转到Flutter页面
    [self.navigationController pushViewController:flutterVC animated:YES];
}
@end

3、iOS主动传值给flutter

FlutterEventChannel

设置代理

实现代理

flutter代码

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

class FlutterFirst extends StatefulWidget {
  @override
  _FlutterFirstState createState() => _FlutterFirstState();
}

class _FlutterFirstState extends State<FlutterFirst> with WidgetsBindingObserver {

  // 注册一个通知,监听原生传给自己的值
  static const EventChannel eventChannel = const EventChannel('wg/native_post');
  static const MethodChannel methodChannel = const MethodChannel('wg/native_get');

  // 渲染前的操作，类似viewDidLoad
  @override
  void initState() {
    super.initState();
    // 监听事件，同时发送参数12345
    eventChannel.receiveBroadcastStream(12345).listen(_onEvent,onError: _onError);
    //添加生命周期观察者
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    //销毁生命周期观察者
    WidgetsBinding.instance.removeObserver(this);
  }

  String naviTitle = 'title';

  // 回调事件
  void _onEvent(Object event){
    setState(() {
      naviTitle = event.toString();
    });
  }

  // 错误返回
  void _onError(Object error) {

  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    // TODO: implement didChangeAppLifecycleState
    super.didChangeAppLifecycleState(state);

    if(state != AppLifecycleState.resumed){
      methodChannel.invokeMethod('changeNavStatus', 'didChangeAppLifecycleState:${state}-show');
    }else{
      methodChannel.invokeMethod('changeNavStatus', 'didChangeAppLifecycleState:${state}-hiden');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我是flutter-->FlutterFirst页面',
      theme: ThemeData(
        primarySwatch: Colors.pink
      ),
      home: Material(
        child: Scaffold(
          appBar: AppBar(
            title: Text('我是flutter-->FlutterFirst页面'),
            leading: Container(
              color: Colors.green,
              child: RaisedButton(
                onPressed: (){
                  methodChannel.invokeMethod('backToViewController');
                },
                child: Icon(
                  Icons.arrow_back,
//              color: Colors.white,
                ),
              ),
            ),
          ),
          body: Center(
            child: Text(naviTitle),
          ),
        ),
      ),
    );
  }
}

iOS代码

#define Screen_width [UIScreen mainScreen].bounds.size.width
#define Screen_height [UIScreen mainScreen].bounds.size.height


#import "FirstViewController.h"
#import <Flutter/Flutter.h>


@interface FirstViewController ()<FlutterStreamHandler>

@property (nonatomic, copy) FlutterEventSink eventSink;

@end

@implementation FirstViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = UIColor.whiteColor;
    self.title = @"我是原生FirstViewController页面";
    
    UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 100, Screen_width, 30)];
    btn.layer.cornerRadius = 15;
    btn.layer.masksToBounds = YES;
    btn.backgroundColor = UIColor.redColor;
    [btn setTitle:@"调用flutter页面-->iOS主动和flutter交互" forState:UIControlStateNormal];
    [btn addTarget:self action:@selector(btnClicked) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)btnClicked{
    FlutterViewController *flutterVC = [FlutterViewController new];
    flutterVC.navigationItem.title = @"Demo";
    [flutterVC setInitialRoute:@"home"];
    
    NSString *eventChannelName = @"wg/native_post";
    NSString *methodChannelName = @"wg/native_get";
    
    /*---------FlutterEventChannel是IOS主动与flutter交互-----------*/
    FlutterEventChannel *eventChannel = [FlutterEventChannel eventChannelWithName:eventChannelName binaryMessenger:flutterVC];
    
    // 代理FlutterStreamHandler
    [eventChannel setStreamHandler:self];
    /*---------FlutterEventChannel是IOS主动与flutter交互-----------*/

    
    /*---------FlutterMethodChannel是flutter主动与IOS交互-----------*/
    FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:methodChannelName binaryMessenger:flutterVC];
    [methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        
        if ([call.method isEqualToString:@"changeNavStatus"]) {
            NSString *arguments = call.arguments;
            if ([arguments containsString:@"show"]) {
                self.navigationController.navigationBarHidden = NO;
            }else{
                self.navigationController.navigationBarHidden = YES;
            }
        }
        
        if ([call.method isEqualToString:@"backToViewController"]) {
            [self.navigationController popViewControllerAnimated:YES];
        }
    }];
    /*---------FlutterMethodChannel是flutter主动与IOS交互-----------*/
    
    [self.navigationController pushViewController:flutterVC animated:YES];
    
}

#pragma mark - <FlutterStreamHandler>
//这个onListen是Flutter端开始监听这个channel时的回调，第二个参数 EventSink是用来传数据的载体。
-(FlutterError *)onListenWithArguments:(id)arguments eventSink:(FlutterEventSink)events{
    
    self.eventSink = events;
    // arguments flutter监听时,给native传送的参数
    if (self.eventSink) {
        self.eventSink(@"原生push到fluttet页面,传给flutter的值");
    }
    return nil;
}

// flutter不再接收
-(FlutterError *)onCancelWithArguments:(id)arguments{
    
    //
    self.eventSink = nil;
    return nil;
}
@end

导航栏控制

通过FlutterMethodChannel传值给iOS,让iOS实现原生导航的隐藏于显示

下载demo，运行时如果报

解决：
重新cd到原生项目根目录，执行pod install即可

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349