Flutter 内嵌原生组件 for android

前面做过 原生内嵌 flutter，

今天尝试下 flutter 内嵌原生组件 ImageView；

效果如下： flutter按钮 控制原生组件切换显示网络图片

这个步骤没啥说的；估计 AndroidStuido 版本不同 界面会有差异；

当然你也可以 命令行 进行创建

工程创建完毕后，下面的目录大致如下：

 

你可以直接运行这个工程，就能把这个 flutter plugins 模板工程跑起来，

flutter_plugins.dart 是系统自动帮你创建的我们不用管

我们创建 native_image.dart，  native_image_controller.dart 这两个脚本

 native_image.dart   用于UI展示

 这里注册了一个 切换图片的事件

void initState() {
  // TODO: implement initState
  super.initState();
  
  // 执行的切换图命令， 参数就是 图片的url
  widget.controller.addListener(() {
    // print(
    //     '-----------------------------imageUrl:${widget.controller.imageUrl}');
    _channel
        .invokeListMethod("changeImage", {'url': widget.controller.imageUrl});
  });
}

这里是实际创建原生界面的容器 根据不同系统进行的创建 （ios部分在下一章我们会讲到）

_loadNativeView() {
  if (Platform.isAndroid) {
    return AndroidView(
      viewType: 'imageView', //视图标识符 要和原生 保持一致 要不然加载不到视图
      onPlatformViewCreated: onPlatformViewCreated, //原生视图创建成功的回调
      creationParams: {
        'initUrl': widget.initUrl
      }, //给原生传递初始化参数 就是上面定义的初始化参数
      // 用来编码 creationParams 的形式，可选 [StandardMessageCodec], [JSONMessageCodec], [StringCodec], or [BinaryCodec]
      // 如果存在 creationParams，则该值不能为null
      creationParamsCodec: const StandardMessageCodec(),
    );
  } else if (Platform.isIOS) {
    return UiKitView(viewType: 'imageView');
  }
}

完整的脚本

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_plugins/native_image_controller.dart';

class NativeImage extends StatefulWidget {
  final NativeImageController controller;
  final String initUrl;
  const NativeImage({Key? key, required this.initUrl, required this.controller})
      : super(key: key);
  @override
  _NativeImageState createState() => _NativeImageState();
}

class _NativeImageState extends State {
  static const MethodChannel _channel =
      MethodChannel('flutter_plugins_native_image');
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    
    // 执行的切换图命令， 参数就是 图片的url
    widget.controller.addListener(() {
      // print(
      //     '-----------------------------imageUrl:${widget.controller.imageUrl}');
      _channel
          .invokeListMethod("changeImage", {'url': widget.controller.imageUrl});
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    widget.controller.removeListener(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      width: MediaQuery.of(context).size.width,
      height: 200,
      child: _loadNativeView(),
    );
  }

  Future onPlatformViewCreated(int id) async {
    // return widget.onCreated( new FlutterPlugins().)
    print('-----创建成功');
  }

  _loadNativeView() {
    if (Platform.isAndroid) {
      return AndroidView(
        viewType: 'imageView', //视图标识符 要和原生 保持一致 要不然加载不到视图
        onPlatformViewCreated: onPlatformViewCreated, //原生视图创建成功的回调
        creationParams: {
          'initUrl': widget.initUrl
        }, //给原生传递初始化参数 就是上面定义的初始化参数
        // 用来编码 creationParams 的形式，可选 [StandardMessageCodec], [JSONMessageCodec], [StringCodec], or [BinaryCodec]
        // 如果存在 creationParams，则该值不能为null
        creationParamsCodec: const StandardMessageCodec(),
      );
    } else if (Platform.isIOS) {
      return UiKitView(viewType: 'imageView');
    }
  }
}

native_image_controller.dart  用于原生的ImageView 显示图片的控制

 代码很简单

import 'package:flutter/cupertino.dart';

class NativeImageController extends ChangeNotifier {
  late String imageUrl;
  changeImage(String url) {
    imageUrl = url;
    notifyListeners();
  }
}

点击右上角  Open for Editing in Android Studio

  

其中： FlutterPluginsPlugin.java 系统生成 不用管

我们 新建 NativeViewPluginsView.java  和 NativeViewPluginsFactory.java

NativeViewPluginsFactory  是我们的一个工厂方法 承接创建的 原生页面固定写法

package com.john.flutter_plugins;

import android.content.Context;

import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.MessageCodec;
import io.flutter.plugin.common.StandardMessageCodec;
import io.flutter.plugin.platform.PlatformView;
import io.flutter.plugin.platform.PlatformViewFactory;

// https://blog.csdn.net/WangQingLei0307/article/details/122680290
public class NativeViewPluginsFactory extends PlatformViewFactory {
    private BinaryMessenger binaryMessenger = null;
    public NativeViewPluginsFactory(BinaryMessenger messenger){
        super(StandardMessageCodec.INSTANCE);
        this.binaryMessenger = messenger;
    }
    
    public NativeViewPluginsFactory(MessageCodec