Flutter 與原生交互總結

Flutter學習訣竅，Flutter一切皆組件！

Android與Flutter之間的通訊共有四種實現方式。

• 因爲在初始化flutter頁面時會傳遞一個字符串——route，所以咱們就能夠拿route來作文章，傳遞本身想要傳遞的數據。該種方式僅支持單向數據傳遞且數據類型只能爲字符串，無返回值。
• 經過EventChannel來實現，EventChannel僅支持數據單向傳遞，無返回值。
• 經過MethodChannel來實現，MethodChannel支持數據雙向傳遞，有返回值。
• 經過BasicMessageChannel來實現，BasicMessageChannel支持數據雙向傳遞，有返回值。

1、先看下初始化的方式

FlutterView flutterView = Flutter.createView(this, getLifecycle(), "route");

route就是默認的路由字段，這個字段能夠是一個JSON對象，這樣就能夠實現原生傳遞給Flutter數據，Flutter在本身的路由中心解析這個JSON對象，獲取到須要的數據進行處理，初始化頁面就ok了。

2、EventChannel

原生傳遞給Flutter數據，這個方式能夠避免一中的在路由裏面處理數據，Android代碼以下：

new EventChannel(flutterView, CHANNEL_POST).setStreamHandler(new EventChannel.StreamHandler() {
            @Override
            public void onListen(Object o, EventChannel.EventSink eventSink) {
                eventSink.success("原生傳遞參數");
            }

            @Override
            public void onCancel(Object o) {

            }
        });

其中的CHANNEL_POST，是本身定義的一個協議，和Flutter側統一就能夠，在main.dart中註冊該方法就能夠，示例代碼以下：

Application.eventChannel = const EventChannel(TTKeys.channel_native_post);

參數的獲取在路由到的頁面中實現，以下所示：

String naviTitle = '商品詳情';
  // 回調事件
  void _onEvent(Object event) {
    setState(() {
      naviTitle = event.toString();
    });
  }
  // 錯誤返回
  void _onError(Object error) {

  }

3、MethodChannel

該方式能夠實現雙向通道，Flutter調用原生，原生再返回數據給Flutter，註冊的方式和EventChannel相似，Android端的代碼以下：

MethodChannel channelGet = new MethodChannel(flutterView, CHANNEL_GET);

        channelGet.setMethodCallHandler((call, result) -> {
            result.success(authHeader());
            switch (call.method) {
                case "router":
                    String args = (String) call.arguments;
                    result.success("回傳給Flutter的參數");
                    break;
                default:
                    break;
            }
        });

Flutter端使用一下的方法獲取Android回傳的數據：

Application.methodChannel.invokeMethod("router")

這裏的路由字段能夠自由定義，能區分開就好。

4、BasicMessageChannel

BasicMessageChannel是一種可以在native與flutter之間互相發送消息的通訊方式，它支持數據類型最多，使用範圍最廣。EventChannel與MethodChannel的應用場景可使用BasicMessageChannel來實現，但BasicMessageChannel的應用場景就不必定可以使用EventChannel與MethodChannel來實現。該方式有返回值。

Android端代碼以下：

public class BasicMessageChannelPlugin implements BasicMessageChannel.MessageHandler<String> {

    private Activity activity;

    private BasicMessageChannel<String> messageChannel;

    static BasicMessageChannelPlugin registerWith(FlutterView flutterView) {
        return new BasicMessageChannelPlugin(flutterView);
    }

    private BasicMessageChannelPlugin(FlutterView flutterView) {
        this.activity = (Activity) flutterView.getContext();
        this.messageChannel = new BasicMessageChannel<String>(flutterView, "BasicMessageChannelPlugin", StringCodec.INSTANCE);
        messageChannel.setMessageHandler(this);
    }

    @Override
    public void onMessage(String s, BasicMessageChannel.Reply<String> reply) {
        reply.reply("BasicMessageChannelPlugin收到：" + s);
        if (activity instanceof FlutterAppActivity) {
            ((FlutterAppActivity) activity).showContent(s);
        }
    }

    void send(String str, BasicMessageChannel.Reply<String> reply) {
        messageChannel.send(str, reply);
    }
}

Flutter端的代碼以下：

class _MyHomePageState extends State<MyHomePage> {
  //StringCodec()爲編碼格式
  BasicMessageChannel<String> _basicMessageChannel =
      BasicMessageChannel("BasicMessageChannelPlugin", StringCodec());

  @override
  void initState() {
    _basicMessageChannel.setMessageHandler((message) => Future<String>(() {
          print(message);
          //message爲native傳遞的數據
          setState(() {
            _content = message;
          });
          //給Android端的返回值
          return "收到Native消息：" + message;
        }));
    _controller = TextEditingController();
    super.initState();
  }

  //向native發送消息
  void _sendToNative() {
      Future<String> future = _basicMessageChannel.send(_controller.text);
      future.then((message) {
        _resultContent = "返回值：" + message;
      });
  }

  @override
  Widget build(BuildContext context) {...}
}

原生與Flutter數據交互，主要就是構建好通道機制，能夠多嘗試不一樣的數據傳遞，構建拓展性比較高的路由中心。

感謝閱讀～

Android開發資料+面試架構資料 免費分享 點擊連接 便可領取

《Android架構師必備學習資源免費領取（架構視頻+面試專題文檔+學習筆記）》