體驗了Flutter的專案開發體驗後,肯定會產生眾多的困惑。我第一個想到的問題是,移動端宿主APP是如何將我們編寫的Flutter程式碼整合進去的?
按平臺來,本篇文章先來看看iOS專案如何整合Flutter程式碼的。我的代發分析基於此專案。
Pod
我們用Xcode開啟iOS專案,主專案裡面程式碼很少很簡介。
我們第一個想到的肯定是用CocoaPod新增了一些依賴,接下來我們就來看看Podfile
這個依賴的配置檔案。
Podfile
// 1 檢查環境變數檔案Generated.xcconfig
def flutter_root
generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
unless File.exist?(generated_xcode_build_settings_path)
raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
end
File.foreach(generated_xcode_build_settings_path) do |line|
matches = line.match(/FLUTTER_ROOT\=(.*)/)
return matches[1].strip if matches
end
raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
end
// 2 引入podhelper.rb
require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
flutter_ios_podfile_setup
target 'Runner' do
use_frameworks!
use_modular_headers!
// 3 執行podhelper.rb 中的 flutter_install_all_ios_pods 方法
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end
// 4 執行podhelper.rb 中的flutter_additional_ios_build_settings方法
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
end
end
複製程式碼
1. 檢查環境變數檔案---Generated.xcconfig
先要確保在iOS專案中的Flutter資料夾下有Generated.xcconfig
這個檔案,Generated.xcconfig
這個檔案是定義了一些Flutter和Dart相關的變數,例如FLUTTER_ROOT
,FLUTTER_APPLICATION_PATH
,FLUTTER_TARGET
等,為後續的Pod依賴提供基礎。
Generated.xcconfig
FLUTTER_ROOT= /Users/*/Documents/flutter
FLUTTER_APPLICATION_PATH=/Users/*/Documents/FlutterVideos/feibo_movie/feibo_movie
FLUTTER_TARGET=/Users/chongling.liu/Documents/FlutterVideos/feibo_movie/feibo_movie/lib/main.dart
FLUTTER_BUILD_DIR=build
SYMROOT=${SOURCE_ROOT}/../build/ios
OTHER_LDFLAGS=$(inherited) -framework Flutter
FLUTTER_FRAMEWORK_DIR=/Users/*/Documents/flutter/bin/cache/artifacts/engine/ios
FLUTTER_BUILD_NAME=1.0.0
FLUTTER_BUILD_NUMBER=1
DART_DEFINES=flutter.inspector.structuredErrors%3Dtrue
DART_OBFUSCATION=false
TRACK_WIDGET_CREATION=true
TREE_SHAKE_ICONS=false
PACKAGE_CONFIG=.packages
複製程式碼
2. 引入podhelper.rb
檔案
podhelper.rb
在FLUTTER_ROOT/packages/flutter_tools/bin
資料夾下,檔案中定義了一些Pod相關方法。
3. 執行podhelper.rb
中的 flutter_install_all_ios_pods
方法
flutter_install_all_ios_pods
中呼叫了flutter_install_ios_engine_pod
和flutter_install_ios_plugin_pods
方法,這兩個方法分別配置Flutter引擎和第三方庫。
def flutter_install_all_ios_pods(ios_application_path = nil)
flutter_install_ios_engine_pod(ios_application_path)
flutter_install_ios_plugin_pods(ios_application_path)
end
複製程式碼
flutter_install_ios_engine_pod
中主要是將Flutter引擎即Flutter.framework和Flutter.podspec這兩個檔案從FLUTTER_ROOT/bin/cache/artifacts/engine/ios
拷貝到iOS專案的Flutter資料夾下, 然後配置依賴
pod 'Flutter', :path => 'Flutter'
複製程式碼
def flutter_install_ios_engine_pod(ios_application_path = nil)
//省略...
system('cp', '-r', File.expand_path('Flutter.framework', debug_framework_dir), copied_flutter_dir)
system('cp', File.expand_path('Flutter.podspec',debug_framework_dir), copied_flutter_dir)
pod 'Flutter', :path => 'Flutter'
end
複製程式碼
flutter_install_ios_plugin_pods
是配置Flutter庫依賴的第三方iOS庫或者iOS檔案的依賴的方法。
說起來有點繞,舉個例子。我們的FLutter程式碼中使用了sqflite
庫,sqflite
在iOS中底層呼叫的的FMDB
這個庫,所以需要配置FMDB的依賴。
def flutter_install_ios_plugin_pods(ios_application_path = nil)
plugins_file = File.join(ios_application_path, '..', '.flutter-plugins-dependencies')
plugin_pods = flutter_parse_plugins_file(plugins_file)
plugin_pods.each do |plugin_hash|
plugin_name = plugin_hash['name']
plugin_path = plugin_hash['path']
if (plugin_name && plugin_path)
symlink = File.join(symlink_plugins_dir, plugin_name)
File.symlink(plugin_path, symlink)
pod plugin_name, :path => File.join('.symlinks', 'plugins', plugin_name, 'ios')
end
end
end
複製程式碼
這個方法的流程是讀取iOS檔案同級目錄下的.flutter-plugins-dependencies
檔案, 讀取plugins欄位下的ios陣列,對陣列的每個元素配置依賴。
pod 'sqflite', :path => 'FLUTTER_ROOT/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+3/ios'
複製程式碼
.flutter-plugins-dependencies
{
"plugins":{
...
"ios":[
{
"name":"sqflite",
"path":"/Users/*/Documents/flutter/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+3/",
"dependencies":[
]
}
...
]
}
}
複製程式碼
4. 執行podhelper.rb
中的flutter_additional_ios_build_settings
方法
這個就是將ENABLE_BITCODE設定為NO。
總結:
通過一系列的配置檔案的讀取,檔案的拷貝等操作,Podfile會將flutter引擎和iOS的依賴庫引入進來,最後的結果接近於:
target 'Runner' do
pod 'Flutter', :path => 'Flutter'
pod 'sqflite', :path => 'FLUTTER_ROOT/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+3/ios'
pod 'sqflite', :path => 'FLUTTER_ROOT/.pub-cache/hosted/pub.dartlang.org/shared_preferences-0.5.12+4/ios'
pod 'sqflite', :path => 'FLUTTER_ROOT/.pub-cache/hosted/pub.dartlang.org/fijkplayer-0.8.7/ios'
end
post_install do |installer|
installer.pods_project.build_configurations.each do |config|
config.build_settings['ENABLE_BITCODE'] = 'NO'
end
end
複製程式碼
提示:FMDB並沒有出現在Podfile檔案中,是因為
sqflite
依賴於FMDB,所以會根據依賴的依賴安裝FMDB。這是CocoaPod基礎知識,iOS開發者應該很熟悉了,就不再這裡說明了。
Plguin
APP專案的入口是AppDelegate,繼承自Flutter.framework的FlutterAppDelegate。
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
複製程式碼
1. 註冊外掛
AppDelegate在didFinishLaunchingWithOptions
裡面執行了GeneratedPluginRegistrant.register(with: self)
一行程式碼。
GeneratedPluginRegistrant
+ (void)registerWithRegistry:(NSObject<FlutterPluginRegistry>*)registry {
[FijkPlugin registerWithRegistrar:[registry registrarForPlugin:@"FijkPlugin"]];
[FLTSharedPreferencesPlugin registerWithRegistrar:[registry registrarForPlugin:@"FLTSharedPreferencesPlugin"]];
[SqflitePlugin registerWithRegistrar:[registry registrarForPlugin:@"SqflitePlugin"]];
[FLTURLLauncherPlugin registerWithRegistrar:[registry registrarForPlugin:@"FLTURLLauncherPlugin"]];
}
複製程式碼
GeneratedPluginRegistrant中的+ (void)registerWithRegistry:(NSObject<FlutterPluginRegistry>*)registry
方法實現是執行flutter pub get
的時候Flutter自動生成的,當然只有依賴與iOS原生進行互動的Flutter庫才會註冊外掛。。
這個檔案也可以手動去編輯,但是一般沒有這個必要。
我們以SqflitePlugin為例介紹Plugin的註冊流程。
SqflitePlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
FlutterMethodChannel* channel = [FlutterMethodChannel
methodChannelWithName:_channelName
binaryMessenger:[registrar messenger]];
SqflitePlugin* instance = [[SqflitePlugin alloc] init];
[registrar addMethodCallDelegate:instance channel:channel];
}
複製程式碼
FlutterMethodChannel是一個通道,Flutter可以通過它向iOS宿主App呼叫方法,然後獲取結果。
流程入下圖:
上面這段程式碼代表的含義是:
- 建立一個名字為SqflitePlugin的FlutterMethodChannel
- 將這個channel註冊到FLutterEngine中,這樣flutter程式碼就可以通過FLutterEngine呼叫這個channel的
- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result{}
方法。
FlutterEngine
- (void)addMethodCallDelegate:(NSObject<FlutterPlugin>*)delegate
channel:(FlutterMethodChannel*)channel {
[channel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
[delegate handleMethodCall:call result:result];
}];
}
複製程式碼
2. Flutter端方法的定義和呼叫
sqflite外掛的pubspec.yaml檔案中定義了SqflitePlugin
這個名字,所以Flutter端的程式碼知道通過哪個MethodChannel向iOS程式碼傳送訊息。這個名字和iOS端是對應的。
pubspec.yaml
flutter:
plugin:
platforms:
android:
package: com.tekartik.sqflite
pluginClass: SqflitePlugin
ios:
pluginClass: SqflitePlugin
macos:
pluginClass: SqflitePlugin
複製程式碼
sqflite定義了很多方法,譬如insert
方法。這些方法都是非同步的,所以返回值需要用Future包裹。
Future<int> insert(String table, Map<String, dynamic> values,
{String nullColumnHack, ConflictAlgorithm conflictAlgorithm});
複製程式碼
運算元據庫的時候Flutter程式碼可以直接呼叫insert方法,這時候FlutterEngine就將引數傳遞給了iOS程式碼,等待一步返回。
2. iOS端方法處理並返回值
由於在AppDelegate中註冊了對應的外掛SqflitePlugin,然後FlutterEngine會呼叫- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result{}
方法。
SqflitePlugin
- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
FlutterResult wrappedResult = ^(id res) {
dispatch_async(dispatch_get_main_queue(), ^{
result(res);
});
};
...
else if ([_methodInsert isEqualToString:call.method]) {
[self handleInsertCall:call result:wrappedResult];
}
...
else {
result(FlutterMethodNotImplemented);
}
}
// 執行插入操作
- (void)handleInsertCall:(FlutterMethodCall*)call result:(FlutterResult)result {
SqfliteDatabase* database = [self getDatabaseOrError:call result:result];
if (database == nil) {
return;
}
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
[database.fmDatabaseQueue inDatabase:^(FMDatabase *db) {
SqfliteMethodCallOperation* operation = [SqfliteMethodCallOperation newWithCall:call result:result];
[self insert:database fmdb:db operation:operation];
}];
});
}
複製程式碼
FMDB執行完插入操作後,將結果封裝到FlutterResult中,返回給Flutter。
FlutterAppDelegate
我們的AppDelegate主要的任務是執行了外掛的註冊。讓Flutter程式碼可以方便的呼叫Native程式碼。
而AppDelegate是繼承自FlutterAppDelegate,那FlutterAppDelegate又做了哪些工作呢?
FlutterAppDelegate在Flutter.framework中,由於是打包成了庫,我們只能看到標頭檔案,如果我們需要看原始碼,則需要進入Flutter Engine中去檢視原始碼。
FlutterAppDelegate
@implementation FlutterAppDelegate {
FlutterPluginAppLifeCycleDelegate* _lifeCycleDelegate;
}
// Returns the key window's rootViewController, if it's a FlutterViewController.
// Otherwise, returns nil.
- (FlutterViewController*)rootFlutterViewController {
if (_rootFlutterViewControllerGetter != nil) {
return _rootFlutterViewControllerGetter();
}
UIViewController* rootViewController = _window.rootViewController;
if ([rootViewController isKindOfClass:[FlutterViewController class]]) {
return (FlutterViewController*)rootViewController;
}
return nil;
}
#pragma mark - FlutterPluginRegistry methods. All delegating to the rootViewController
- (NSObject<FlutterPluginRegistrar>*)registrarForPlugin:(NSString*)pluginKey {
FlutterViewController* flutterRootViewController = [self rootFlutterViewController];
if (flutterRootViewController) {
return [[flutterRootViewController pluginRegistry] registrarForPlugin:pluginKey];
}
return nil;
}
- (BOOL)hasPlugin:(NSString*)pluginKey {
FlutterViewController* flutterRootViewController = [self rootFlutterViewController];
if (flutterRootViewController) {
return [[flutterRootViewController pluginRegistry] hasPlugin:pluginKey];
}
return false;
}
- (NSObject*)valuePublishedByPlugin:(NSString*)pluginKey {
FlutterViewController* flutterRootViewController = [self rootFlutterViewController];
if (flutterRootViewController) {
return [[flutterRootViewController pluginRegistry] valuePublishedByPlugin:pluginKey];
}
return nil;
}
複製程式碼
重要程式碼解釋如下:
-
FlutterAppDelegate有一個FlutterPluginAppLifeCycleDelegate型別的
_lifeCycleDelegate
屬性,它的作用是分發App生命週期的改變。它的有一個重要的方法- (void)addDelegate:(NSObject<FlutterApplicationLifeCycleDelegate>*)delegate {}
, 就是誰想知道App的生命週期就加進來,它會在App的生命週期發生改變的時候一一通知大家。 -
FlutterAppDelegate的根檢視為一個FlutterViewController型別的物件
flutterRootViewController
。 -
和Plugin相關的一系列程式碼,主要是將這些Plugin註冊到
flutterRootViewController
的FlutterEngine物件上。
這也很好理解MethodChannel是如何在 AppDelegate中連線起來,因為
flutterRootViewController
載入的就是Flutter App編譯的程式碼。
FlutterViewController
前面提到了FlutterAppDelegate的根檢視是FlutterViewController。那這個FlutterViewController是如何去載入Flutter App的呢?
FlutterViewController
@implementation FlutterViewController {
std::unique_ptr<fml::WeakPtrFactory<FlutterViewController>> _weakFactory;
fml::scoped_nsobject<FlutterEngine> _engine;
fml::scoped_nsobject<FlutterView> _flutterView;
fml::scoped_nsobject<UIView> _splashScreenView;
}
複製程式碼
FlutterViewController有幾個重要的屬性:
_engine
就是FlutterEngine,負責渲染互動等功能_flutterView
是顯示Flutter App的View_splashScreenView
是顯示啟動圖的View
重點來了
FlutterViewController的各種建構函式最後都會呼叫
- (void)sharedSetupWithProject:(nullable FlutterDartProject*)project initialRoute:(nullable NSString*)initialRoute
FlutterViewController
- (void)sharedSetupWithProject:(nullable FlutterDartProject*)project
initialRoute:(nullable NSString*)initialRoute {
// Need the project to get settings for the view. Initializing it here means
if (!project) {
project = [[[FlutterDartProject alloc] init] autorelease];
}
auto engine = fml::scoped_nsobject<FlutterEngine>{[[FlutterEngine alloc]
initWithName:@"io.flutter"
project:project
allowHeadlessExecution:self.engineAllowHeadlessExecution
restorationEnabled:[self restorationIdentifier] != nil]};
_flutterView.reset([[FlutterView alloc] initWithDelegate:_engine opaque:self.isViewOpaque]);
[_engine.get() createShell:nil libraryURI:nil initialRoute:initialRoute];
[self loadDefaultSplashScreenView];
[self performCommonViewControllerInitialization];
}
複製程式碼
- 生成一個FlutterDartProject物件
project
,這個物件主要是描述了Flutter APP的一些相關資訊,最重要的一個是找到可執行檔案。 - 根據這個
project
的設定資訊生成一個FlutterEngine物件engine
。 - 生成一個FlutterView物件
_flutterView
來作為渲染的View。 _engine
找到Flutter APP的可執行檔案的入口main.dart
開始執行,然後渲染到_flutterView
上。- 看是否需要載入啟動圖
- 一些通用的初始化內容
FlutterDartProject
FlutterDartProject中通過FLTDefaultSettingsForBundle
方法可以生成一些通用設定。
flutter::Settings FLTDefaultSettingsForBundle(NSBundle* bundle) {
// Frameworks directory.
if (settings.application_library_path.size() == 0) {
NSString* applicationFrameworkPath = [mainBundle pathForResource:@"Frameworks/App.framework"
ofType:@""];
if (applicationFrameworkPath.length > 0) {
NSString* =
[NSBundle bundleWithPath:applicationFrameworkPath].executablePath;
if (executablePath.length > 0) {
settings.application_library_path.push_back(executablePath.UTF8String);
}executablePath
}
}
}
// Checks to see if the flutter assets directory is already present.
if (settings.assets_path.size() == 0) {
NSString* assetsName = [FlutterDartProject flutterAssetsName:bundle];
NSString* assetsPath = [bundle pathForResource:assetsName ofType:@""];
}
}
// Domain network configuration
NSDictionary* appTransportSecurity =
[mainBundle objectForInfoDictionaryKey:@"NSAppTransportSecurity"];
settings.may_insecurely_connect_to_all_domains =
[FlutterDartProject allowsArbitraryLoads:appTransportSecurity];
settings.domain_network_policy =
[FlutterDartProject domainNetworkPolicy:appTransportSecurity].UTF8String;
}
return settings;
}
複製程式碼
這段程式碼主要做了以下一些事情:
- 如果不特殊指定的話,Flutter APP的執行檔案是位於FLutter目錄下的
App.framework
中那個命名為App的可執行檔案,也就是說所有的Flutter程式碼都打包成了一個可執行檔案。
2. 指定了圖片的路徑 3. 網路設定,是否允許HTTP請求。