Jetpack Compose Webを使いたくてIntelliJのNew Projectでテンプレートから作成しましたが、 Kotlin1.6+Compose1.1 だった為、 Kotlin1.7+Compose1.2 に上げた時に問題が発生しました。 これは開発では問題なくて ./gradlew jsBrowserProductionWebpack 等で…

rootのbuild.gradleに以下を追加する。 plugins { id("io.gitlab.arturbosch.detekt") version("1.22.0-RC2") } allprojects { apply plugin: "io.gitlab.arturbosch.detekt" dependencies { configurations.maybeCreate("detektPlugins") detektPlugins("co…

Columnの中の途中のコンテンツを消す時に、いきなり高さが0になるのではなく、アニメーションさせて消します。 これは、 AnimatedVisibility を使用すればいいのですが、中のコンテンツを表示させるためのものがnullableであり、nullになったら消したい場合…

作るもの 収まる場合は等幅 収まらない場合は横スクロールさせる。なおかつ等幅 使用するもの Jetpack Composeは1度しかmeasureを呼ぶ事ができない制約がありますが、レイアウトにとある高さを与えた場合、無限の横幅があると仮定してレイアウトが変わらない…

はじめに Jetpack Composeは変更があった部分だけ、再計算(ReComposition) されます。どのようなときにReCompositionされて、どのようなときにCompositionがSkipされるのかを知っていると、最適なパフォーマンスを得られる手がかりになります。 Jetpack Comp…

派生Stateである DerivedState を作成する derivedStateOf の使い所についてです。 基本的な使い方 rememberの中で derivedStateOf を使います。その中で State を読み込みます。 これにより、 Stateの counter1 が変化した時にだけ計算が行われます。 var c…

とあるLambdaの中で読み込まれたStateObjectを把握します。 環境 Jetpack Compose Desktopですが、Androidでも動きは同じはずです。 Runtime 1.1 コード Snapshot.observe で読み込まれたStateObjectを把握する事ができます。 derivedStateOf の内部で使われ…

Composableの状態 Composable関数には3つの状態があります。 State1 State2 State3 skippable ○ restartable ○ ○ https://github.com/androidx/androidx/blob/403b6d0032c289ed6e65a1c75f137c07aedd220f/compose/compiler/design/compiler-metrics.md skippa…

LayoutInspectorを使って、Recomposeされているタイミングと場所を把握します。 LayoutInspectorを開きます。 設定 Show Recomposition Counts にチェックを入れます。 Show Recomposition Counts が無い場合は compose runtime のバージョンが 1.2 以上が必…

従来のAndroidのViewでは、プレビュー中なことは isInEditMode でわかります。これのCompose版です。 コード 以下でわかります。 val runningInPreview = LocalInspectionMode.current 使い所 GoogleMapは記事を書いている現状で、プレビューが働かないので…

こちらで紹介したので 0.3.0-build150 のバージョンでしたが、 LocalAppWindow が無くなったので、代わりにWindowに与える引数の、WindowStateを使います。 https://matsudamper.hatenablog.com/entry/2021/02/08/025214 コード Compose Desktopのバージョン…

以下のようなボタンを作成します。 四角の中がボタンが押せる範囲 rippleは円形の中だけ 実装 clickableの引数を見れば明確で、実装時に悩むことはありませんでしたが、以下のようにします。 interactionSource を共有し、rippleを表示させたくない範囲は in…

概要 CoordinatorLayoutのenterAlwaysを作成します。 必要なもの等 スクロールを検知して止めたりする レイアウトを移動させる 影の制御 Compose 解説は末尾でやります。 完成品 @Composable public fun HeaderEnterAlwaysColumn( modifier: Modifier = Modi…

テキストのベースラインとアイコン等を下部に揃えます。 ベースラインではなくて、ただ単純に要素の下部を揃えたい場合は Row(verticalAlignment = Alignment.Bottom) で十分です。 テキストのベースラインを揃える まずテキストのベースラインを揃えるには …

Usecase デザイン上、1行で表示させたいが、デバイスによっては横幅に収まらない。しかし改行をさせたくないものがあったので作りました。 上の様な感じではなく、下のように表示したい場合に使用します。 両方とも文字サイズ30spを使用し、表示できるデバイ…

env composeOptions { kotlinCompilerVersion "1.5.10" kotlinCompilerExtensionVersion "1.0.0-rc01" } code 2つ目のViewを押すと called が2回呼ばれています。 TestViewをRoot関数の外に出すと1回だけになりました。 何故か更新の無いはずのRowの最初のVi…

このような動的に変更されるtimeがあります。 class TagViewModel(private val coroutineScope: CoroutineScope) { val time: MutableStateFlow<String> = MutableStateFlow("") init { coroutineScope.launch(Dispatchers.Default) { while (isActive) { time.value</string>…

※追記 デバッグビルドと本番ビルド、端末ごとにパフォーマンスが大きく異る事がわかったので、パフォーマンスが悪いのはそれのせいかもしれません。(特に自分はPixel5でパフォーマンスが悪かったです。Pixel3は問題なかったですが。) 前提 rc01が出ています…

自分の観測したものだけですが、記述します。 バージョン from: 0.3.0-build152 to: 0.4.0-build168 build.gradle.kts 0.3.0 compose.desktop { application { mainClass = "MainKt" nativeDistributions { targetFormats(TargetFormat.Dmg, TargetFormat.Ms…

バージョン情報 plugins { kotlin("jvm") version "1.4.30" id("org.jetbrains.compose") version "0.3.0-build150" } 本文 フレームなしウィンドウを作成してウィンドウを移動させるまで【Jetpack Compose Desktop】 の続きになります。 https://matsudampe…

バージョン この記事は古いです、Composeのバージョン 1.1.x 以降のコードはこちら。 https://matsudamper.hatenablog.com/entry/2022/06/13/032259 今回紹介するバージョン plugins { kotlin("jvm") version "1.4.30" id("org.jetbrains.compose") version …

バージョン情報 0.3.0 で LazyColumnFor が無くなって、LazyColumnに統合されたようなので、そちらを使用します。 plugins { kotlin("jvm") version "1.4.30" id("org.jetbrains.compose") version "0.3.0-build150" } 古い情報はこちら。 https://matsudamp…

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } 以下のようにImageBitmapに変換して返す関数を作成しました。ついでにキャッシュもしてみました。 object ImageUtil { private val cache…

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } 注釈 0.3.0-build150 CompositionLifecycleObserver は RememberObserver に名前が変わりました。 ライフサイクル ライフサイクルは以下…

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } 0.3.0 で LazyColumnFor が無くなって、LazyColumnに統合されたようなので、最新情報はコチラを見てください。 https://matsudamper.hate…

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } 考え方 普通のKotlinの書き方と全く異なります。Kotlin-Nativeで freeze というものがあるのと同じくらいには違います。Kotlin-NativeやK…

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } Jetpack Composeに入門してみる Android開発者(Gradleが触れる) AndroidのJetpack Composeは触ったことがない 動機 モダンなJavaのGUI環…