flutter中嵌入原生Android View

一、创建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() {
    }
}