Flutter和Android 交互框架:flutter_boost使用(三)交互篇

https://github.com/alibaba/flutter_boost

 
一.Flutter与Android 交互框架之flutter_boost使用(一)集成篇
二.Flutter与Android 交互框架之flutter_boost使用(二)冲突问题解决篇
三.Flutter与Android 交互框架之flutter_boost使用(三)交互篇

所有问题解决完毕后 最后可以进行框架的使用了 交互如下
详细可参考 github地址

基本路由API部分

Dart 部分

1.开启新页面统一API

BoostNavigator.instance.push(
    "yourPage", //required
    withContainer: false, //optional
    arguments: {"key":"value"}, //optional
    opaque: true, //optional,default value is true
);

///or

Navigator.of(context).pushNamed('simplePage', arguments: {'data': _controller.text});

///不能使用匿名路由，boost目前无法捕捉匿名路由，匿名路由就是直接使用类似
///类似CupertinoPageRoute的形式来进行push，暂不支持！！！

2.开启透明弹窗(flutter中开启弹窗)

• 不开启新容器的flutter内部弹窗(推荐)

///首先你需要在你的routeFactory路由表中这样指定弹窗页面
'dialogPage': (settings, uniqueId) {
    return PageRouteBuilder<dynamic>(

      ///透明弹窗页面这个需要是false
      opaque: false,

      ///背景蒙版颜色
      barrierColor: Colors.black12,
      settings: settings,
      pageBuilder: (_, __, ___) => DialogPage());
},

///然后这样弹出即可
BoostNavigator.instance.push("dialogPage");

///如果要接收参数返回参数的形式
final result = await BoostNavigator.instance.push("dialogPage");

• 开启新容器的flutter内部弹窗

dialogPage在路由表中的注册方法可以同上

 BoostNavigator.instance.push("dialogPage",
        withContainer: true,

        ///如果开启新容器，需要指定opaque为false
        opaque: false);

3.关闭页面API

///pop一次
BoostNavigator.instance.pop(result);

///pop两次,首次需要用await等待
await BoostNavigator.instance.pop(result);
BoostNavigator.instance.pop(result);

• 一定注意：如果打开的Flutter页面不带容器（例如，通过原生的Navigator.push，或者withContainer=false），那么pop时，result可以是任何类型；如果打开的页面是一个带容器的Flutter页面（即，withContainer=true）或一个Native页面，那么result需要是Map<String, dynamic>类型。

Android

1.开启新页面统一API

FlutterBoostRouteOptions options = new FlutterBoostRouteOptions.Builder()
                .pageName("pageName")
                .arguments(new HashMap<>())
                .requestCode(1111)
                .build();
FlutterBoost.instance().open(options);

2.关闭页面API（用得比较少）

FlutterBoost.instance().close(uniqueId);

3.页面关闭时，返回结果给前一个页面

3.1 Flutter页面退出时，传递参数给上一个Native页面

FlutterBoostActivity示例如下：

// 1. 打开Flutter页面，等待返回结果
Intent intent = new FlutterBoostActivity.CachedEngineIntentBuilder(FlutterBoostActivity.class)
        .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.opaque)
        .destroyEngineWithActivity(false)
        .url("DialogPage")
        .urlParams(params)
        .build(this);
startActivityForResult(intent, REQUEST_CODE);

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
    // 处理返回结果
}

// 2. 关闭Flutter页面，返回结果
InkWell(
child: Container(
    padding: const EdgeInsets.all(8.0),
    margin: const EdgeInsets.all(8.0),
    color: Colors.yellow,
    child: Text(
        'Pop with Navigator',
        style: TextStyle(fontSize: 22.0, color: Colors.blue),
    )),
// 这里也可以使用: Navigator.of(context).pop({'retval' : 'I am from dart...'})
onTap: () => BoostNavigator.instance.pop({'retval' : 'I am from dart...'}),
),

注：如需定制，请自行实现FlutterViewContainer的finishContainer接口。

3.2 Native页面退出时，传递参数给上一个Flutter页面

// 1. 从Flutter页面打开一个Native页面，并处理返回结果
InkWell(
child: Container(
    padding: const EdgeInsets.all(8.0),
    margin: const EdgeInsets.all(8.0),
    color: Colors.yellow,
    child: Text(
        'open native page',
        style: TextStyle(fontSize: 22.0, color: Colors.black),
    )),
onTap: () => BoostNavigator.instance
    .push("ANativePage") // Native页面路由
    .then((value) => print('retval:$value')),
),

// 2. Native页面退出时，返回结果
@Override
public void finish() {
    Intent intent = new Intent();
    intent.putExtra("msg","This message is from Native!!!");
    intent.putExtra("bool", true);
    intent.putExtra("int", 666);
    setResult(Activity.RESULT_OK, intent);  // 返回结果给dart
    super.finish();
}

3.3 Flutter页面退出时，传递参数给上一个Flutter页面

// 1. 打开一个Flutter页面，并处理返回结果
InkWell(
child: Container(
    padding: const EdgeInsets.all(8.0),
    margin: const EdgeInsets.all(8.0),
    color: Colors.yellow,
    child: Text(
        'open transparent widget',
        style: TextStyle(fontSize: 22.0, color: Colors.black),
    )),
onTap: () {
    // 如果withContainer为false时，也可以使用原生的Navigator
    final result = await BoostNavigator.instance.push("AFlutterPage",
        withContainer: true, opaque: false);
},
),

// 2. 页面关闭，并返回结果
// 这里也可以使用原生的 Navigator
onTap: () => BoostNavigator.instance.pop({'retval' : 'I am from dart...'}),

iOS

1.开启新页面统一API

let options = FlutterBoostRouteOptions()
options.pageName = "mainPage"
options.arguments = ["key" :"value"]

//页面是否透明（用于透明弹窗场景），若不设置，默认情况下为true
options.opaque = true

//这个是push操作完成的回调，而不是页面关闭的回调！！！！
options.completion = { completion in
    print("open operation is completed")
}

//这个是页面关闭并且返回数据的回调，回调实际需要根据您的Delegate中的popRoute来调用
options.onPageFinished = { dic in
    print(dic)
}

FlutterBoost.instance().open(options)

2.关闭页面API（用得比较少）

FlutterBoost.instance().close(uniqueId)

3.原生参数回传flutter

//这里pageName是你push的这个原生的pageName，而不是上一个flutter页面的pageName
//这句话并不会退出页面
FlutterBoost.instance().sendResultToFlutter(withPageName: "pageName", arguments: ["key":"value"])

自定义事件传递API

这个部分相当于让开发者省略了手动搭桥的功能，通过事件标识key和参数map即可完成事件传递

flutter端使用

• 接收消息

///声明一个用来存回调的对象
VoidCallback removeListener;

///添加事件响应者,监听native发往flutter端的事件
removeListener = BoostChannel.instance.addEventListener("yourEventKey", (key, arguments) {
  ///deal with your event here
  return;
});

///然后在退出的时候（比如dispose中）移除监听者
removeListener?.call();

• 发送消息给native

BoostChannel.instance.sendEventToNative("eventToNative",{"key1":"value1"});

iOS端使用

• 接收消息

//同样声明一个对象用来存删除的函数
var removeListener:FBVoidCallback?

//这里注册事件监听，监听flutter发送到iOS的事件
self.removeListener =  FlutterBoost.instance().addEventListener({[weak self] key, dic in
    //注意，如果这里self持有removeListener，而这个闭包中又有self的话，要用weak self
    //否则就有self->removeListener->self 循环引用
    
    //在这里处理你的事件
    
}, forName: "event")

//在退出的时候解除注册(比如 deinit/dealloc 中)
removeListener?()

• 发送消息给flutter

FlutterBoost.instance().sendEventToFlutter(with: "event", arguments: ["data":"event from native"])

Android端使用

• 接收消息

EventListener listener = (key, args) -> {
    //deal with your event here      
};
ListenerRemover remover = FlutterBoost.instance().addEventListener("event", listener);

//最后在清理的时候移除监听(比如onDestroy中)
remover.remove();

• 发送消息给flutter

Map<Object,Object> map = new HashMap<>();
map.put("key","value");
FlutterBoost.instance().sendEventToFlutter("eventToFlutter",map);

这篇好文章是转载于：学新通技术网