【Jetpack Compose】Compose (androidx.compose.*) のバージョンが分かれている件

元は、こんな感じで問題ありませんでした。


ext.versions = [
  'kotlin'  : '1.6.21'
  'compose' : '1.2.0-rc02'
]

dependencies {
  classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${versions.kotlin}"
}

composeOptions {
  kotlinCompilerExtensionVersion versions.compose
}


implementation "androidx.compose.material:material:${versions.compose}"
implementation "androidx.compose.material:material-icons-extended:${versions.compose}"
implementation "androidx.compose.ui:ui:${versions.compose}"
implementation "androidx.compose.ui:ui-tooling-preview:${versions.compose}"
debugImplementation "androidx.compose.ui:ui-tooling:${versions.compose}"
debugImplementation "androidx.compose.ui:ui-test-manifest:${versions.compose}"
androidTestImplementation "androidx.compose.ui:ui-test-junit4:${versions.compose}"

アップデート通知が出たので、いつものように


1.3.0-alpha01

に上げました。


ext.versions = [
  'kotlin'  : '1.6.21'
  'compose': '1.3.0-alpha01'
]

...

ビルドできなくなりました。

なんでや。

 

■ kotlin と compose の関係

kotlin と compose には、お互いに対応するバージョンが決まっていましたね!

Compose to Kotlin Compatibility Map

👉 Compose to Kotlin Compatibility Map  |  Android Developers hatena-bookmark

あれ、compose「1.3.0-alpha01」がないよ!

 

■ 「Compose」 は1つではない

Jetpack Compose is multiple things under one name:

- A compiler plugin that helps efficiently calculate the difference between two in-memory tree data structures
- A new UI toolkit for Android
- A new UI toolkit for desktop apps (Compose Desktop)

👉 Drop "androidx" from Jetpack Compose package name, for multiplatform, before 1​.​0 release. · Change.org hatena-bookmark

どうやら、Android でいうと compose は

- compose compiler
- compose ui toolkit

の2つに分かれているようです

👉 This version (1.2.0-alpha08) of the Compose Compiler requires Kotlin version 1.6.20 but you appear to be using Kotlin version 1.6.21 which is not known to be compatible. hatena-bookmark

 

■ まとめ

上記2つのことを考慮して書き換えます。


ext.versions = [
  'kotlin'    : '1.7.0'
  'compose'   : '1.2.0',         // compose-compiler
  'composeUi' : '1.3.0-alpha01'  // compose-ui
]

dependencies {
  classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${versions.kotlin}"
}

composeOptions {
  kotlinCompilerExtensionVersion versions.compose // compose-compiler
}

// compose-ui
implementation "androidx.compose.material:material:${versions.composeUi}"
implementation "androidx.compose.material:material-icons-extended:${versions.composeUi}"
implementation "androidx.compose.ui:ui:${versions.composeUi}"
implementation "androidx.compose.ui:ui-tooling-preview:${versions.composeUi}"
debugImplementation "androidx.compose.ui:ui-tooling:${versions.composeUi}"
debugImplementation "androidx.compose.ui:ui-test-manifest:${versions.composeUi}"
androidTestImplementation "androidx.compose.ui:ui-test-junit4:${versions.composeUi}"

👉 This version (1.2.0-alpha08) of the Compose Compiler requires Kotlin version 1.6.20 but you appear to be using Kotlin version 1.6.21 which is not known to be compatible. hatena-bookmark


【Jetpack Compose】よくあるボタンの有効化/無効化

読み込み待ち、SwipeRefresh などで見かけるやつ。

ボタン2度押し対策にも使えます。


// @Composable

val sending by viewModel.sending

Button(
  onClick = { 
    viewModel.send() 
  },
  enabled = !sending
) {
  Text("SEND")
}


// ViewModel

private val _sending = mutableStateOf(false)
val sending: State<Boolean> = _sending // *

fun send() {
  viewModelScope.launch(Dispatchers.IO) {
    _sending.value = true
    delay(5000) // heavy
    _sending.value = false
  }
}

【Jetpack Compose】 よくあるボタンの有効化/無効化

ViewModel から露出している sendingState<Boolean> として @Composable 側からの書き換えは許しません。

👉 【Jetpack Compose】rememberCoroutineScope() vs LaunchedEffect hatena-bookmark

👉 【MVVM】 ViewModel の_プロパティ記述 hatena-bookmark
👉 StateFlow の View への公開 hatena-bookmark

👉 Jetpack Compose 二度押しを避けるボタン | Zenn hatena-bookmark


Jetpack Compose Codelabs の日本語ページの説明とGitHub内サンプルコードが違う件

Jetpack Compose Codelabs

👉 Jetpack Compose Codelabs hatena-bookmark

各タイトルのリンクから飛べるドキュメントを見る限り、文章が全く違い、英語ページと日本語ページの最終更新日が数ヶ月違います。

仕様の変化の早い Jetpack Compose ではつらいです。

以下、2022-06-11 現在。

日本語の説明ページの翻訳作業が遅れてるのでしょう。

問題なのは、日本語記事の説明に対して GitHub リポジトリのソースコードが違うことです。

細かく探すとあるのかもしれませんが。

Jetpack Compose Codelabs

Jetpack Compose Codelabs

👉 State in Jetpack Compose hatena-bookmark

Jetpack Compose Codelabs の日本語ページが古い件

👉 tree/end - Jetpack Compose Codelabs hatena-bookmark

あと、説明ページの表示が10秒くらいかかるの何でなんだろ?