flutter中嵌入原生Android View

最新推荐文章于 2024-09-15 08:25:46 发布
最新推荐文章于 2024-09-15 08:25:46 发布
阅读量916 收藏 3
点赞数 2
分类专栏： flutter 文章标签： flutter 嵌入Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yufumatou/article/details/109203019
版权

一、创建Android原生View

1、选中android目录下任意文件，点击右上角出现的“Open for Editing in Android Studio”

2、在新打开的窗口里，app项目下创建继承PlatformView 的AndroidView

/**
 * messenger   flutter与原生通讯需要该参数
 * viewId      控件唯一标识
 * args        初始化参数
 */
class AndroidView(context: Context?, messenger: BinaryMessenger, viewId: Int, args: Any?) : PlatformView {

    private val textView = TextView(context)

    init {
        textView.text = "这是AndroidView"
    }

    override fun getView(): View {
        return textView
    }

    override fun dispose() {
    }
}

二、注册AndroidView

1、创建继承PlatformViewFactory的AndroidFactory

/**
 * messenger   flutter与原生通讯需要该参数
 */
class AndroidFactory(val messenger: BinaryMessenger): PlatformViewFactory(StandardMessageCodec.INSTANCE) {

    override fun create(context: Context?, viewId: Int, args: Any?): PlatformView {
        return AndroidView(context, messenger, viewId, args)
    }

}

2、创建继承FlutterPlugin的AndroidPlugin

class AndroidPlugin : FlutterPlugin{

    override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        //这里“AndroidView”要和flutter中创建的AndroidView的viewType属性值一致
        binding.platformViewRegistry
                .registerViewFactory("AndroidView", AndroidFactory(binding.binaryMessenger))
    }

    override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {

    }
}

3、在MainActivity中添加AndroidPlugin

class MainActivity: FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine.plugins.add(AndroidPlugin())
    }
}

三、Flutter中嵌入AndroidView

class AndroidViewDemo extends StatelessWidget{
  @override
  Widget build(BuildCotext context) {
    return Scaffold(
      appBar: Appbar(),
      body: Center(
        child: AndroidView(
          viewType: 'AndroidView',
        ),
      )
    );  
  }
}

------------------------------------------------------------------------进阶----------------------------------------------------------------------------------

四、创建AndroidView时传参

1、flutter端修改

class AndroidViewDemo extends StatelessWidget{
  @override
  Widget build(BuildCotext context) {
    return Scaffold(
      appBar: Appbar(),
      body: Center(
        child: AndroidView(
          viewType: 'AndroidView',
          creationParams: {'initText': '这是flutter初始化传参'},
          creationParamsCode: StandardMessageCode(),//这里编码器要和PlatformViewFactory构造方法定义的解码器匹配
        ),
      )
    );  
  }
}

2、Android端修改

/**
 * messenger   flutter与原生通讯需要该参数
 * viewId      控件唯一标识
 * args        初始化参数
 */
class AndroidView(context: Context?, messenger: BinaryMessenger, viewId: Int, args: Any?) : PlatformView {

    private val textView = TextView(context)

    init {
        textView.text = "这是AndroidView"
        if (args is Map<*, *>){
            textView.text = args["initText"] as String
        }
    }

    override fun getView(): View {
        return textView
    }

    override fun dispose() {
    }
}

五、flutter向AndroidView发送数据

1、flutter端修改

class AndroidViewDemo extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return AndroidViewDemoState();
  }
}

class AndroidViewDemoState extends State<AndroidViewDemo>{
  MethodChannel methodChannel = MethodChannel("AndroidView");
  
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: double.infinity,
          height: 60,
          child: AndroidView(
            viewType: 'AndroidView',
            creationParams: {'initText':  '这是flutter初始化传参'},
            creationParamsCodec: StandardMessageCodec(),
          ),
        ),
        RaisedButton(
          child: Text("向AndroidView传递参数"),
          onPressed: () {
            methodChannel
                .invokeMethod('setText', {'text': '这是flutter给AndroidView传参'});
          },
        ),
      ],
    );
  }
}

2、Android端修改

/**
 * messenger   flutter与原生通讯需要该参数
 * viewId      控件唯一标识
 * args        初始化参数
 */
class AndroidView(context: Context?, messenger: BinaryMessenger, viewId: Int, args: Any?) : PlatformView, MethodChannel.MethodCallHandler {

    private val textView = TextView(context)
    private val methodChannel = MethodChannel(messenger, "AndroidView")

    init {
        textView.text = "这是AndroidView"
        if (args is Map<*, *>){
            textView.text = args["initText"] as String
        }
        methodChannel.setMethodCallHandler(this)
    }

    override fun getView(): View {
        return textView
    }

    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        when {
            call.method == "setText" -> {
                //flutter向AndroidView发送数据
                val text = call.argument<String>("text")
                textView.text = text
            }
            else -> result.notImplemented()
        }
    }

    override fun dispose() {
    }
}

六、flutter从AndroidView获取数据

1、flutter端修改

class AndroidViewDemo extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return AndroidViewDemoState();
  }
}

class AndroidViewDemoState extends State<AndroidViewDemo>{
  MethodChannel methodChannel = MethodChannel("AndroidView");
  
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: double.infinity,
          height: 60,
          child: AndroidView(
            viewType: 'AndroidView',
            creationParams: {'initText':  '这是flutter初始化传参'},
            creationParamsCodec: StandardMessageCodec(),
          ),
        ),
        RaisedButton(
          child: Text("向AndroidView传递参数"),
          onPressed: () {
            methodChannel
                .invokeMethod('setText', {'text': '这是flutter给AndroidView传参'});
          },
        ),
        RaisedButton(
          child: Text("从AndroidView获取参数"),
          onPressed: () async {
            var result = await methodChannel.invokeMethod('getText');
            setState(() {
              text = result['text'];
            });
          },
        ),
        Text("$text")
      ],
    );
  }
}

2、Android端修改

/**
 * messenger   flutter与原生通讯需要该参数
 * viewId      控件唯一标识
 * args        初始化参数
 */
class AndroidView(context: Context?, messenger: BinaryMessenger, viewId: Int, args: Any?) : PlatformView, MethodChannel.MethodCallHandler {

    private val textView = TextView(context)
    private val methodChannel = MethodChannel(messenger, "AndroidView")

    init {
        textView.text = "这是AndroidView"
        if (args is Map<*, *>){
            textView.text = args["initText"] as String
        }
        methodChannel.setMethodCallHandler(this)
    }

    override fun getView(): View {
        return textView
    }

    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        when {
            call.method == "setText" -> {
                //flutter向AndroidView发送数据
                val text = call.argument<String>("text")
                textView.text = text
            }
            call.method == "getText" -> {
                //flutter从AndroidView获取数据
                result.success(mapOf("text" to "这是从AndroidView获取参数"))
            }
            else -> result.notImplemented()
        }
    }

    override fun dispose() {
    }
}

七、页面多个相同的原生View通讯问题（多个AndroidView时发送数据只有最后一个收到）

方案：构建不同名称的name的MethodChannel

1、flutter端修改

class AndroidViewDemo extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return AndroidViewDemoState();
  }
}

class AndroidViewDemoState extends State<AndroidViewDemo>{
  var methodChannels = [];
  
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: double.infinity,
          height: 60,
          child: AndroidView(
            viewType: 'AndroidView',
            creationParams: {'initText':  '这是flutter初始化传参'},
            onPlatformViewCreated: (viewId){
              methodChannels.add(MethodChannel("AndroidView_$viewId"));
            },
            creationParamsCodec: StandardMessageCodec(),
          ),
        ),
        Container(
          width: double.infinity,
          height: 60,
          child: AndroidView(
            viewType: 'AndroidView',
            creationParams: {'initText':  '这是flutter初始化传参'},
            onPlatformViewCreated: (viewId){
              methodChannels.add(MethodChannel("AndroidView_$viewId"));
            },
            creationParamsCodec: StandardMessageCodec(),
          ),
        ),
        RaisedButton(
          child: Text("向第一个AndroidView传递参数"),
          onPressed: () {
            methodChannels[0]
                .invokeMethod('setText', {'text': '这是flutter给AndroidView传参'});
          },
        ),
        RaisedButton(
          child: Text("向第二个AndroidView传递参数"),
          onPressed: () {
            methodChannels[1]
                .invokeMethod('setText', {'text': '这是flutter给AndroidView传参'});
          },
        ),
        RaisedButton(
          child: Text("从AndroidView获取参数"),
          onPressed: () async {
            var result = await methodChannel.invokeMethod('getText');
            setState(() {
              text = result['text'];
            });
          },
        ),
        Text("$text"),
      ],
    );
  }
}

2、Android端修改

/**
 * messenger   flutter与原生通讯需要该参数
 * viewId      控件唯一标识
 * args        初始化参数
 */
class AndroidView(context: Context?, messenger: BinaryMessenger, viewId: Int, args: Any?) : PlatformView, MethodChannel.MethodCallHandler {

    private val textView = TextView(context)
    private val methodChannel = MethodChannel(messenger, "AndroidView_$viewId")

    init {
        textView.text = "这是AndroidView"
        if (args is Map<*, *>){
            textView.text = args["initText"] as String
        }
        methodChannel.setMethodCallHandler(this)
    }

    override fun getView(): View {
        return textView
    }

    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        when {
            call.method == "setText" -> {
                //flutter向AndroidView发送数据
                val text = call.argument<String>("text")
                textView.text = text
            }
            call.method == "getText" -> {
                //flutter从AndroidView获取数据
                result.success(mapOf("text" to "这是从AndroidView获取参数"))
            }
            else -> result.notImplemented()
        }
    }

    override fun dispose() {
    }
}

 

yufumatou
关注
专栏目录
Android笔记：在Flutter中嵌入原生View
m0_57767600的博客
06-03 754
在之前的一篇文章中，介绍了在原生项目中引入Flutter。 在这个基础上，记录一下在Flutter中引入原生View。（建议先看看上面的文章） 最终的结果就是，在原生项目中，以一个View的方式引入Flutter，再在这个Flutter的View中使用一个原生的View。 效果图如下： 整个界面分成了两部分，上面是Flutter的View，里面有个原生的ImageView。下面是原生的WebView。 开始 首先是MainActivity的布局文件，上面一个FrameLayout用于承载Flutter。.
flutter嵌入原生组件_Flutter之Flutter布局中加入原生View
weixin_35036735的博客
01-14 856
在先前的两篇文章中，介绍了flutter 与原生android通信，以及在原有工程中加入flutter view或是flutter的新页面。flutter功能很强大不仅仅有自己的ui库，也能像rn那样封装原生view来实现更好的ui，地图和webview和相机就是觉见的封装。在这里先用textview文本组件举例，效果图如图一。图一在Android工程中编写并注册原生组件添加原生组件的流程基本是这...
Flutter 页面嵌入 Android原生 View
Lan_Se_Tian_Ma的博客
01-21 2107
文章主要讲解Flutter页面如何使用Android原生View，但用到了Flutter 和 Android原生 相互通信知识，建议先看完这篇讲解通信的文章数据观察监听，Flutter使用ValueNotifier，Android原生使用LiveData，在实体数据发生改变时，自动刷新。
Flutter混合开发：将Flutter页面嵌入Android原生视图
最新发布
gitblog_00611的博客
09-15 850
Flutter混合开发：将Flutter页面嵌入Android原生视图 flutter_mix_android 项目地址: https://gitcode.com/gh_mirrors/fl/flutter_mix_androi...
flutter嵌入原生view
鲸落
04-11 982
flutter嵌入原生view
【Flutter 混合开发】嵌入原生View-Android
老孟Flutter
10-14 3673
Flutter 混合开发系列 包含如下： 嵌入原生View-Android 嵌入原生View-IOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生通信-EventChannel 添加 Flutter 到 Android Activity 添加 Flutter 到 Android Fragment 添加 Flutter 到 iOS 每个工作日分享一篇，欢迎关注、点赞及转发。 AndroidView 建议使用 Android Studio 进行开发..
flutter页中嵌入Android控件---AndroidView
haoxuhong的博客
07-01 2156
AndroidView 在Flutter小部件上嵌入一个Android的View,与UiKitView对应，UiKitView是在Flutter小部件上嵌入一个ios的View.源码 属性 释义 viewType → String 这个小部件要嵌入的Android视图类型的唯一标识符。 clipBehavior → Clip 内容被剪辑的方式，默认是Cli
Android笔记：在Flutter中嵌入原生View，android零基础开发
2401_84023683的博客
04-03 635
整个界面分成了两部分，上面是Flutter的View，里面有个原生的ImageView。下面是原生的WebView。
Flutter中嵌入Android 原生TextView实例教程
01-21
前言 本篇文章 中写到的是 ...4 flutter 平台嵌入 原生view 1 创建原生组件 创建在fLutter工程时会生成几个文件夹，lib是放flutter工程代码，android和ios文件夹分别是对应的双平台的原生工程。 在这里直接打开An
flutter中使用android原生视图
weixin_43987915的博客
07-07 1084
虚拟显示模式（Virtual displays） 将 android.view.View 实例渲染为纹理，不会嵌入到 Activity 的视图层次结构中。 键盘处理和辅助功能可能无法工作。 混合集成模式（Hybrid composition） 需要 Flutter 1.22（推荐 1.22.2）。 将原生的 android.view.View 附加到视图层次结构中。键盘处理和无障碍功能是开箱即用的。 Android 10 之前，这个模式会大大降低 Flutter UI 的帧率（FPS）。此widget继承S
Flutter之嵌入AndroidView开发
kkloqin的专栏
09-29 1770
一、背景 项目开发需要将h5开发的地图功能切换成由native开发的地图功能，现在想要在flutter的widget中嵌入AndroidView去开发地图功能。 二、使用方法 目录中新建几个文件： 1、需要添加以下文件 public class MyView implements PlatformView , MethodChannel.MethodCallHandler{ private final TextView natvieTextView; Context context;
Android笔记：在Flutter中嵌入原生View，手握5家大厂offer
2401_84103216的博客
04-04 885
由于本文罗列的知识点是根据我自身总结出来的，并且由于本人水平有限，无法全部提及，欢迎大神们能补充~将来我会对上面的知识点一个一个深入学习，也希望有童鞋跟我一起学习，一起进阶。提升架构认知不是一蹴而就的，它离不开刻意学习和思考。**这里，笔者分享一份从架构哲学的层面来剖析的视频及资料分享给大家，**梳理了多年的架构经验，筹备近1个月最新录制的，相信这份视频能给你带来不一样的启发、收获。，第一时间获取最新知识点Android架构师之路很漫长，一起共勉吧！本文已被。
Android笔记：在Flutter中嵌入原生View，12个View绘制流程高频面试题
m0_69440446的博客
04-12 459
第一次观看我文章的朋友，可以关注、点赞、转发一下，每天分享各种干货技术和程序猿趣事 由于涉及到的面试题较多导致篇幅较长，我根据这些面试题所涉及到的常问范围总结了并做出了一份学习进阶路线图​​​​​​​及面试题答案免费分享给大家，文末有免费领取方式！ 首先是MainActivity的布局文件，上面一个FrameLayout用于承载Flutter。 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.Cons.
Android笔记：在Flutter中嵌入原生View，2021最新Android笔试题目
m0_66155412的博客
01-11 140
android:layout_height=“match_parent” android:background="#000000" tools:context=".MainActivity"> </android.support.constraint.ConstraintLayout> Flutter以一个View的方式被装载。 class MainActivity : AppCompatActivity() { @RequiresApi(Build.VERSION_CODES.LOL
安卓项目嵌入flutter
caperxi的博客
03-09 526
https://flutter.cn/docs/development/add-to-app 第1步 在 Android Studio 打开现有的 Android 项目并点击菜单按钮 File > New > New Module… ，这样就可以创建出一个可以集成的新 Flutter 模块，或者选择导入已有的 Flutter 模块 问题：Android Studio 中没有找到flutter module 解决1：在settings 中找到plugins 下载flutter 插件 安装 解决2
Flutter嵌入原生View，使用原生的WebView
朱豪凯的博客
01-07 5029
在Flutter开发过程中，我们发现Flutter对于WebView的支持并不太好，而我们原生项目中，使用的腾讯的X5 WebView，所以也想在Flutter中进行嵌入使用。
Flutter开发之——AndroidView
我的博客
07-19 2502
一 AndroidView说明 AndroidView是一个原生端自定义的View，继承自PlatformView 混合开发中，自定义后的AndroidView，可以在flutter端使用 AndroidView可以在原生端和Flutter之间传递数据 二 自定义AndroidView 2.1 原生项目添加FlutterModule settings.gradle setBinding(new Binding([gradle: this])) evaluate(new File( settings
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值