Flutter 插件開發-有解無憂

前言

做了好多年的app開發,雖然問題遇到不少,也解決過不少,但是都沒有記錄下來,因為自己懶,有時候也因為自己作業忙忘記了,沒有寫過也沒有維護過iOS相關的技術文章,沒想著這里都深感慚愧, Flutter 從1.0發布到現在也挺長時間了,也有許多公司已經開始嘗試做吃螃蟹的人,剛好公司現在用到Flutter開發,但是Flutter 插件并不像原生iOS或者原生安卓那么豐富,有時候PM的需求又是那么的難搞,難免避免不了需要自己開發插件,那我就把我開發插件的小經驗分享出來,希望能幫助到一些朋友.

一準備作業

Flutter 環境搭建我就不在這里贅述了,新建一個組件模板,有兩種新建方式一種是通過命令列,一種是通過Android Studio

通過命令列創建:

flutter create -t plugin flutter_plugin
復制代碼

Android Studio 創建

選擇第二項 Start a new Flutter project

選擇Flutter Plugin

安卓第二步驟.jpg

填寫插件名稱

紅線圈起來的地方根據自己的語言選擇默認安卓專案是java iOS專案是Object-c,要是需要Kotlin 和 Swift的話要打上勾,我是一直使用Object-c 所以下面的講解演示用OC 來寫

這是新創建完的插件模板目錄

寫原生代碼的話就在example 目錄里找到對應的iOS 或者是安卓目錄,以iOS為例新創建的iOS代碼是不包含 pod檔案夾的所以無法運行需要先在example里面的iOS 檔案夾里運行 pod install 來安裝需要的依賴包

然后就可以運行示例工程了

至此Flutter 插件開發準備作業就結束了,下面讓我們進入真正的插件開發吧

磨拳霍霍向豬羊---- 插件開發

讓我們先從Dart代碼開始

這是模板剛創建的dart代碼

我們先簡化一下代碼把沒用的代碼刪掉再把相關報錯的代碼注釋掉

///先定義一個controller創建成功回呼 后面會用到
typedef void TestViewCreatedCallback(TestFlutterPluginDemo controller);
class TestFlutterPluginDemo {
  MethodChannel _channel;
  TestFlutterPluginDemo.init(int id){
    _channel = new MethodChannel('test_flutter_plugin_demo');
  }
}
復制代碼

TestFlutterPluginDemo 這個類我理解的是主要負責和原生進行互動,呼叫原生的方法和監聽原生方法, 然后讓我們新建一個view類主要是加載原生的視圖

///我是使用的 StatefulWidget 使用StatelessWidget 也是一樣
class TestView extends StatefulWidget {
  ///根據自己的需求創建初始化引數
  final TestViewCreatedCallback onCreated; ///是上面創建的回呼
  final String titleStr;

  TestView({
    Key key,
   this.onCreated,
   this.titleStr,
});

  @override
  _TestViewState createState() => _TestViewState();
}

class _TestViewState extends State<TestView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: _loadNativeView(),
    );
  }
///加載原生視圖
  Widget _loadNativeView(){
    ///根據不同的平臺顯示相應的視圖
    if(Platform.isAndroid){ ///加載安卓原生視圖
      return AndroidView(
        viewType: 'testView',///視圖識別符號 要和原生 保持一致 要不然加載不到視圖
        onPlatformViewCreated:onPlatformViewCreated,///原生視圖創建成功的回呼
        creationParams: <String, dynamic>{ ///給原生傳遞初始化引數 就是上面定義的初始化引數
          'titleStr':widget.titleStr,
        },
        /// 用來編碼 creationParams 的形式，可選 [StandardMessageCodec], [JSONMessageCodec], [StringCodec], or [BinaryCodec]
        /// 如果存在 creationParams，則該值不能為null
        creationParamsCodec: const StandardMessageCodec(),
      );
    }else if(Platform.isIOS){///加載iOS原生視圖
      return UiKitView(
        viewType: 'testView',///視圖識別符號 要和原生 保持一致 要不然加載不到視圖
        onPlatformViewCreated:onPlatformViewCreated,///原生視圖創建成功的回呼
        creationParams: <String, dynamic>{ ///給原生傳遞初始化引數 就是上面定義的初始化引數
          'titleStr':widget.titleStr,
        },
        /// 用來編碼 creationParams 的形式，可選 [StandardMessageCodec], [JSONMessageCodec], [StringCodec], or [BinaryCodec]
        /// 如果存在 creationParams，則該值不能為null
        creationParamsCodec: const StandardMessageCodec(),
      );
    }else{
      return Text('這個平臺老子不支持');
    }
  }
  ///我也是剛學Flutter 所以我理解的:這個基本上是固定寫法   哈哈
  Future<void> onPlatformViewCreated(id) async {
    if (widget.onCreated == null) {
      return;
    }
    widget.onCreated(new TestFlutterPluginDemo.init(id));
  }
}
復制代碼

截止到現在Dart的主要代碼就寫完了,代碼中的注釋已經很細了,小伙伴們可以跟著代碼一步一步的敲一下,增強一下記憶力和代碼熟悉程度. 剩下的就是在main.dart 里面加載視圖了,

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 
  ///定義一個測驗類的屬性 用來呼叫原生方法 和原生互動
  var testFlutterPluginDemo;

  @override
  void initState() {
    super.initState();

  }
  
  @override
  Widget build(BuildContext context) {
    ///初始化 測驗視圖的類
    TestView testView = new TestView(
      onCreated: onTestViewCreated,
    );
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: <Widget>[
            Container(
              height: 200,
              width: 400,
              child: testView,///使用原生視圖
            )
          ],
        )
      ),
    );
  }

  void onTestViewCreated(testFlutterPluginDemo){
    this.testFlutterPluginDemo = testFlutterPluginDemo;
  }
}
復制代碼

在main.dart里面添加加載視圖的代碼后插件開發 Dart相關代碼就寫完了,下面咱們開始寫原生代碼了,強調一下哈 iOS 代碼為例 OC語言

開始原生代碼

讓我們先看一下測驗工程的代碼檔案目錄

發現有兩個檔案 GeneratedPluginRegistrant.h 和 GeneratedPluginRegistrant.m,但是這兩個檔案不是咱們需要敲代碼的頁面,咱們敲代碼的頁面隱藏的比較深在下面的這個目錄里

一定要在pod /Development Pods 里面找到Classes檔案夾里的這兩個檔案開發, 新建類也要在這個目錄里面, 使用過iOS 組件發開發的同學一定很熟悉,原理差不多喲 好了開始原生代碼開發吧 先讓我們新建一個Factory 來連接 Flutter 的視圖吧新建的 Factory 要繼承與 NSObject 然后在新建一個view類也要繼承與NSObject 來寫原生頁面布局兩個類的代碼如下

factory.h

#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>
NS_ASSUME_NONNULL_BEGIN

@interface TestFlutterPluginViewFactory : NSObject<FlutterPlatformViewFactory>

/// 重寫一個構造方法 來接收 Flutter 相關蠶食
/// @param messenger Flutter類 包含回呼方法等資訊
- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;

@end
復制代碼

factory.m

#import "TestFlutterPluginViewFactory.h"
#import "TestFlutterPluginView.h"
@interface TestFlutterPluginViewFactory ()

@property(nonatomic)NSObject<FlutterBinaryMessenger>* messenger;

@end

@implementation TestFlutterPluginViewFactory

- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger>*)messenger {
    self = [super init];
    if (self) {
        self.messenger = messenger;
    }
    return self;
}

#pragma mark -- 實作FlutterPlatformViewFactory 的代理方法
- (NSObject<FlutterMessageCodec>*)createArgsCodec {
    return [FlutterStandardMessageCodec sharedInstance];
}

/// FlutterPlatformViewFactory 代理方法 回傳過去一個類來布局 原生視圖
/// @param frame frame
/// @param viewId view的id
/// @param args 初始化的引數
- (NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args{
    
    TestFlutterPluginView *testFlutterPluginView = [[TestFlutterPluginView alloc] initWithFrame:frame viewId:viewId args:args messager:self.messenger];
    return testFlutterPluginView;
    
}

@end
復制代碼

testView.h

#import <Foundation/Foundation.h>
#include <Flutter/Flutter.h>
NS_ASSUME_NONNULL_BEGIN

@interface TestFlutterPluginView : NSObject<FlutterPlatformView>
- (id)initWithFrame:(CGRect)frame
             viewId:(int64_t)viewId
               args:(id)args
           messager:(NSObject<FlutterBinaryMessenger>*)messenger;
@end
復制代碼

testView.m

#import "TestFlutterPluginView.h"

@interface TestFlutterPluginView ()
/** channel*/
@property (nonatomic, strong)  FlutterMethodChannel  *channel;
@end

@implementation TestFlutterPluginView
{
    CGRect _frame;
    int64_t _viewId;
    id _args;
   
}

- (id)initWithFrame:(CGRect)frame
  viewId:(int64_t)viewId
    args:(id)args
messager:(NSObject<FlutterBinaryMessenger>*)messenger
{
    if (self = [super init])
    {
        _frame = frame;
        _viewId = viewId;
        _args = args;
        
        ///建立通信通道 用來 監聽Flutter 的呼叫和 呼叫Fluttter 方法 這里的名稱要和Flutter 端保持一致
        _channel = [FlutterMethodChannel methodChannelWithName:@"test_flutter_plugin_demo" binaryMessenger:messenger];
        
        __weak __typeof__(self) weakSelf = self;

        [_channel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
            [weakSelf onMethodCall:call result:result];
        }];
       
    }
    return self;
}

- (UIView *)view{
    
    UIView *nativeView = [[UIView alloc] initWithFrame:_frame];
    nativeView.backgroundColor = [UIColor redColor];
    
    return nativeView;
     
}

#pragma mark -- Flutter 互動監聽
-(void)onMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result{
    
}
復制代碼

工廠類和視圖類都創建完了,現在可以到剛開始的模板里創建的 TestFlutterPluginDemoPlugin 這個類里去做關聯了 是/Development Pods 里面找到Classes檔案夾里的這兩個檔案 刪掉自帶的無用的代碼連接的實體代碼如下 TestFlutterPluginDemoPlugin.h

#import "TestFlutterPluginDemoPlugin.h"
#import "TestFlutterPluginViewFactory.h"

@implementation TestFlutterPluginDemoPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  
    TestFlutterPluginViewFactory *testViewFactory = [[TestFlutterPluginViewFactory alloc] initWithMessenger:registrar.messenger];
//這里填寫的id 一定要和dart里面的viewType 這個引數傳的id一致
    [registrar registerViewFactory:testViewFactory withId:@"testView"];
    
}

@end
復制代碼

現在顯示視圖的代碼就寫完了想要加載成功還要在 info.plist 里面添加

	<true/>
復制代碼

現在讓我們運行一下看看效果吧

加載原生視圖到現在就完成了下面讓我們開始來學習 Flutter 方法互相呼叫和傳值吧

Flutter 和原生互動

還是讓我們先寫Dart 代碼在上面咱們創建的 TestFlutterPluginDemo 這個類里面添加和原生互動代碼

typedef void TestViewCreatedCallback(TestFlutterPluginDemo controller);
class TestFlutterPluginDemo {

  MethodChannel _channel;
  TestFlutterPluginDemo.init(int id){
    _channel = new MethodChannel('test_flutter_plugin_demo');
    _channel.setMethodCallHandler(platformCallHandler);///設定原生引數監聽
  }

  ///Flutter 呼叫原生
  ///這里我傳了一個 字串 當然也可以傳Map
  Future<void> changeNativeTitle(String str) async{
    return _channel.invokeListMethod('changeNativeTitle',str);
  }

  ///實作監聽原生方法回呼
  Future<dynamic> platformCallHandler(MethodCall call) async {
    switch (call.method) {
      case "clickAciton":
        print('收到原生回呼 ---- $call.arguments');
        return ;
        break;
    }
  }
}
復制代碼

然后讓我們在main.dart 里面添加一個按鈕用來觸發呼叫原生

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  ///定義一個測驗類的屬性 用來呼叫原生方法 和原生互動
  var testFlutterPluginDemo;

  @override
  void initState() {
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    ///初始化 測驗視圖的類
    TestView testView = new TestView(
      onCreated: onTestViewCreated,
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: <Widget>[
            Container(
              height: 200,
              width: 400,
              child: testView,///使用原生視圖
            ),
            FloatingActionButton( ///添加一個按鈕 用來觸發原生呼叫
              onPressed: onNativeMethon, ///點擊方法里面呼叫原生
            )
          ],
        )
      ),
    );
  }

  void onTestViewCreated(testFlutterPluginDemo){
    this.testFlutterPluginDemo = testFlutterPluginDemo;
  }

  void onNativeMethon(){

    this.testFlutterPluginDemo.changeNativeTitle('Flutter 呼叫原生成功了');
  }

}
復制代碼

Dart 代碼寫完了讓我們寫原生代碼吧在我們剛才創建的testView 的添加一個 button 用來顯示Flutter的呼叫和呼叫Flutter 然后在onMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result 方法里監聽Flutter 呼叫吧

- (UIView *)view{
    
    UIView *nativeView = [[UIView alloc] initWithFrame:_frame];
    nativeView.backgroundColor = [UIColor redColor];
    
    _button = [UIButton buttonWithType:UIButtonTypeSystem];
    [_button setTitle:@"我是按鈕" forState:UIControlStateNormal];
    [_button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [_button setBackgroundColor:[UIColor lightGrayColor]];
    _button.frame = CGRectMake(100, 100, 100, 100);
    [nativeView addSubview:_button];
    [_button addTarget:self action:@selector(flutterMethod) forControlEvents:UIControlEventTouchUpInside];
    return nativeView;
     
}

#pragma mark -- Flutter 互動監聽
-(void)onMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result{
    //監聽Fluter
    if ([[call method] isEqualToString:@"changeNativeTitle"]) {
        [_button setTitle:call.arguments forState:UIControlStateNormal];
    }
    
}
//呼叫Flutter 
- (void)flutterMethod{
    [self.channel invokeMethod:@"clickAciton" arguments:@"我是引數"];
}
復制代碼

現在讓我們運行看一看效果吧

到現在位置插件開發就完成了,根據自己需要添加代碼就行了.

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/197718.html

標籤：其他

上一篇：windows 10 webrtc 下載與編譯以及遇到的問題

下一篇：react-native實作評價星星

Flutter 插件開發

前言

一 準備作業

磨拳霍霍向豬羊---- 插件開發

一準備作業