Jetpack ComposeでMutableStateFlowで値を渡してUI更新したい

実現したいこと

先日、アラームアプリを制作し始めました。

アラーム時間を設定する画面で、保存ボタンを押すとホーム画面に遷移して、カードで表示させたいと考えています。そのために、MutableStateFlowを使用して、HomeScreen.ktにカードデータを表示させたいです。

発生している問題・分からないこと

HomeScreenで値が取れません。実行されません。
ログはこちらです。

Log
12024-02-20 12:22:21.725  5815-5838  EGL_emulation           com.example.alarm_clock_kotlin       D  app_time_stats: avg=1842.82ms min=1842.82ms max=1842.82ms count=1
22024-02-20 12:22:21.761  5815-5827  rm_clock_kotlin         com.example.alarm_clock_kotlin       W  Cleared Reference was only reachable from finalizer (only reported once)
32024-02-20 12:22:21.815  5815-5815  AlarmViewModel          com.example.alarm_clock_kotlin       D  addCard: カード追加後のリストサイズ: 1
42024-02-20 12:22:21.815  5815-5815  AlarmViewModel          com.example.alarm_clock_kotlin       D  addCard: カード追加: [CardData(id=993fb05f-26cc-43ea-84d7-afd3c22eb63e, isParent=true, childId=null, alarmTime=12:22, switchValue=false)]
52024-02-20 12:22:21.815  5815-5815  AlarmViewModel          com.example.alarm_clock_kotlin       D  addCard: newListはこちら: [CardData(id=993fb05f-26cc-43ea-84d7-afd3c22eb63e, isParent=true, childId=null, alarmTime=12:22, switchValue=false)]

該当のソースコード

MainActivity.kt
1class MainActivity : AppCompatActivity() {
2    @RequiresApi(Build.VERSION_CODES.O)
3    override fun onCreate(savedInstanceState: Bundle?) {
4        super.onCreate(savedInstanceState)
5        setContent {
6            Alarm_clock_kotlinTheme {
7                val navController = rememberNavController()
8                NavHost(navController = navController, startDestination = "homeScreen") {
9                    composable("homeScreen") { HomeScreen(navController) }
10                    composable("alarmTimePicker") { AlarmTimePicker(navController) }
11                }
12            }
13        }
14    }
15}

AlarmViewModel.kt
1class AlarmViewModel : ViewModel() {
2    private val _cards = MutableStateFlow<List<CardData>>(emptyList())
3    val cards = _cards.asStateFlow()
4
5    companion object {
6        const val TAG = "AlarmViewModel"
7    }
8    fun addCard(card: CardData) {
9        viewModelScope.launch {
10            val newList = _cards.value.toMutableList()
11            newList.add(card)
12            _cards.value = newList
13            Log.d(TAG, "addCard: カード追加後のリストサイズ: ${_cards.value.size}")
14            Log.d(TAG, "addCard: カード追加: ${_cards.value}")
15            Log.d(TAG, "addCard: newListはこちら: ${newList}")
16        }
17    }
18

AlarmSetScreen.kt
1        Button(
2            onClick = {
3                val newCard = CardData(
4                    id = UUID.randomUUID().toString(),
5                    isParent = true,
6                    childId = null,
7                    alarmTime = time,
8                    switchValue = false
9                )
10                viewModel.addCard(newCard)
11//                navController.navigate("homeScreen")
12            },
13            modifier = Modifier
14                .padding(16.dp)
15                .height(60.dp)
16                .fillMaxWidth(),
17            colors = ButtonDefaults.buttonColors(backgroundColor = Color.Cyan),
18        ) {
19            Text(
20                "セットする",
21                style = TextStyle(
22                    fontSize = 20.sp,
23                    fontWeight = FontWeight.Bold
24                )
25            )
26        }

HomeScreen.kt
1@RequiresApi(Build.VERSION_CODES.O)
2@Composable
3fun HomeScreen(navController: NavController, alarmViewModel: AlarmViewModel = viewModel()) {
4    val cards = alarmViewModel.cards.collectAsState()
5    Log.d(TAG, "受け取れてるかカード情報$cards")
6    
7    LazyColumn(
8        modifier = Modifier
9            .background(color = Color.Black)
10            .fillMaxSize()
11    ) {
12        items(cards.value) { card ->
13            Log.d(TAG, "きているのか$cards")
14            AlarmCard(navController = navController, cardData = card, viewModel = alarmViewModel)
15        }
16    }
17

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

デバッグしてHomeScreenが実行されていないことを確認しました。
公式サイトや他の人のgithubのコードを見たりしましたが、解決しませんでした。

補足

Android Studio Giraffe | 2022.3.1 Patch 2
Kotlin version 1.9.255-SNAPSHOT (JRE 21.0.1)

compileSdk 34
minSdk 21
targetSdk 33

行動規範の内容に同意します

回答1件

ベストアンサー

Jetpack Compose を使っていないのでイマイチピンと来ませんが、試しに作ってみたものは動作しています。

kotlin
1import android.os.Bundle
2import android.util.Log
3import androidx.activity.ComponentActivity
4import androidx.activity.compose.setContent
5import androidx.compose.foundation.layout.*
6import androidx.compose.foundation.lazy.*
7import androidx.compose.material3.*
8import androidx.compose.runtime.*
9import androidx.compose.ui.Modifier
10import androidx.compose.ui.graphics.Color
11import androidx.compose.ui.text.TextStyle
12import androidx.compose.ui.text.font.FontWeight
13import androidx.compose.ui.unit.*
14import androidx.lifecycle.viewmodel.compose.viewModel
15import java.time.LocalTime
16import java.util.UUID
17
18class MainActivity : ComponentActivity() {
19  override fun onCreate(savedInstanceState: Bundle?) {
20    super.onCreate(savedInstanceState)
21    setContent {
22      Column {
23        AlarmSetScreen()
24        HomeScreen()
25      }
26    }
27  }
28}
29
30@Composable
31fun AlarmSetScreen(
32  viewModel: AlarmViewModel = viewModel()
33) {
34  Button(
35    onClick = {
36      val newCard = CardData(
37        id = UUID.randomUUID().toString(),
38        isParent = true,
39        childId = null,
40        alarmTime = LocalTime.now(),//time,
41        switchValue = false
42      )
43      viewModel.addCard(newCard)
44//                navController.navigate("homeScreen")
45    },
46    modifier = Modifier
47      .padding(16.dp)
48      .height(60.dp)
49      .fillMaxWidth(),
50    colors = ButtonDefaults.buttonColors(containerColor = Color.Cyan),
51  ) {
52    Text(
53      "セットする",
54      style = TextStyle(
55        fontSize = 20.sp,
56        fontWeight = FontWeight.Bold
57      )
58    )
59  }
60}
61
62@Composable
63fun HomeScreen(
64  alarmViewModel: AlarmViewModel = viewModel()
65) {
66  val cards = alarmViewModel.cards.collectAsState()
67  Log.d("", "受け取れてるかカード情報$cards")
68
69  LazyColumn(
70    modifier = Modifier
71      //.background(color = Color.Black)
72      .fillMaxSize()
73  ) {
74    items(cards.value) { card ->
75      Log.d("", "きているのか$cards")
76      AlarmCard(cardData = card)
77      //AlarmCard(navController = navController, cardData = card, viewModel = alarmViewModel)
78    }
79  }
80}
81
82@Composable
83fun AlarmCard(
84  cardData: CardData
85) {
86  Text(
87    "id: ${cardData.id}",
88    style = TextStyle(
89      fontSize = 16.sp
90    )
91  )
92  Text(
93    "alarmTime: ${cardData.alarmTime}",
94    style = TextStyle(
95      fontSize = 16.sp
96    )
97  )
98}

kotlin
1import android.util.Log
2import androidx.lifecycle.*
3import kotlinx.coroutines.flow.*
4import kotlinx.coroutines.launch
5import java.time.LocalTime
6
7class AlarmViewModel : ViewModel() {
8  private val _cards = MutableStateFlow<List<CardData>>(emptyList())
9  val cards = _cards.asStateFlow()
10
11  companion object {
12    const val TAG = "AlarmViewModel"
13  }
14  fun addCard(card: CardData) {
15    viewModelScope.launch {
16      val newList = _cards.value.toMutableList()
17      newList.add(card)
18      _cards.value = newList
19      Log.d(TAG, "addCard: カード追加後のリストサイズ: ${_cards.value.size}")
20      Log.d(TAG, "addCard: カード追加: ${_cards.value}")
21      Log.d(TAG, "addCard: newListはこちら: ${newList}")
22    }
23  }
24}
25
26data class CardData(
27  val id: String,
28  val isParent: Boolean,
29  val childId: String?,
30  val alarmTime: LocalTime?,
31  val switchValue: Boolean
32)

3回「セットする」をクリックした所

logcat

2024-02-20 20:57:23.152 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: カード追加後のリストサイズ: 1
2024-02-20 20:57:23.153 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: カード追加: [CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false)]
2024-02-20 20:57:23.153 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: newListはこちら: [CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false)]
2024-02-20 20:57:23.183 30630-30630 <no-tag>                com.teratail.q_minbpx5ux7ywho        D  きているのかMutableState(value=[CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false)])@17520182
2024-02-20 20:57:24.456 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: カード追加後のリストサイズ: 2
2024-02-20 20:57:24.456 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: カード追加: [CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false), CardData(id=5d603422-afe5-4bcb-a5bb-c1323a758bb9, isParent=true, childId=null, alarmTime=20:57:24.455, switchValue=false)]
2024-02-20 20:57:24.456 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: newListはこちら: [CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false), CardData(id=5d603422-afe5-4bcb-a5bb-c1323a758bb9, isParent=true, childId=null, alarmTime=20:57:24.455, switchValue=false)]
2024-02-20 20:57:24.469 30630-30630 <no-tag>                com.teratail.q_minbpx5ux7ywho        D  きているのかMutableState(value=[CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false), CardData(id=5d603422-afe5-4bcb-a5bb-c1323a758bb9, isParent=true, childId=null, alarmTime=20:57:24.455, switchValue=false)])@17520182
2024-02-20 20:57:24.481 30630-30630 <no-tag>                com.teratail.q_minbpx5ux7ywho        D  きているのかMutableState(value=[CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false), CardData(id=5d603422-afe5-4bcb-a5bb-c1323a758bb9, isParent=true, childId=null, alarmTime=20:57:24.455, switchValue=false)])@17520182
2024-02-20 20:57:25.112 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: カード追加後のリストサイズ: 3
2024-02-20 20:57:25.113 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: カード追加: [CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false), CardData(id=5d603422-afe5-4bcb-a5bb-c1323a758bb9, isParent=true, childId=null, alarmTime=20:57:24.455, switchValue=false), CardData(id=5756002d-d8a9-4c32-bd4c-a1487ee8079b, isParent=true, childId=null, alarmTime=20:57:25.112, switchValue=false)]
2024-02-20 20:57:25.113 30630-30630 AlarmViewModel          com.teratail.q_minbpx5ux7ywho        D  addCard: newListはこちら: [CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false), CardData(id=5d603422-afe5-4bcb-a5bb-c1323a758bb9, isParent=true, childId=null, alarmTime=20:57:24.455, switchValue=false), CardData(id=5756002d-d8a9-4c32-bd4c-a1487ee8079b, isParent=true, childId=null, alarmTime=20:57:25.112, switchValue=false)]
2024-02-20 20:57:25.133 30630-30630 <no-tag>                com.teratail.q_minbpx5ux7ywho        D  きているのかMutableState(value=[CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false), CardData(id=5d603422-afe5-4bcb-a5bb-c1323a758bb9, isParent=true, childId=null, alarmTime=20:57:24.455, switchValue=false), CardData(id=5756002d-d8a9-4c32-bd4c-a1487ee8079b, isParent=true, childId=null, alarmTime=20:57:25.112, switchValue=false)])@17520182
2024-02-20 20:57:25.134 30630-30630 chatty                  com.teratail.q_minbpx5ux7ywho        I  uid=10146(com.teratail.q_minbpx5ux7ywho) identical 1 line
2024-02-20 20:57:25.141 30630-30630 <no-tag>                com.teratail.q_minbpx5ux7ywho        D  きているのかMutableState(value=[CardData(id=02d7dce8-a760-4d7a-bc98-704ccb021fe2, isParent=true, childId=null, alarmTime=20:57:23.150, switchValue=false), CardData(id=5d603422-afe5-4bcb-a5bb-c1323a758bb9, isParent=true, childId=null, alarmTime=20:57:24.455, switchValue=false), CardData(id=5756002d-d8a9-4c32-bd4c-a1487ee8079b, isParent=true, childId=null, alarmTime=20:57:25.112, switchValue=false)])@17520182

参考：
build.gradle.kts(:app) - dependencies

dependencies {
  implementation("androidx.core:core-ktx:1.12.0")
  implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
  implementation("androidx.activity:activity-compose:1.8.2")
  implementation(platform("androidx.compose:compose-bom:2023.08.00"))
  implementation("androidx.compose.ui:ui")
  implementation("androidx.compose.ui:ui-graphics")
  implementation("androidx.compose.ui:ui-tooling-preview")
  implementation("androidx.compose.material3:material3")
  implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
  testImplementation("junit:junit:4.13.2")
  androidTestImplementation("androidx.test.ext:junit:1.1.5")
  androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
  androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00"))
  androidTestImplementation("androidx.compose.ui:ui-test-junit4")
  debugImplementation("androidx.compose.ui:ui-tooling")
  debugImplementation("androidx.compose.ui:ui-test-manifest")
}

投稿2024/02/20 12:01

編集2024/02/20 12:08