LoginSignup
0
0

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

Last updated at Posted at 2023-11-30

はじめに

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

ライブラリを導入する

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していくのが好きなので有効化してません。

参考にしたもの

次はこれ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0