本文同步自個人部落格Flutter + Kotlin Multiplatform, Write Once Run Anywhere,轉載請註明出處。
Motivation
Flutter是Google 2017年推出的跨平臺框架,擁有Fast Development,Expressive and Flexible UI,Native Performance等特點。Flutter使用Dart作為開發語言,Android和iOS專案可以共用一套Dart程式碼,很多人迫不及待的嘗試,包括我,但在學習的過程中,同時在思考以下的問題:
-
Flutter很優秀,但相對來說還比較新,目前並不是所有的第三方SDK支援Flutter(特別是在國內),所以在使用第三方SDK時很多時候需要我們編寫原生程式碼整合邏輯,需要Android和iOS分別編寫不同的整合程式碼。
-
專案要整合Flutter,一次性替換所有頁面有點不太實際,但是部分頁面整合的時候,會面臨需要將資料庫操作等公用邏輯使用Dart重寫一遍的問題,因為原生的邏輯在其他的頁面也需要用到,沒辦法做到只保留Dart的實現程式碼,所以很容易出現一套邏輯需要提供不同平臺的實現如:
Dao.kt
,Dao.swift
,Dao.dart
。當然可以使用Flutter提供的MethodChannel
/FlutterMethodChannel
來直接呼叫原生程式碼的邏輯,但是如果資料庫操作邏輯需要修改的時候,我們依然要同時修改不同平臺的程式碼邏輯。 -
專案組裡有內部的SDK,同時提供給不同專案(Android和iOS)使用,但是一些App需要整合Flutter,就需要SDK分別提供Flutter/Android/iOS的程式碼實現,這時需要同時維護三個SDK反而增加了SDK維護者的維護和實現成本。
所以,最後可以把問題歸結為原生程式碼無法複用,導致我們需要為不同平臺提供同一程式碼邏輯實現。那麼有沒有能讓原生程式碼複用的框架,答案是肯定的,Kotlin Multiplatform是Kotlin的一個功能(目前還在實驗性階段),其目標就是使用Kotlin:Sharing code between platforms。
於是我有一個大膽的想法,同時使用Flutter和Kotlin Multiplatform,雖然使用不同的語言(Dart/Kotlin),但不同平臺共用一套程式碼邏輯實現。使用Kotlin Multiplatform編寫公用邏輯,然後在Android/iOS上使用MethodChannel
/FlutterMethodChannel
供Flutter呼叫公用邏輯。
接下來以實現公用的資料庫操作邏輯為例,來簡單描述如何使用Flutter和Kotlin Multiplatform達到Write Once Run Anywhere。
接下來的內容需要讀者對Flutter和Kotlin Multiplatform有所瞭解。
Kotlin Multiplatform
我們使用Sqldelight實現公用的資料庫操作邏輯,然後通過kotlinx.serialization把查詢結果序列化為json字串,通過MethodChannel
/FlutterMethodChannel
傳遞到Flutter中使用。
Flutter的目錄結構如下面所示:
|
|__android
| |__app
|__ios
|__lib
|__test
複製程式碼
其中android
目錄下是一個完整的Gradle專案,參照官方文件Multiplatform Project: iOS and Android,我們在android
目錄下建立一個common
module,來存放公用的程式碼邏輯。
Gradle指令碼
apply plugin: 'org.jetbrains.kotlin.multiplatform'
apply plugin: 'com.squareup.sqldelight'
apply plugin: 'kotlinx-serialization'
sqldelight {
AccountingDB {
packageName = "com.littlegnal.accountingmultiplatform"
}
}
kotlin {
sourceSets {
commonMain.dependencies {
implementation deps.kotlin.stdlib.stdlib
implementation deps.kotlin.serialiaztion.runtime.common
implementation deps.kotlin.coroutines.common
}
androidMain.dependencies {
implementation deps.kotlin.stdlib.stdlib
implementation deps.sqldelight.runtimejvm
implementation deps.kotlin.serialiaztion.runtime.runtime
implementation deps.kotlin.coroutines.android
}
iosMain.dependencies {
implementation deps.kotlin.stdlib.stdlib
implementation deps.sqldelight.driver.ios
implementation deps.kotlin.serialiaztion.runtime.native
implementation deps.kotlin.coroutines.native
}
}
targets {
fromPreset(presets.jvm, 'android')
final def iOSTarget = System.getenv('SDK_NAME')?.startsWith("iphoneos") \
? presets.iosArm64 : presets.iosX64
fromPreset(iOSTarget, 'ios') {
binaries {
framework('common')
}
}
}
}
// workaround for https://youtrack.jetbrains.com/issue/KT-27170
configurations {
compileClasspath
}
task packForXCode(type: Sync) {
final File frameworkDir = new File(buildDir, "xcode-frameworks")
final String mode = project.findProperty("XCODE_CONFIGURATION")?.toUpperCase() ?: 'DEBUG'
final def framework = kotlin.targets.ios.binaries.getFramework("common", mode)
inputs.property "mode", mode
dependsOn framework.linkTask
from { framework.outputFile.parentFile }
into frameworkDir
doLast {
new File(frameworkDir, 'gradlew').with {
text = "#!/bin/bash\nexport 'JAVA_HOME=${System.getProperty("java.home")}'\ncd '${rootProject.rootDir}'\n./gradlew \$@\n"
setExecutable(true)
}
}
}
tasks.build.dependsOn packForXCode
複製程式碼
實現AccountingRepository
在common
module下建立commonMain
目錄,並在commonMain
目錄下建立AccountingRepository
類用於封裝資料庫操作邏輯(這裡不需要關心程式碼實現細節,只是簡單的查詢資料庫結果,然後序列化為json字串)。
class AccountingRepository(private val accountingDB: AccountingDB) {
private val json: Json by lazy {
Json(JsonConfiguration.Stable)
}
...
fun getMonthTotalAmount(yearAndMonthList: List<String>): String {
val list = mutableListOf<GetMonthTotalAmount>()
.apply {
for (yearAndMonth in yearAndMonthList) {
val r = accountingDB.accountingDBQueries
.getMonthTotalAmount(yearAndMonth)
.executeAsOneOrNull()
if (r?.total != null && r.yearMonth != null) {
add(r)
}
}
}
.map {
it.toGetMonthTotalAmountSerialization()
}
return json.stringify(GetMonthTotalAmountSerialization.serializer().list, list)
}
fun getGroupingMonthTotalAmount(yearAndMonth: String): String {
val list = accountingDB.accountingDBQueries
.getGroupingMonthTotalAmount(yearAndMonth)
.executeAsList()
.map {
it.toGetGroupingMonthTotalAmountSerialization()
}
return json.stringify(GetGroupingMonthTotalAmountSerialization.serializer().list, list)
}
}
複製程式碼
到這裡我們已經實現了公用的資料庫操作邏輯,但是為了Android/iOS更加簡單的呼叫資料庫操作邏輯,我們把MethodChannel#setMethodCallHandler
/FlutterMethodChannel#setMethodCallHandler
中的呼叫邏輯進行簡單的封裝:
const val SQLDELIGHT_CHANNEL = "com.littlegnal.accountingmultiplatform/sqldelight"
class SqlDelightManager(
private val accountingRepository: AccountingRepository
) : CoroutineScope {
...
fun methodCall(method: String, arguments: Map<String, Any>, result: (Any) -> Unit) {
launch(coroutineContext) {
when (method) {
...
"getMonthTotalAmount" -> {
@Suppress("UNCHECKED_CAST") val yearAndMonthList: List<String> =
arguments["yearAndMonthList"] as? List<String> ?: emptyList()
val r = accountingRepository.getMonthTotalAmount(yearAndMonthList)
result(r)
}
"getGroupingMonthTotalAmount" -> {
val yearAndMonth: String = arguments["yearAndMonth"] as? String ?: ""
val r = accountingRepository.getGroupingMonthTotalAmount(yearAndMonth)
result(r)
}
}
}
}
}
複製程式碼
因為MethodChannel#setMethodHandler
中Result
和FlutterMethodChannel#setMethodHandler
中FlutterResult
物件不一樣,所以我們在SqlDelightManager#methodCall
定義result
function以回撥的形式讓外部處理。
在Android使用SqlDelightManager
在Android專案使用SqlDelightManager
,參考官方文件Multiplatform Project: iOS and Android,我們需要先在app
目錄下新增對common
module的依賴:
implementation project(":common")
複製程式碼
參照官方文件Writing custom platform-specific code,我們在MainActivity
實現MethodChannel
並呼叫SqlDelightManager#methodCall
:
class MainActivity: FlutterActivity() {
private val sqlDelightManager by lazy {
val accountingRepository = AccountingRepository(Db.getInstance(applicationContext))
SqlDelightManager(accountingRepository)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
GeneratedPluginRegistrant.registerWith(this)
MethodChannel(flutterView, SQLDELIGHT_CHANNEL).setMethodCallHandler { methodCall, result ->
@Suppress("UNCHECKED_CAST")
val args = methodCall.arguments as? Map<String, Any> ?: emptyMap()
sqlDelightManager.methodCall(methodCall.method, args) {
result.success(it)
}
}
}
...
}
複製程式碼
在iOS使用SqlDelightManager
繼續參考Multiplatform Project: iOS and Android,讓Xcode專案識別common
module的程式碼,主要把common
module生成的frameworks新增Xcode專案中,我簡單總結為以下步驟:
- 執行
./gradlew :common:build
,生成iOS frameworks - General -> 新增Embedded Binaries
- Build Setting -> 新增Framework Search Paths
- Build Phases -> 新增Run Script
有一點跟官方文件不同的是,frameworks的存放目錄不一樣,因為Flutter專案結構把android
專案的build
檔案路徑放到根目錄,所以frameworks的路徑應該是$(SRCROOT)/../build/xcode-frameworks
。可以檢視android/build.gradle
:
rootProject.buildDir = '../build'
subprojects {
project.buildDir = "${rootProject.buildDir}/${project.name}"
}
複製程式碼
這幾步完成之後就可以在Swift裡面呼叫common
module的Kotlin程式碼了。參照官方文件Writing custom platform-specific code,我們在AppDelegate.swift
實現FlutterMethodChannel
並呼叫SqlDelightManager#methodCall
(Swift程式碼全是靠Google搜出來的XD):
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
lazy var sqlDelightManager: SqlDelightManager = {
Db().defaultDriver()
let accountingRepository = AccountingRepository(accountingDB: Db().instance)
return SqlDelightManager(accountingRepository: accountingRepository)
}()
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
) -> Bool {
let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
let sqlDelightChannel = FlutterMethodChannel(
name: SqlDelightManagerKt.SQLDELIGHT_CHANNEL,
binaryMessenger: controller)
sqlDelightChannel.setMethodCallHandler({
[weak self] (methodCall: FlutterMethodCall, flutterResult: @escaping FlutterResult) -> Void in
let args = methodCall.arguments as? [String: Any] ?? [:]
self?.sqlDelightManager.methodCall(
method: methodCall.method,
arguments: args,
result: {(r: Any) -> KotlinUnit in
flutterResult(r)
return KotlinUnit()
})
})
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
...
}
複製程式碼
可以看到,除了MethodChannel
/FlutterMethodChannel
物件不同以及Kotlin/Swift語法不同,我們呼叫的是同一方法SqlDelightManager#methodCall
,並不需要分別在Android/iOS上實現同一套邏輯。
到這裡我們已經使用了Kotlin Multiplatform實現原生程式碼複用了,然後我們只需在Flutter使用MethodChannel
呼叫相應的方法就可以了。
Flutter
同樣的我們在Flutter中也實現AccountingRepository
類封裝資料庫操作邏輯:
class AccountingRepository {
static const _platform =
const MethodChannel("com.littlegnal.accountingmultiplatform/sqldelight");
...
Future<BuiltList<TotalExpensesOfMonth>> getMonthTotalAmount(
[DateTime latestMonth]) async {
var dateTime = latestMonth ?? DateTime.now();
var yearMonthList = List<String>();
for (var i = 0; i <= 6; i++) {
var d = DateTime(dateTime.year, dateTime.month - i, 1);
yearMonthList.add(_yearMonthFormat.format(d));
}
var arguments = {"yearAndMonthList": yearMonthList};
var result = await _platform.invokeMethod("getMonthTotalAmount", arguments);
return deserializeListOf<TotalExpensesOfMonth>(jsonDecode(result));
}
Future<BuiltList<TotalExpensesOfGroupingTag>> getGroupingTagOfLatestMonth(
DateTime latestMonth) async {
return getGroupingMonthTotalAmount(latestMonth);
}
Future<BuiltList<TotalExpensesOfGroupingTag>> getGroupingMonthTotalAmount(
DateTime dateTime) async {
var arguments = {"yearAndMonth": _yearMonthFormat.format(dateTime)};
var result =
await _platform.invokeMethod("getGroupingMonthTotalAmount", arguments);
return deserializeListOf<TotalExpensesOfGroupingTag>(jsonDecode(result));
}
}
複製程式碼
簡單使用BLoC來呼叫AccountingRepository
的方法:
class SummaryBloc {
SummaryBloc(this._db);
final AccountingRepository _db;
final _summaryChartDataSubject =
BehaviorSubject<SummaryChartData>.seeded(...);
final _summaryListSubject =
BehaviorSubject<BuiltList<SummaryListItem>>.seeded(BuiltList());
Stream<SummaryChartData> get summaryChartData =>
_summaryChartDataSubject.stream;
Stream<BuiltList<SummaryListItem>> get summaryList =>
_summaryListSubject.stream;
...
Future<Null> getGroupingTagOfLatestMonth({DateTime dateTime}) async {
var list =
await _db.getGroupingTagOfLatestMonth(dateTime ?? DateTime.now());
_summaryListSubject.sink.add(_createSummaryList(list));
}
Future<Null> getMonthTotalAmount({DateTime dateTime}) async {
...
var result = await _db.getMonthTotalAmount(dateTime);
...
_summaryChartDataSubject.sink.add(...);
}
...
複製程式碼
在Widget中使用BLoC:
class SummaryPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _SummaryPageState();
}
class _SummaryPageState extends State<SummaryPage> {
final _summaryBloc = SummaryBloc(AccountingRepository.db);
...
@override
Widget build(BuildContext context) {
return Scaffold(
...
body: Column(
children: <Widget>[
Divider(
height: 1.0,
),
Container(
color: Colors.white,
padding: EdgeInsets.only(bottom: 10),
child: StreamBuilder(
stream: _summaryBloc.summaryChartData,
builder: (BuildContext context,
AsyncSnapshot<SummaryChartData> snapshot) {
...
},
),
),
Expanded(
child: StreamBuilder(
stream: _summaryBloc.summaryList,
builder: (BuildContext context,
AsyncSnapshot<BuiltList<SummaryListItem>> snapshot) {
...
},
),
)
],
),
);
}
}
複製程式碼
完結撒花,最後我們來看看專案的執行效果:
Android | iOS |
---|---|
Unit Test
為了保證程式碼質量和邏輯正確性Unit Test是必不可少的,對於common
module程式碼,我們只要在commonTest
中寫一套Unit Test就可以了,當然有時候我們需要為不同平臺編寫不同的測試用例。在Demo裡我主要使用MockK來mock資料,但是遇到一些問題,在Kotlin/Native無法識別MockK
的引用。對於這個問題,我提了一個issue,目前還在處理中。
TL;DR
跨平臺這個話題在現在已經是老生常談了,很多公司很多團隊都希望使用跨平臺技術來提高開發效率,降低人力成本,但開發的過程中會發現踩的坑越來越多,很多時候並沒有達到當初的預期,個人認為跨平臺的最大目標是程式碼複用,Write Once Run Anywhere,讓多端的開發者共同實現和維護同一程式碼邏輯,減少溝通導致實現的差異和多端程式碼實現導致的差異,使程式碼更加健壯便於維護。
本文簡單演示瞭如何使用Flutter和Kotlin Multiplatform來達到Write Once Run Anywhere的效果。個人認為Kotlin Multiplatform有很大的前景,Kotlin Multiplatform還支援JS平臺,所以公用的程式碼理論上還能提供給小程式使用(希望有機會驗證這個猜想)。在今年的Google IO上Google釋出了下一代UI開發框架Jetpack Compose,蘋果開發者大會上蘋果為我們帶來了SwiftUI,這意味著如果把這2個框架的API統一起來,我們可以使用Kotlin來編寫擁有Native效能的跨平臺的程式碼。Demo已經上傳到github,感興趣的可以clone下來研究(雖然寫的很爛)。有問題可以在github上提issue。Have Fun!