[チュートリアル4]compose multiplarformのサンプルコードを変更して勉強する

はじめに

公式ドキュメントの和訳と要約＋αです。
前回はこれ

ライブラリを導入する

Kotlin Multiplatformのライブラリを導入する場合には、composeApp/build.gradle.ktsをいじります。
そういうライブラリがないときにはそれぞれのプラットフォーム固有のライブラリを使わないといけないらしい。（難しそう）

ちなみにKotlin Multiplatformのライブラリ一覧をまとめてくれているサイトもあります。
Kotlin Multiplatform libraries

手順

1. composeApp/build.gradle.ktsを開く
2. commonMainのdependencies{ ... }の中に追加したいライブラリを追加
3. 右上に出てくる"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していくのが好きなので有効化してません。

参考にしたもの

次

次はこれ