1
5

More than 1 year has passed since last update.

Jetpack Compose ボタンの2度押しを避ける

Last updated at Posted at 2022-07-13

LaunchedEffect でシンプルに書けるが。

var enabled by remember { mutableStateOf(true) }

Button(
  onClick = {
    enabled = false
  },
  enabled = enabled
) {
  Text("Button")
}

LaunchedEffect(key1 = enabled) {
  if (!enabled) {
    delay(3000)
    enabled = true
  }
}

処理の流れはまあまあだるい。

起動

 ↓

ボタンを表示

 ↓

LaunchedEffect が実行される

   ↓

  enable2 が true なので何もしない

 ↓

ボタンをクリック

 ↓

enabled2 が false に更新される

 ↓

ボタンが更新され無効化される

 ↓

LaunchedEffect が key1 の変更により実行される

   ↓

  enabled2 が false なので3秒開始

   ↓

  3秒経ったら enabled2 が true に更新される

   ↓

ボタンが更新され有効化される

 ↓

LaunchedEffect が key1 の変更により実行される

   ↓

  enable2 が true なので何もしない

re/compose のタイミングを正しく把握すること、

って多重入れ子の複雑なUIになると結構大変だよね。

👉 【Jetpack Compose】 StateHolder として ViewModel を使ったほうが分かりやすくね?
👉 【Jetpack Compose】 「Layout Inspector Recomposition counts」で re-compose 回数を確認する

1
5
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
1
5