[チュートリアル3]compose multiplatformのサンプルコードを解説する
はじめに
そしてjetpack composeの基本的な解説になるので、compose multiplatformの解説って感じじゃないですね。知ってる方は飛ばしてください。
一応コードを貼っておきます
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource
@OptIn(ExperimentalResourceApi::class)
@Composable
fun App() {
MaterialTheme {
var greetingText by remember { mutableStateOf(GREETING) }
var showImage by remember { mutableStateOf(false) }
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = {
greetingText = "Compose on ${getPlatformName()}: $GREETING"
showImage = !showImage
}) {
Text(greetingText)
}
AnimatedVisibility(showImage) {
Image(
painterResource("compose-multiplatform.xml"),
null
)
}
}
}
}
App()関数の構造について
解説するファイルのパスは以下です。
アプリのルートディレクトリ/composeApp/src/commonMain/kotlin[commonMain]/App.kt
このアプリの最初に開くページを定義しているファイルがApp.ktです。
重要なのは以下です。
MaterialTheme
21行目あたりですね
アプリケーションの見た目を設定します。色や形、フォントなどをカスタマイズできます。
Column
その中に入れたものを縦並びに表示するwidgetですね。
ButtonとAnimatedVisibilityを上下に配置していますね。
Button
ボタンですね。中にはTextウィジェットを持っていて表示する文字列を決めています。
この例ではgreetingTextを表示しており、greetingTextの中身はそれぞれのプラットフォームを取得してその名前を表示してます。
AnimatedVisibility
アニメーションを使ってImageを表示したり隠したりします。
引数がtrueなら表示、falseなら非表示しています。
今回の例だとshowImageを渡していて、その状態によって表示非表示が切り替わるようになっています。
painterResource
XMLリソースに保存されたベクターアイコンをロードします。
Modifier
Columnに渡しているやつです。（24行目あたり）
見た目を細かく調整することができるものです。前のメソッドから渡されたmodifierを変更して呼び出すことができます。
状態(state)
ユーザーの操作や時間経過などに合わせて、表示するものを変更したいときには、状態（State）を変更してその状態の変更に合わせてUIを再構成（リコンポジション）します。
このコードではgreetingTextとshowImageが状態です。
mutableStateOf()という関数を使用して作成し、remember関数でラップしてあるので一度作成されるとフレームワークによって保存されます。
例えば端末を横向きにして再描画させたりした場合でも同じものが表示されるのは値を保持しているからです。
Discussion