複合用途開発入門
アプリはフラッターを使用してゼロから開発リラックスことですが、いくつかの成熟した製品のため、完全に降水量の歴史のオリジナルアプリ、フラッターは非現実的である包括的シフトを放棄しました。したがって、フラッターの使用は、アンドロイド、iOSのテクノロジー・スタックを統一秩序ある方法を介して携帯端末の効率を高めるために開発されたネイティブアプリケーションの既存の機能の拡張としてそれを置くために。
現時点では、ページには次の2つのオプションがあり、いくつかのフラッター既存のネイティブアプリケーションを埋め込みたいです。一つは、このモードが統合管理モデルと呼ばれ、一元管理することにより、サブプロジェクトエンジニアリングフラッター、フラッター、元学生の作品です。フラッターは、このモデルは三端子スプリットモードと呼ばれ、ネイティブ工学など他のサブモジュールの作品は、オリジナルのネイティブ設計変更管理を維持しています。
フラッターが原因混在モードと、フラッター混合使用の開発チームの最古の使用は、主に統一され、公式が提供する限られた情報管理モデルに、早期のフレームで発生します。しかし、ビジネスの反復の深化と、統一された管理モデルの欠点も、時間のかかるツールは最終的に減少し、開発効率が得られ、大幅な増加となり、連鎖だけでなく、三端子（アンドロイド、iOSとフラッター）コードは深刻な結合明らかにする。したがって、フラッター混合開発チームのその後の使用は、主に依存関係の管理に3つの別々のモード側のコードを使用し、最終的には軽量のアクセスフラッタプロジェクト。
外側軽量へのアクセスに加えて、三辺コードパターンはまた、コストをネイティブ改修プロジェクトを低減する、フラッタネイティブプロジェクト、それによって急速フラッタアクセスモジュール、モジュール、サブモジュールとして分離することができます。フラッターのためのアクセスモジュールが完了すると、フラッターのAndroid Studioプロジェクトは、開発のために使用することができ、元のプロジェクトを開くには、もはや必要はダートデバッグコードとネイティブコードのために開発することはできません。
別三の端子モードを使用するキーがフラッタフラッタ混合技術開発が取り外され、生成物は、標準的な構成要素の形で管理される異なるプラットフォームに従って構成された、すなわちアンドロイドAARの使用、IOSのポッドを使用します。換言すれば、フラッタのハッシュ方式は、実際にフラッタモジュールまたはポッドAARライブラリにパッケージされ、次いでネイティブのように動作フラッタモジュールに導入することができる他のサードパーティのネイティブコンポーネントライブラリを指します。
フラッターモジュール
デフォルトでは、フラッタープロジェクトは、ネイティブのプロジェクトフラッター新しく作成したディレクトリとディレクトリが含まれます。この場合、プロジェクトはフラッターネイティブライブラリとエンジニアリングリソースに依存し、フラッターは独立してビルドして実行作品逃れることはできません。
混合使用の開発において、フラッタプロジェクトのプライマリ依存性は、2つの部分に分割されます。フラッタは、ライブラリのメインエンジンとフラッタフレームワークライブラリーを含むライブラリーとエンジンであるフラッタモジュールは、コードフラッタlibディレクトリ実装下ダートプロジェクトを含むさらなる工学、すなわち混合開発フラッタフラッタ機能モジュールです。
元のプロジェクトのために、統合フラッターフラッターしかすることができ、自分のiOSとAndroidのフラッター依存ライブラリを構築し、その後、同じディレクトリにモジュールを作成する必要があります。次に、私たちは以下のようにコマンドモジュールは、フラッターフラッター作成モジュールを構築し提供し実行し、元のプロジェクトディレクトリ内の同じレベルを必要としています。
flutter create -t module flutter_library
フラッター・モジュール名としてflutter_libraryれ、。上記のコマンドを実行した後、元のプロジェクトの同じディレクトリにflutter_libraryモジュールの動作を生成します。フラッターフラッターモジュールは、以下に示すように、Androidのメーカーはそれを開いてそのディレクトリを使用して動作します。
それは見てのエンジニアリング普通フラッター、フラッターモジュールプロジェクトも組み込みAndroidとiOSの土木工事に比べていますが、デフォルトでは、AndroidとiOSの土木工事が隠されていることができます。このように、フラッターモジュールプロジェクトのために、このプロジェクトは、開発とデバッグのためのAndroid Studioを使用してのように普通のようすることができます。
通常のフラッターと比較して、同じ時間は、より多くのフラッターディレクトリ以外のAndroidプロジェクトディレクトリのフラッタモジュールプロジェクトの下で働くには、このディレクトリのbuild.gradleの構成は、我々はときAARパッケージの構成を構築することです。同様に、モジュールは、フラッターエンジニアリングプロジェクトディレクトリiOSの下にありますフラッターフラッターモジュールのようなものですフラッターディレクトリには、デバッグにAndroidのメーカーを使用して、両方の一般的な技術開発として動作するだけでなく、ビルドAARまたはポッドに理由を詰め。
Androidの統合フラッタ
フラッターは、ネイティブフラッター上のプロジェクトの依存関係は主にフラッタライブラリやエンジンで二つの部分を含み、ネイティブのAndroidプロジェクトに統合し、フラッターは、製品を設計しました。
- フラッターライブラリやエンジン：icudtl.dat、libFlutter.soといくつかのクラスファイルが含まれ、これらのファイルは、最終的にFlutter.jarにパッケージ化されます。
- フラッターエンジニアリング製品：アプリケーションデータセグメントisolate_snapshot_data、アプリケーション命令セクションisolate_snapshot_instr、仮想マシンのデータセグメントvm_snapshot_data、仮想マシン命令セグメントvm_snapshot_instrとリソースファイルのflutter_assetsが含まれています。
和原生Android工程集成其他插件库的方式一样，在原生Android工程中引入Flutter模块需要先在settings.gradle中添加如下代码。
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
'flutter_library/.android/include_flutter.groovy'))
其中，flutter_library为我们创建的Flutter模块。然后，在原生Android工程的app目录的build.gradle文件中添加如下依赖。
dependencies {
implementation project(":flutter")
}
然后编译并运行原生Android工程，如果没有任何错误则说明集成Flutter模块成功。需要说明的是，由于Flutter支持的最低版本为16，所以需要将Android项目的minSdkVersion修改为16。
如果出现“程序包android.support.annotation不存在”的错误，需要使用如下的命令来创建Flutter模块，因为最新版本的Android默认使用androidx来管理包。
flutter create --androidx -t module flutter_library
对于Android原生工程，如果还没有升级到androidx，可以在原生Android工程上右键，然后依次选择【Refactor】→【Migrate to Androidx】将Android工程升级到androidx包管理。
在原生Android工程中成功添加Flutter模块依赖后，打开原生Android工程，并在应用的入口MainActivity文件中添加如下代码。
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
View flutterView = Flutter.createView(this, getLifecycle(), "route1");
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addContentView(flutterView, layoutParams);
}
}
通过Flutter提供的createView()方法，可以将Flutter页面构建成Android能够识别的视图，然后将这个视图使用Android提供的addContentView()方法添加到父窗口即可。重新运行原生Android工程，最终效果如下图所示。
如果原生Android的MainActivity加载的是一个FrameLayout，那么加载只需要将Flutter页面构建成一个Fragment即可，如下所示。
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FragmentTransaction ft= getSupportFragmentManager().beginTransaction();
ft.replace(R.id.fragment_container, Flutter.createFragment("Hello Flutter"));
ft.commit();
}
}
除了使用Flutter模块方式集成外，还可以将Flutter模块打包成aar，然后再添加依赖。在flutter_library根目录下执行aar打包构建命令即可抽取Flutter依赖，如下所示。
flutter build apk --debug
此命令的作用是将Flutter库和引擎以及工程产物编译成一个aar包，上面命令编译的aar包是debug版本，如果需要构建release版本，只需要把命令中的debug换成release即可。
打包构建的flutter-debug.aar位于.android/Flutter/build/outputs/aar/目录下，可以把它拷贝到原生Android工程的app/libs目录下，然后在原生Android工程的app目录的打包配置build.gradle中添加对它的依赖，如下所示。
dependencies {
implementation(name: 'flutter-debug', ext: 'aar')
}
然后重新编译一下项目，如果没有任何错误提示则说明Flutter模块被成功集成到Android原生工程中。
iOS集成Flutter
原生iOS工程对Flutter的依赖包含Flutter库和引擎，以及Flutter工程编译产物。其中，Flutter 库和引擎指的是Flutter.framework等，Flutter工程编译产物指的是 App.framework等。
在原生iOS工程中集成Flutter需要先配置好CocoaPods，CocoaPods是iOS的类库管理工具，用来管理第三方开源库。在原生iOS工程中执行pod init命令创建一个Podfile文件，然后在Podfile文件中添加Flutter模块依赖，如下所示。
flutter_application_path = '../flutter_ library/
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'iOSDemo' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
install_all_flutter_pods(flutter_application_path)
# Pods for iOSDemo
… //省略其他脚本
end '
然后，关闭原生iOS工程，并在原生iOS工程的根目录执行pod install命令安装所需的依赖包。安装完成后，使用Xcode打开iOSDemo.xcworkspace原生工程。
默认情况下，Flutter是不支持Bitcode的，Bitcode是一种iOS编译程序的中间代码，在原生iOS工程中集成Flutter需要禁用Bitcode。在Xcode中依次选择【TAGETS】→【Build Setttings】→【Build Options】→【Enable Bitcode】来禁用Bitcode，如下图所示。
如果使用的是Flutter早期的版本，还需要添加build phase来支持构建Dart代码。依次选择【TAGGETS】→【Build Settings】→【Enable Phases】，然后点击左上角的加号新建一个“New Run Script Phase”，添加如下脚本代码。
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
不过，最新版本的Flutter已经不需要再添加脚本了。重新运行原生iOS工程，如果没有任何错误则说明iOS成功集成Flutter模块。
除了使用Flutter模块方式外，还可以将Flutter模块打包成可以依赖的动态库，然后再使用CocoaPods添加动态库。首先，在flutter_library根目录下执行打包构建命令生成framework动态库，如下所示。
flutter build ios --debug
上面命令是将Flutter工程编译成Flutter.framework和App.framework动态库。如果要生成release版本，只需要把命令中的debug换成release即可。
然后，在原生iOS工程的根目录下创建一个名为FlutterEngine的目录，并把生成的两个framework动态库文件拷贝进去。不过，iOS生成模块化产物要比Android多一个步骤，因为需要把Flutter工程编译生成的库手动封装成一个pod。首先，在flutter_ library该目录下创建FlutterEngine.podspec，然后添加如下脚本代码。
Pod::Spec.new do |s|
s.name = 'FlutterEngine'
s.version = '0.1.0'
s.summary = 'FlutterEngine'
s.description = <<-DESC
TODO: Add long description of the pod here.
DESC
s.homepage = 'https://github.com/xx/FlutterEngine'
s.license = { :type => 'MIT', :file => 'LICENSE' }
s.author = { 'xzh' => '[email protected]' }
s.source = { :git => "", :tag => "#{s.version}" }
s.ios.deployment_target = '9.0'
s.ios.vendored_frameworks = 'App.framework', 'Flutter.framework'
end
然后，执行pod lib lint命令即可拉取Flutter模块所需的组件。接下来，在原生iOS工程的Podfile文件添加生成的库即可。
target 'iOSDemo' do
pod 'FlutterEngine', :path => './'
end
重新执行pod install命令安装依赖库，原生iOS工程集成Flutter模块就完成了。接下来，使用Xcode打开ViewController.m文件，然后添加如下代码。
#import "ViewController.h"
#import <Flutter/Flutter.h>
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *button = [[UIButton alloc]init];
[button setTitle:@"加载Flutter模块" forState:UIControlStateNormal];
button.backgroundColor=[UIColor redColor];
button.frame = CGRectMake(50, 50, 200, 100);
[button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
[button addTarget:self action:@selector(buttonPrint) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];
}
- (void)buttonPrint{
FlutterViewController * flutterVC = [[FlutterViewController alloc]init];
[flutterVC setInitialRoute:@"defaultRoute"];
[self presentViewController:flutterVC animated:true completion:nil];
}
@end
在上面的代码中，我们在原生iOS中创建了一个按钮，点击按钮时就会跳转到Flutter页面，最终效果如下图所示。
默认情况下，Flutter为提供了两种调用方式，分别是FlutterViewController和FlutterEngine。对于FlutterViewController来说，打开ViewController.m文件，在里面添加一个加载flutter页面的方法并且添加一个按钮看来调用。
Flutter模块调试
我々はすべて知っているように、利点の一つは、試運転速く達成するために、開発プロセスにおける熱過負荷機能を使用することですフラッター。デフォルトでは、フラッターモジュールの後に元のプロジェクトは、熱過負荷機能は、結果を確認するには、元のプロジェクトを再実行する必要が無効になっています統合しました。したがって、フラッタは、熱過負荷利点が失われ、開発効率が低下開発しました。
だから、あなたは熱過負荷フラッター混合プロジェクトでそれを開くことができますか？答えはイエス、唯一のホットリロード機能をオンにするために、次の手順を通過する必要があります。まず、単純にアプリケーションを終了するのではなく、閉鎖手段は、アプリケーション・プロセスを終了したネイティブアプリケーションを、オフにします。入力フラッタールートモジュールでフラッタコマンドを添付して、ネイティブアプリケーションが再び開かれ、図に示すように、迅速な接続は、成功するでしょう。
両方の複数のデバイスは、フラッタを使用することができる場合は接続されたデバイスを指定する-dコマンドを取り付けます。次に、ウォームリブート、切断ボタンを押しdを実行するために熱過負荷、プレスRを行う単に押しボタンr。
フラッターの作品では、我々は、デバッグコードのデバッグにあるボタンをクリックすることができますが、混在プロジェクトでは、単なるデバッグボタンが作動しないをクリックします。Androidのメーカーは、図2に下に示すように、コードモジュールのデバッグを実現するために行わフラッタモジュールフラッタ、との接続を確立するために提供フラッタこの場合、の使用は、ボタンを取り付けます。
ネイティブプロジェクトにおける上記だけで行われて導入フラッターモジュールは、あなたがフラッターモジュール際に、特定の開発、ルート管理、およびパッケージングなどとの通信に問題が発生します。
