Flutter、Android混合开发--Flutter Plugin篇

前言:作为一名大前端开发者,我的技术栈其实一直都很混乱,从Flutter到小程序再到Vue,我都做过不少项目。原因可能是我一直以来都想做大前端的念想,加上以往公司业务方向,让我对所有前端技术来着不拒。
但是总有一门技术需要钻精,于是我果断选择了Flutter,这半年来也一直在做Flutter的项目;但想要成为Flutter高级开发者,不会原生岂能说的过去,而我的前端刚好也是大学选修Android而入门的;所以我决定开始学习并记录Flutter与Android混合开发系列文章。与君共勉~

一、Flutter与Android混合开发的类别

先做下总结,整个系列包括:Flutter package(Flutter纯Dart库)、Flutter Plugin(Flutter原生插件库)、Android混入Flutter模块。
以下再做细分:

  • package是纯dart代码的库,供Flutter引用;

  • Plugin是原生插件库,是一种特殊的package,Plugin涉及这几个方面:Flutter与原生间相互的数据通信、
    Flutter显示Android 视图、
    Flutter跳转到Android Activity、Android Fragment。

  • Android混入Flutter模块:通过引入Flutter Module,分别在Android端的Activity和Fragment中显示Flutter视图。

二、Flutter Plugin开发详解

Plugin即原生插件,开发者需要编写android、iOS双端的代码,然后由Flutter层直接调用。由于笔者只学Android,所以iOS端的功能我能省都会省了。另外,在编写Flutter插件时,官方已经启用Flutter Engine来管理插件,因此写法与网上的旧资料也会有所不同。

这篇文章我将实现:Flutter显示Android view!
下一篇文章再记录:1. Flutter与Android的通信(包括MethodChannel、BasicMessageChannel、EventChannel)2. Flutter跳转到原生Activity、Fragment;

1、 Flutter Plugin的创建

若是使用Android studio开发工具的开发者,可以在菜单栏中直接创建一个plugin项目,根据提示一步步选择即可;
创建Plugin

当然我建议你用命令行创建项目(其中-a指定android的开发语言,-i指定ios的开发语言):

flutter create --org com.example --template=plugin --platforms=android,ios -a java -i swift hello

创建好后的目录结构如图所示:
Plugin目录结构

2. Flutter显示Android View

  1. 打开android studio模块,以便更快捷的编写代码;
  2. 可以看到有两个android module,其中我们要编写的是插件的模块;
    module目录结构
  3. 我们需要创建一个原生视图布局,在包名下面创建一个新的视图,这里我只是简单构建了一个Text控件,这部分属于原生的能力,笔者也不太熟悉。
package com.karl.wei.my_camera;

import android.content.Context;
import android.view.View;
import android.widget.TextView;

import java.util.Map;

import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.platform.PlatformView;

public class MyInfoView implements PlatformView {

    private final TextView name;


    public MyInfoView(Context context, BinaryMessenger messenger, int id, Map params){
        TextView textView = new TextView(context);
        textView.setText("正在加载...");

        this.name = textView;

        if(params!=null&¶ms.containsKey("content")){
            String t = (String)params.get("content");
            textView.setText(t);
        }

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

    @Override
    public void dispose() {

    }
}
  1. 之后需要构建一个视图工厂的类,提供给Engine进行视图的注册,其中create生命周期需要retrun对应的视图文件。
import android.content.Context;

import com.karl.wei.my_camera.MyInfoView;

import java.util.Map;

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

public class MyViewFactory extends PlatformViewFactory {

    private final BinaryMessenger messenger;

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

    @Override
    @SuppressWarnings("unchecked")
    public PlatformView create(Context context, int id, Object o) {
        Map params = (Map) o;
        return new MyInfoView(context, messenger, id, params);
    }
}

  1. 然后需要在插件的类中,注册我们要返回的视图,注册时需要传入唯一标识和视图工厂,每一个标识对应一个视图工厂。
  @Override
  public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
    // 需要注册的视图的唯一标识
    final String key = "karl_info";
    // 创建MethodChannel通道,my_camera与yaml的name是需要对应的
    channel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), "my_camera");
    channel.setMethodCallHandler(this);
    // 注册原生view,通过注册视图工厂(ViewFactory),需要传入唯一标识和ViewFactory类
    flutterPluginBinding.getPlatformViewRegistry().registerViewFactory(key, new MyViewFactory(flutterPluginBinding.getBinaryMessenger()));
  }

下面是3、4、5步的文件路径截图
  1. 到这里,原生视图算是简单编写完成;接下来还需要Flutter将我们再原生的视图给暴露出去,让纯Flutter项目可以简单的接入我们的视图。回到plugin目录下,我们新建一个dart文件,通过Flutter提供的AndroidView返回我们的原生布局,AndroidView接收一个viewType参数,这个参数就是试图的唯一标识,跟第5点相对应。
import 'dart:io';

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

class InfoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String viewType = 'karl_info'; // 唯一标识符
    var creationParams = {
      'type': 'info_view',
    }; // 视图创建参数,可以被插件用来传递构造函数参数到嵌入式Android视图
    // 视图创建完毕的回调
    PlatformViewCreatedCallback callback = (id) {
      print(id);
    };
    // 判断设备类型,也可用:defaultTargetPlatform == TargetPlatform.android
    if (Platform.isAndroid) {
      return AndroidView(
        viewType: viewType,
        onPlatformViewCreated: callback,
      );
    } else if (Platform.isIOS) {
      return UiKitView(
        viewType: viewType,
        onPlatformViewCreated: callback,
      );
    } else {
      return Text('Platform is not yet supported by this plugin');
    }
  }
}

  1. 现在,Flutter端如何使用我们的视图?如果由于某些问题,你的插件只能本地引用的时候,首先在yaml配置文件中引入插件,然后在项目的android中主文件注册插件。
dependencies:
  flutter:
    sdk: flutter

  my_camera:
    path: ../
package io.flutter.plugins;

import androidx.annotation.Keep;
import androidx.annotation.NonNull;

import io.flutter.embedding.engine.FlutterEngine;

/**
 * Generated file. Do not edit.
 * This file is generated by the Flutter tool based on the
 * plugins that support the Android platform.
 */
@Keep
public final class GeneratedPluginRegistrant {
  public static void registerWith(@NonNull FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new com.karl.wei.my_camera.MyCameraPlugin());
  }
}

如果你开发过flutter项目,到这里你应该会疑惑,以前项目引入那么多的开源插件,都不需要手动注册插件呀,怎么到这里就需要了?其实,当我们执行flutter pub get时,编译器就自动为我们加入相应插件的注册了,不信你看看看这个文件,嘿嘿!

  1. 然后在你的项目中,需要的地方引用即可
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Container(
          child: Center(
            child: InfoWidget(),
          ),
        ),
      ),
    );
  }

三、总结

梳理下Flutter Plugin显示Android View的逻辑:

① 创建完插件后,在原生层新建一个文件继承自PlatformView,编写视图内容;
② PlatformViewFactory创建一个视图工厂继承自PlatformViewFactory,其中create生命周期返回对应的视图文件;
③ 在插件主文件中注册视图,并定义好唯一标识;
④ 在Flutter层使用AndroidView通过传入③中定义好的标识,通过视图工厂取出视图;
⑤ Flutter使用者调用即可。

另外,原生视图同样可以传递参数,跟view的层层传递是一起完成的。如AndroidView中是传递creationParams,PlatformViewFactory在create中接收并传递给真正的PlatformView,这里不做拓展。

四、写在最后

其实Flutter显示原生View笔者认为没有太大意义,因为Flutter本身就是一个非常完美的UI框架,既然选择使用Flutter,其实用到原生视图的地方就比较少了。重点将在后续章节:Flutter与原生通信、Flutter调整Activity等功能的学习。

这篇文章仅仅是系列的开端,笔者也是边学边记录,希望能帮到大家,一起学习一起努力。
希望大家多多指导我!

后会有期

你可能感兴趣的:(Flutter、Android混合开发--Flutter Plugin篇)