[チュートリアル4]compose multiplarformのサンプルコードを変更して勉強する
はじめに
公式ドキュメントの和訳と要約＋αです。
前回は[これ](https://zenn.dev/shun1997/articles/compose-multipatform-detail-explanation-of-code.md
ライブラリを導入する
Kotlin Multiplatformのライブラリを導入する場合には、composeApp/build.gradle.ktsをいじります。
そういうライブラリがないときにはそれぞれのプラットフォーム固有のライブラリを使わないといけないらしい。（難しそう）
ちなみにKotlin Multiplatformのライブラリ一覧をまとめてくれているサイトもあります。
Kotlin Multiplatform libraries
手順
- composeApp/build.gradle.ktsを開く
- commonMainのdependencies{ ... }の中に追加したいライブラリを追加
- 右上に出てくる"Sync Now"ボタンを押す
今回の例だとbuild.gradle.ktsの56行目より下あたりに追加すれば良いです。
コードはこんな感じになっているはず
val commonMain by getting {
dependencies {
implementation(compose.runtime)
implementation(compose.foundation)
implementation(compose.material)
@OptIn(ExperimentalComposeLibrary::class)
implementation(compose.components.resources)
// 下を追加
implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.4.1")
}
}
ちなみに追加したライブラリはkotlinx-datetimeというもので、時間を扱うときに使うやつです。
参考
追加したライブラリを使ってみる
ライブラリを追加したので、使ってみます。
まずは追加するべきファイルを開きます
プロジェクトのルート/composeApp/src/commonMain/kotlin/App.kt
日時を取得する処理を追加
そしてApp()の中に以下のコードを追加します。ファイルの一番下で大丈夫です。
fun todaysDate(): String {
fun LocalDateTime.format() = toString().substringBefore('T')
val now = Clock.System.now()
val zone = TimeZone.currentSystemDefault()
return now.toLocalDateTime(zone).format()
}
それに伴ってimportも追加します。
ファイルの一番上に下のやつを追加してください。
import kotlinx.datetime.Clock
import kotlinx.datetime.LocalDateTime
import kotlinx.datetime.TimeZone
import kotlinx.datetime.toLocalDateTime
追加した処理を呼び出す
今回はColumnの中に入れてみましょう。
画面のほぼ全体を覆うcolumnの一番上に、先ほどの日時取得処理で取得したデータをデータを表示するテキストウイジェットを入れます。
具体的には、28行目あたりですね、Buttonウイジェットの上の方に挿入します。
挿入するコードはこれです。
Text(
text = "Today's date is ${todaysDate()}",
modifier = Modifier.padding(20.dp),
fontSize = 24.sp,
textAlign = TextAlign.Center
)
それに伴いimportも追加します。
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
これで画面の上の方に現在の日付が表示されているはず。
補足：自動import
ここまででimportを追加するのがめんどくさいと感じた方は、わかりやすい記事があるのでこれを参考に自動import設定を有効化してください。
ちなみに私はimportしていくのが好きなので有効化してません。
参考にしたもの
Discussion