Flutter系列一：探究Flutter App在iOS宿主App中的整合

體驗(yàn)了Flutter的項(xiàng)目開發(fā)體驗(yàn)后，肯定會(huì)產(chǎn)生眾多的困惑。我第一個(gè)想到的問題是，移動(dòng)端宿主APP是如何將我們編寫的Flutter代碼整合進(jìn)去的？

按平臺(tái)來，本篇文章先來看看iOS項(xiàng)目如何集成Flutter代碼的。

Pod

我們用Xcode打開iOS項(xiàng)目，主項(xiàng)目里面代碼很少很簡介。

Markdown

我們第一個(gè)想到的肯定是用CocoaPod添加了一些依賴，接下來我們就來看看Podfile這個(gè)依賴的配置文件。

Podfile
// 1 檢查環(huán)境變量文件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 執(zhí)行podhelper.rb 中的 flutter_install_all_ios_pods 方法
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

// 4 執(zhí)行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. 檢查環(huán)境變量文件---Generated.xcconfig

先要確保在iOS項(xiàng)目中的Flutter文件夾下有Generated.xcconfig這個(gè)文件，Generated.xcconfig這個(gè)文件是定義了一些Flutter和Dart相關(guān)的變量，例如FLUTTER_ROOT,FLUTTER_APPLICATION_PATH,FLUTTER_TARGET等，為后續(xù)的Pod依賴提供基礎(chǔ)。

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相關(guān)方法。

3. 執(zhí)行podhelper.rb 中的 flutter_install_all_ios_pods 方法

  • flutter_install_all_ios_pods中調(diào)用了flutter_install_ios_engine_pod和flutter_install_ios_plugin_pods方法，這兩個(gè)方法分別配置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這兩個(gè)文件從FLUTTER_ROOT/bin/cache/artifacts/engine/ios拷貝到iOS項(xiàng)目的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文件的依賴的方法。

說起來有點(diǎn)繞，舉個(gè)栗子。我們的FLutter代碼中使用了sqflite庫，sqflite在iOS中底層調(diào)用的的FMDB這個(gè)庫，所以需要配置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

這個(gè)方法的流程是讀取iOS文件同級(jí)目錄下的.flutter-plugins-dependencies文件, 讀取plugins字段下的ios數(shù)組，對(duì)數(shù)組的每個(gè)元素配置依賴。

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. 執(zhí)行podhelper.rb中的flutter_additional_ios_build_settings方法

這個(gè)就是將ENABLE_BITCODE設(shè)置為NO。

總結(jié):

通過一系列的配置文件的讀取，文件的拷貝等操作，Podfile會(huì)將flutter引擎和iOS的依賴庫引入進(jìn)來，最后的結(jié)果接近于：

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并沒有出現(xiàn)在Podfile文件中，是因?yàn)?code>sqflite依賴于FMDB，所以會(huì)根據(jù)依賴的依賴安裝FMDB。這是CocoaPod基礎(chǔ)知識(shí)，iOS開發(fā)者應(yīng)該很熟悉了，就不再這里說明了。

Plguin

APP項(xiàng)目的入口是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. 注冊(cè)插件

AppDelegate在didFinishLaunchingWithOptions里面執(zhí)行了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方法實(shí)現(xiàn)是執(zhí)行flutter pub get的時(shí)候Flutter自動(dòng)生成的，當(dāng)然只有依賴與iOS原生進(jìn)行交互的Flutter庫才會(huì)注冊(cè)插件。。

這個(gè)文件也可以手動(dòng)去編輯，但是一般沒有這個(gè)必要。

我們以SqflitePlugin為例介紹Plugin的注冊(cè)流程。

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是一個(gè)通道，Flutter可以通過它向iOS宿主App調(diào)用方法，然后獲取結(jié)果。

流程入下圖：

Channels

上面這段代碼代表的含義是：

  1. 建立一個(gè)名字為SqflitePlugin的FlutterMethodChannel
  2. 將這個(gè)channel注冊(cè)到FLutterEngine中，這樣flutter代碼就可以通過FLutterEngine調(diào)用這個(gè)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端方法的定義和調(diào)用

sqflite插件的pubspec.yaml文件中定義了SqflitePlugin這個(gè)名字,所以Flutter端的代碼知道通過哪個(gè)MethodChannel向iOS代碼發(fā)送消息。這個(gè)名字和iOS端是對(duì)應(yīng)的。

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});

操作數(shù)據(jù)庫的時(shí)候Flutter代碼可以直接調(diào)用insert方法，這時(shí)候FlutterEngine就將參數(shù)傳遞給了iOS代碼，等待一步返回。

2. iOS端方法處理并返回值

由于在AppDelegate中注冊(cè)了對(duì)應(yīng)的插件SqflitePlugin，然后FlutterEngine會(huì)調(diào)用- (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);
    }
}

// 執(zhí)行插入操作
- (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執(zhí)行完插入操作后，將結(jié)果封裝到FlutterResult中，返回給Flutter。

FlutterAppDelegate

我們的AppDelegate主要的任務(wù)是執(zhí)行了插件的注冊(cè)。讓Flutter代碼可以方便的調(diào)用Native代碼。

而AppDelegate是繼承自FlutterAppDelegate，那FlutterAppDelegate又做了哪些工作呢？

FlutterAppDelegate在Flutter.framework中，由于是打包成了庫，我們只能看到頭文件，如果我們需要看源碼，則需要進(jìn)入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;
}

重要代碼解釋如下：

  1. FlutterAppDelegate有一個(gè)FlutterPluginAppLifeCycleDelegate類型的_lifeCycleDelegate屬性，它的作用是分發(fā)App生命周期的改變。它的有一個(gè)重要的方法- (void)addDelegate:(NSObject<FlutterApplicationLifeCycleDelegate>*)delegate {}, 就是誰想知道App的生命周期就加進(jìn)來，它會(huì)在App的生命周期發(fā)生改變的時(shí)候一一通知大家。

  2. FlutterAppDelegate的根視圖為一個(gè)FlutterViewController類型的對(duì)象flutterRootViewController。

  3. 和Plugin相關(guān)的一系列代碼，主要是將這些Plugin注冊(cè)到flutterRootViewController的FlutterEngine對(duì)象上。

這也很好理解MethodChannel是如何在 AppDelegate中連接起來，因?yàn)?code>flutterRootViewController加載的就是Flutter App編譯的代碼。

FlutterViewController

前面提到了FlutterAppDelegate的根視圖是FlutterViewController。那這個(gè)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有幾個(gè)重要的屬性：

  1. _engine 就是FlutterEngine，負(fù)責(zé)渲染交互等功能
  2. _flutterView 是顯示Flutter App的View
  3. _splashScreenView是顯示啟動(dòng)圖的View

重點(diǎn)來了

FlutterViewController的各種構(gòu)造函數(shù)最后都會(huì)調(diào)用
- (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];
}
  1. 生成一個(gè)FlutterDartProject對(duì)象project，這個(gè)對(duì)象主要是描述了Flutter APP的一些相關(guān)信息，最重要的一個(gè)是找到可執(zhí)行文件。
  2. 根據(jù)這個(gè)project的設(shè)置信息生成一個(gè)FlutterEngine對(duì)象engine。
  3. 生成一個(gè)FlutterView對(duì)象_flutterView來作為渲染的View。
  4. _engine找到Flutter APP的可執(zhí)行文件的入口main.dart開始執(zhí)行，然后渲染到_flutterView上。
  5. 看是否需要加載啟動(dòng)圖
  6. 一些通用的初始化內(nèi)容
FlutterDartProject

FlutterDartProject中通過FLTDefaultSettingsForBundle方法可以生成一些通用設(shè)置。

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;
}

這段代碼主要做了以下一些事情：

  1. 如果不特殊指定的話，Flutter APP的執(zhí)行文件是位于FLutter目錄下的App.framework中那個(gè)命名為App的可執(zhí)行文件，也就是說所有的Flutter代碼都打包成了一個(gè)可執(zhí)行文件。
    Markdown
  2. 指定了圖片的路徑
  3. 網(wǎng)絡(luò)設(shè)置，是否允許HTTP請(qǐng)求。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請(qǐng)通過簡信或評(píng)論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容