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

Question

実現したいこと

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

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

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

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

2024-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
2024-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)
2024-02-20 12:22:21.815  5815-5815  AlarmViewModel          com.example.alarm_clock_kotlin       D  addCard: カード追加後のリストサイズ: 1
2024-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)]
2024-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)]

該当のソースコード

class MainActivity : AppCompatActivity() {
    @RequiresApi(Build.VERSION_CODES.O)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Alarm_clock_kotlinTheme {
                val navController = rememberNavController()
                NavHost(navController = navController, startDestination = "homeScreen") {
                    composable("homeScreen") { HomeScreen(navController) }
                    composable("alarmTimePicker") { AlarmTimePicker(navController) }
                }
            }
        }
    }
}

class AlarmViewModel : ViewModel() {
    private val _cards = MutableStateFlow<List<CardData>>(emptyList())
    val cards = _cards.asStateFlow()

    companion object {
        const val TAG = "AlarmViewModel"
    }
    fun addCard(card: CardData) {
        viewModelScope.launch {
            val newList = _cards.value.toMutableList()
            newList.add(card)
            _cards.value = newList
            Log.d(TAG, "addCard: カード追加後のリストサイズ: ${_cards.value.size}")
            Log.d(TAG, "addCard: カード追加: ${_cards.value}")
            Log.d(TAG, "addCard: newListはこちら: ${newList}")
        }
    }

        Button(
            onClick = {
                val newCard = CardData(
                    id = UUID.randomUUID().toString(),
                    isParent = true,
                    childId = null,
                    alarmTime = time,
                    switchValue = false
                )
                viewModel.addCard(newCard)
//                navController.navigate("homeScreen")
            },
            modifier = Modifier
                .padding(16.dp)
                .height(60.dp)
                .fillMaxWidth(),
            colors = ButtonDefaults.buttonColors(backgroundColor = Color.Cyan),
        ) {
            Text(
                "セットする",
                style = TextStyle(
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold
                )
            )
        }

@RequiresApi(Build.VERSION_CODES.O)
@Composable
fun HomeScreen(navController: NavController, alarmViewModel: AlarmViewModel = viewModel()) {
    val cards = alarmViewModel.cards.collectAsState()
    Log.d(TAG, "受け取れてるかカード情報$cards")
    
    LazyColumn(
        modifier = Modifier
            .background(color = Color.Black)
            .fillMaxSize()
    ) {
        items(cards.value) { card ->
            Log.d(TAG, "きているのか$cards")
            AlarmCard(navController = navController, cardData = card, viewModel = alarmViewModel)
        }
    }

試したこと・調べたこと

• 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

Answer 1

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

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.*
import androidx.lifecycle.viewmodel.compose.viewModel
import java.time.LocalTime
import java.util.UUID

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      Column {
        AlarmSetScreen()
        HomeScreen()
      }
    }
  }
}

@Composable
fun AlarmSetScreen(
  viewModel: AlarmViewModel = viewModel()
) {
  Button(
    onClick = {
      val newCard = CardData(
        id = UUID.randomUUID().toString(),
        isParent = true,
        childId = null,
        alarmTime = LocalTime.now(),//time,
        switchValue = false
      )
      viewModel.addCard(newCard)
//                navController.navigate("homeScreen")
    },
    modifier = Modifier
      .padding(16.dp)
      .height(60.dp)
      .fillMaxWidth(),
    colors = ButtonDefaults.buttonColors(containerColor = Color.Cyan),
  ) {
    Text(
      "セットする",
      style = TextStyle(
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold
      )
    )
  }
}

@Composable
fun HomeScreen(
  alarmViewModel: AlarmViewModel = viewModel()
) {
  val cards = alarmViewModel.cards.collectAsState()
  Log.d("", "受け取れてるかカード情報$cards")

  LazyColumn(
    modifier = Modifier
      //.background(color = Color.Black)
      .fillMaxSize()
  ) {
    items(cards.value) { card ->
      Log.d("", "きているのか$cards")
      AlarmCard(cardData = card)
      //AlarmCard(navController = navController, cardData = card, viewModel = alarmViewModel)
    }
  }
}

@Composable
fun AlarmCard(
  cardData: CardData
) {
  Text(
    "id: ${cardData.id}",
    style = TextStyle(
      fontSize = 16.sp
    )
  )
  Text(
    "alarmTime: ${cardData.alarmTime}",
    style = TextStyle(
      fontSize = 16.sp
    )
  )
}

import android.util.Log
import androidx.lifecycle.*
import kotlinx.coroutines.flow.*
import kotlinx.coroutines.launch
import java.time.LocalTime

class AlarmViewModel : ViewModel() {
  private val _cards = MutableStateFlow<List<CardData>>(emptyList())
  val cards = _cards.asStateFlow()

  companion object {
    const val TAG = "AlarmViewModel"
  }
  fun addCard(card: CardData) {
    viewModelScope.launch {
      val newList = _cards.value.toMutableList()
      newList.add(card)
      _cards.value = newList
      Log.d(TAG, "addCard: カード追加後のリストサイズ: ${_cards.value.size}")
      Log.d(TAG, "addCard: カード追加: ${_cards.value}")
      Log.d(TAG, "addCard: newListはこちら: ${newList}")
    }
  }
}

data class CardData(
  val id: String,
  val isParent: Boolean,
  val childId: String?,
  val alarmTime: LocalTime?,
  val switchValue: Boolean
)

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")
}

Comments

[masato01]

回答ありがとうございます。
実際にこのコードで実行してみたりサイト調べていたところ、NavHostはViewModelが再取得されてしまうため、インスタンス化しないといけないとのことでした。
ベストアンサーに選ばせていただきました。ありがとうございました。