首页 文章 精选 留言 我的

Flutter 58: 图解 Flutter 嵌入原生 AndroidView 小尝试

2019-08-25 533

      小菜前段时间学习了一下 Flutter 与原生 Android 之间的交互；是以 Android 为主工程，Flutter 作为 Module 方式进行交互；今天小菜尝试一下 Flutter 中嵌入 Native View 的交互方式；Android 端采用 AndroidView iOS 端采用 UiKitView；小菜仅学习了 AndroidView 的基本用法；

源码分析

const AndroidView({
    Key key,
    @required this.viewType,
    this.onPlatformViewCreated,
    this.hitTestBehavior = PlatformViewHitTestBehavior.opaque,
    this.layoutDirection,
    this.gestureRecognizers,
    this.creationParams,
    this.creationParamsCodec,
})
  1. viewType -> 与 Android 原生交互时唯一标识符，常见形式是包名+自定义名；
  2. onPlatformViewCreated -> 创建视图后的回调；
  3. hitTestBehavior -> 渗透点击事件，接收范围 opaque > translucent > transparent；
  4. layoutDirection -> 嵌入视图文本方向；
  5. gestureRecognizers -> 可以传递到视图的手势集合；
  6. creationParams -> 向视图传递参数，常为 PlatformViewFactory；
  7. creationParamsCodec -> 编解码器类型；

基本用法

1. viewType

a. Android 端
  1. 自定义 PlatformView，可根据需求实现 Channel 交互接口；
public class NLayout implements PlatformView {
    private LinearLayout mLinearLayout;
    private BinaryMessenger messenger;

    NLayout(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        this.messenger = messenger;
        LinearLayout mLinearLayout = new LinearLayout(context);
        mLinearLayout.setBackgroundColor(Color.rgb(100, 200, 100));
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(900, 900);
        mLinearLayout.setLayoutParams(lp);
        this.mLinearLayout = mLinearLayout;
    }

    @Override
    public View getView() { return mLinearLayout; }

    @Override
    public void dispose() {}
}
  1. 创建 PlatformViewFactory 用于生成 PlatformView；
public class NLayoutFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;

    public NLayoutFactory(BinaryMessenger messenger) {
        super(StandardMessageCodec.INSTANCE);
        this.messenger = messenger;
    }

    @Override
    public PlatformView create(Context context, int i, Object o) {
        Map<String, Object> params = (Map<String, Object>) o;
        return new NLayout(context, messenger, i, params);
    }

    public static void registerWith(PluginRegistry registry) {
        final String key = "NLayout";
        if (registry.hasPlugin(key)) return;
        PluginRegistry.Registrar registrar = registry.registrarFor(key);
        registrar.platformViewRegistry().registerViewFactory("com.ace.ace_demo01/method_layout", new NLayoutFactory(registrar.messenger()));
    }
}
  1. 在 MainActivity 中注册该组件；
NLayoutFactory.registerWith(this);
b. Flutter 端

      创建 AndroidView 并设置与原生相同的 viewType；

return ListView(children: <Widget>[
  Container(child: AndroidView(viewType: "com.ace.ace_demo01/method_layout"),
      color: Colors.pinkAccent, height: 400.0),
  Container(child: AndroidView(viewType: "com.ace.ace_demo01/method_layout"),
      color: Colors.greenAccent, height: 200.0)
]);

c. 相关小结
  1. 小菜对比两个 Container 高度，Container 尺寸大于 AndroidView 对应的原生 View 尺寸时，完全展示；相反小于时则会裁剪 AndroidView 对应的原生 View；
  2. 两个 Container 背景色均未展示，小菜理解是 AndroidView 是填充满 Container 的，只是 AndroidView 中展示效果跟原生 View 尺寸相关；
  3. AndroidView 中未填充满的部分会展示白色或黑色背景色，与 Android 主题版本 或 设备 相关；

2. creationParams / creationParamsCodec

      creationParams 与 creationParamsCodec 一般成对使用，creationParams 为默认传递参数，creationParamsCodec 为编解码器类型；

// Flutter 端 默认传递不同尺寸参数
return ListView(children: <Widget>[
  Container(child: AndroidView(viewType: "com.ace.ace_demo01/method_layout0",
          creationParamsCodec: const StandardMessageCodec(),
          creationParams: {'method_layout_size': 150}),
      color: Colors.pinkAccent,height: 400.0),
  Container(child: AndroidView(viewType: "com.ace.ace_demo01/method_layout0",
          creationParamsCodec: const StandardMessageCodec(),
          creationParams: {'method_layout_size': 450}),
      color: Colors.greenAccent,height: 200.0)
]);

// Android NLayout
public class NLayout implements PlatformView {
    private LinearLayout mLinearLayout;
    private BinaryMessenger messenger;
    private int size = 0;

    NLayout(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        this.messenger = messenger;
        LinearLayout mLinearLayout = new LinearLayout(context);
        mLinearLayout.setBackgroundColor(Color.rgb(100, 200, 100));
        if (params != null && params.containsKey("method_layout_size")) {
            size = Integer.parseInt(params.get("method_layout_size").toString());
        } else {
            size = 900;
        }
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(size,size);
        mLinearLayout.setLayoutParams(lp);
        this.mLinearLayout = mLinearLayout;
    }

    @Override
    public View getView() { return mLinearLayout; }

    @Override
    public void dispose() {}
}

3. onPlatformViewCreated

      Flutter 与 Android 交互一般借助 MethodChannel / BasicMessageChannel / EventChannel 三种方式进行桥接交互；小菜以自定义 TextView 进行尝试；PlatformViewFactory 基本一致，只是更换初始化和注册的 N...TextView 即可；自定义 N...TextView 需实现各自的 Channel 方式；

MethodChannel 方式
// Flutter 端
return Container(height: 80.0, child: AndroidView(
      onPlatformViewCreated: (id) async {
        MethodChannel _channel = const MethodChannel('ace_method_text_view');
        _channel..invokeMethod('method_set_text', 'Method_Channel')..setMethodCallHandler((call) {
            if (call.method == 'method_click') {
              _toast('Method Text FlutterToast!', context);
            }
          });
      },
      viewType: "com.ace.ace_demo01/method_text_view",
      creationParamsCodec: const StandardMessageCodec(),
      creationParams: {'method_text_str': 'Method Channel Params!!'}));

// Android NMethodTextView
public class NMethodTextView implements PlatformView, MethodChannel.MethodCallHandler {
    private TextView mTextView;
    private MethodChannel methodChannel;
    private BinaryMessenger messenger;

    NMethodTextView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        this.messenger = messenger;
        TextView mTextView = new TextView(context);
        mTextView.setText("我是来自Android的原生TextView");
        mTextView.setBackgroundColor(Color.rgb(155, 205, 155));
        mTextView.setGravity(Gravity.CENTER);
        mTextView.setTextSize(16.0f);
        if (params != null && params.containsKey("method_text_str")) {
            mTextView.setText(params.get("method_text_str").toString());
        }
        this.mTextView = mTextView;

        methodChannel = new MethodChannel(messenger, "ace_method_text_view");
        methodChannel.setMethodCallHandler(this);

        mTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                methodChannel.invokeMethod("method_click", "点击！");
                Toast.makeText(context, "Method Click NativeToast!", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        if (methodCall != null && methodCall.method.toString().equals("method_set_text")) {
            mTextView.setText(methodCall.arguments.toString());
            result.success("method_set_text_success");
        }
    }

    @Override
    public View getView() { return mTextView; }

    @Override
    public void dispose() { methodChannel.setMethodCallHandler(null); }
}
BasicMessageChannel 方式
// Flutter 端
return Container(height: 80.0, child: AndroidView(
      hitTestBehavior: PlatformViewHitTestBehavior.translucent,
      onPlatformViewCreated: (id) async {
        BasicMessageChannel _channel = const BasicMessageChannel('ace_basic_text_view', StringCodec());
        _channel..send("Basic_Channel")..setMessageHandler((message) {
            if (message == 'basic_text_click') {
              _toast('Basic Text FlutterToast!', context);
            }
            print('===${message.toString()}==');
          });
      },
      viewType: "com.ace.ace_demo01/basic_text_view",
      creationParamsCodec: const StandardMessageCodec(),
      creationParams: {'basic_text_str': 'Basic Channel Params!!'}));

// Android NBasicTextView
public class NBasicTextView implements PlatformView, BasicMessageChannel.MessageHandler {
    private TextView mTextView;
    private BasicMessageChannel basicMessageChannel;
    private BinaryMessenger messenger;

    NBasicTextView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        this.messenger = messenger;
        TextView mTextView = new TextView(context);
        mTextView.setTextColor(Color.rgb(155, 155, 205));
        mTextView.setBackgroundColor(Color.rgb(155, 105, 155));
        mTextView.setGravity(Gravity.CENTER);
        mTextView.setTextSize(18.0f);
        if (params != null && params.containsKey("basic_text_str")) {
            mTextView.setText(params.get("basic_text_str").toString());
        }
        this.mTextView = mTextView;

        basicMessageChannel = new BasicMessageChannel(messenger, "ace_basic_text_view", StringCodec.INSTANCE);
        basicMessageChannel.setMessageHandler(this);

        mTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                basicMessageChannel.send("basic_text_click");
                Toast.makeText(context, "Basic Click NativeToast!", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public View getView() { return mTextView; }

    @Override
    public void dispose() { basicMessageChannel.setMessageHandler(null); }

    @Override
    public void onMessage(Object o, BasicMessageChannel.Reply reply) {
        if (o != null){
            mTextView.setText(o.toString());
            basicMessageChannel.send("basic_set_text_success");
        }
    }
}
EventChannel 方式
// Flutter 端
return Container(height: 80.0, child: AndroidView(
      hitTestBehavior: PlatformViewHitTestBehavior.opaque,
      onPlatformViewCreated: (id) async {
        EventChannel _channel = const EventChannel('ace_event_text_view');
        _channel.receiveBroadcastStream('Event_Channel').listen((message) {
          if (message == 'event_text_click') {
            _toast('Event Text FlutterToast!', context);
          }
        });
      },
      viewType: "com.ace.ace_demo01/event_text_view",
      creationParamsCodec: const StandardMessageCodec(),
      creationParams: {'event_text_str': 'Event Channel Params!!'}));

// Android EventChannel
public class NEventTextView implements PlatformView, EventChannel.StreamHandler {
    private TextView mTextView;
    private EventChannel eventChannel;
    private BinaryMessenger messenger;

    NEventTextView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        this.messenger = messenger;
        TextView mTextView = new TextView(context);
        mTextView.setTextColor(Color.rgb(250, 105, 25));
        mTextView.setBackgroundColor(Color.rgb(15, 200, 155));
        mTextView.setGravity(Gravity.CENTER);
        mTextView.setPadding(10, 10, 10, 10);
        mTextView.setTextSize(20.0f);
        if (params != null && params.containsKey("event_text_str")) {
            mTextView.setText(params.get("event_text_str").toString());
        }
        this.mTextView = mTextView;

        eventChannel = new EventChannel(messenger, "ace_event_text_view");
        eventChannel.setStreamHandler(this);

        mTextView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Toast.makeText(context, "Event Click NativeToast!", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public View getView() { return mTextView; }

    @Override
    public void dispose() { eventChannel.setStreamHandler(null); }

    @Override
    public void onListen(Object o, EventChannel.EventSink eventSink) {
        if (o != null) {
            mTextView.setText(o.toString());
            eventSink.success("event_set_text_success");
        }
    }

    @Override
    public void onCancel(Object o) {}
}

4. gestureRecognizers

      针对不同的 View 需要的手势有所不同，上述 TextView 没有设置手势集合，默认支持点击，但对于 ListView 之类的需要滑动手势或长按点击的话则需要添加 gestureRecognizers 手势集合；

// Flutter 端
return Container(height: 480.0,
    child: GestureDetector(
      child: AndroidView(
          gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer()))
            ..add(Factory<LongPressGestureRecognizer>(() => LongPressGestureRecognizer())),
          hitTestBehavior: PlatformViewHitTestBehavior.opaque,
          onPlatformViewCreated: (id) async {
            MethodChannel _channel = const MethodChannel('ace_method_list_view');
            _channel..invokeMethod('method_set_list', 15)..setMethodCallHandler((call) {
                if (call.method == 'method_item_click') {
                  _toast('List FlutterToast! position -> ${call.arguments}', context);
                } else if (call.method == 'method_item_long_click') {
                  _toast('List FlutterToast! -> ${call.arguments}', context);
                }
              });
          },
          viewType: "com.ace.ace_demo01/method_list_view",
          creationParamsCodec: const StandardMessageCodec(),
          creationParams: {'method_list_size': 10})));

// Android NMethodListView
public class NMethodListView implements PlatformView, MethodChannel.MethodCallHandler, ListView.OnItemClickListener, ListView.OnItemLongClickListener {

    private Context context;
    private ListView mListView;
    private MethodChannel methodChannel;
    private List<Map<String, String>> list = new ArrayList<>();
    private SimpleAdapter simpleAdapter = null;
    private int listSize = 0;

    NMethodListView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
        this.context = context;
        ListView mListView = new ListView(context);
        if (params != null && params.containsKey("method_list_size")) {
            listSize = Integer.parseInt(params.get("method_list_size").toString());
        }
        if (list != null) { list.clear(); }
        for (int i = 0; i < listSize; i++) {
            Map<String, String> map = new HashMap<>();
            map.put("id", "current item = " + (i + 1));
            list.add(map);
        }
        simpleAdapter = new SimpleAdapter(context, list, R.layout.list_item, new String[] { "id" }, new int[] { R.id.item_tv });
        mListView.setAdapter(simpleAdapter);
        mListView.setOnItemClickListener(this);
        mListView.setOnItemLongClickListener(this);
        this.mListView = mListView;

        methodChannel = new MethodChannel(messenger, "ace_method_list_view");
        methodChannel.setMethodCallHandler(this);
    }

    @Override
    public View getView() { return mListView; }

    @Override
    public void dispose() { methodChannel.setMethodCallHandler(null); }

    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        if (methodCall != null && methodCall.method.toString().equals("method_set_list")) {
            if (list != null) { list.clear(); }
            for (int i = 0; i < Integer.parseInt(methodCall.arguments.toString()); i++) {
                Map<String, String> map = new HashMap<>();
                map.put("id", "current item = " + (i + 1));
                list.add(map);
            }
            simpleAdapter.notifyDataSetChanged();
            result.success("method_set_list_success");
        }
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        methodChannel.invokeMethod("method_item_click", position);
        Toast.makeText(context, "ListView.onItemClick NativeToast! position -> " + position, Toast.LENGTH_SHORT).show();
    }

    @Override
    public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
        methodChannel.invokeMethod("method_item_long_click", list.get(position).get("id"));
        Toast.makeText(context, "ListView.onItemLongClick NativeToast! " + list.get(position).get("id"), Toast.LENGTH_SHORT).show();
        return true;
    }
}

5. hitTestBehavior

      小菜尝试了数据绑定和手势操作，但重要的一点是数据透传，小菜在 Flutter / Android 两端添加了 Toast 进行测试；

a. opaque

      使用 PlatformViewHitTestBehavior.opaque 方式，两端均可监听处理，小菜理解，若有叠加 AndroidView 则不会透传到下一层；注意 PlatformView 只可在 AndroidView 范围内展示；

b. translucent

      使用 PlatformViewHitTestBehavior.translucent 方式，两端均可监听处理，小菜理解，若有叠加 AndroidView 则可以透传到下一层；

c. transparent

      使用 PlatformViewHitTestBehavior.transparent 方式，两端均不会透传展示；

      小菜在测试时，NMethodListView 设置高度超过剩余空间高度，例 Container 高度设置 500.0 可实际屏幕剩余高度只有 300.0，因 transparent 不会透传，所以 Flutter 外层 ListView 可以滑动，NMethodListView 不会滑动；使用 opaque / translucent 方式，NMethodListView 可以滑动，Flutter 外层 ListView 不能滑动，故有 200.0 高度展示不出来；

小结

  1. 使用 AndroidView 时，Android API > 20；
  2. 使用 AndroidView 时均需要有界父类；
  3. 官网明确提醒，AndroidView 方式代价较大，由于是 GPU -> CPU -> GPU 有明显的性能缺陷，尽量避免使用；
  4. 测试过程中热重载无效，每次均需重新编译；

      小菜对两端的交互理解还不够深入，尤其是专有名词的理解还不到位，如有问题请多多指导！

来源：阿策小和尚

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/715915

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

云控平台的双向音频解决方案

导读 随着移动互联网的发展，行业内衍生了基于移动平台的各类解决方案。其中，设备规模化管理的云控能力是各互联网公司在设备集群控制背景下的诉求。因此涌现了大批提供类似解决方案的平台。如：阿里系的阿里云MQC、阿里无线和菜鸟Nimitz等，阿里之外的有Testin、百度MTC、腾讯WeTest、华为、三星等等。 目前以上平台在云真机的使用上，都存在一个已知的短板 —— 声音。用户看的到画面，能够响应操作，但是涉及到声音播报、语音交互的场景时则无能为力。尤其对于音乐、视听、短视频、直播客户端等这类多媒体属性强的App，在云真机的使用场景上是受限最大的。 现在回到我们自己的产品。高德地图车机/镜版（后面统称Auto）。其中最常见的导航播报、与系统的多媒体混音交互、以及语音助手多轮对话的交互场景中，这些与声音相关的场景占比高达25%以上。所以解决远
2019-08-26
652
上一篇

终端AI应用也可以如此简单

AoE：一种快速集成AI的终端运行环境SDK 一、背景1.1 AoE是什么AoE(AI on Edge) 是一个滴滴开源的终端侧AI集成运行时环境(IRE)。以 “稳定性、易用性、安全性” 为设计原则，帮助开发者将不同框架的深度学习算法轻松部署到终端高效执行，Github 地址是https://github.com/didi/aoe。为什么要做一个 AI 终端集成运行时框架，原因有两个：一是随着人工智能技术快速发展，这两年涌现出了许多运行在终端的推理框架，在给开发者带来更多选择的同时，也增加了将AI布署到终端的成本；二是通过推理框架直接接入AI的流程比较繁琐，涉及到动态库接入、资源加载、前处理、后处理、资源释放、模型升级，以及如何保障稳定性等问题。目前AoESDK已经在滴滴银行卡OCR上应用使用，想更加清晰地理解 AoE 和推理框架、宿主 App 的关系，可以通过下面的业务集成示意图来了解它。 1.2终端推理框架一览下面是终端运行的8种主流推理框架（排名不分先后）。 1.3 AoE 如何支持各种推理框架从本质上来说，无论是什么推理框架，都必然包含下面 5 个处理过程，对这些推理过程进行...
2019-08-28
710
下一篇

相关文章

发表评论

资源下载

更多资源
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-01-03 大小: 1.42GB 下载: 2次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
HarmonyOS6 OpenAi DeepSeek SpringBoot4 Nacos3 SpringCloud Redis Gemini3 Rocky Service Mesh Jdk25 Docker Kubernetes

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册