前言
做了好多年的iOS開發,雖然問題遇到不少,也解決過不少,但是都沒有記錄下來,因為自己懶,有時候也因為自己工作忙忘記了,沒有寫過也沒有維護過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 外掛開發準備工作就結束了,下面讓我們進入真正的外掛開發吧
磨拳霍霍向豬羊---- 外掛開發
讓我們先從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,但是這兩個檔案不是我們們需要敲程式碼的頁面,我們們敲程式碼的頁面隱藏的比較深 在下面的這個目錄裡
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:@"我是引數"];
}
複製程式碼現在讓我們執行看一看效果吧