jiichan.com

PROGRAMMING

Android Kotlin
javascript
PHP
Java

UiState の値が変わっても UI が変化しない？

compose で、リストを使用したアプリを作っていた時、UiState の値が変わっても UI が変化しないという現象があり、色々試してどうにか解決したのでメモっておくことにしました。(2025.06.20)

≪開発環境≫
windows11
andriod studio Ladybug

state の値が変わっても UI に変化が無かったコード

viewModel 内で uiState の値が変化しているのに何故かコンポーザブル関数側では変化しない？


// このコンポーザブル関数内では直接 uiState の値を使用していない
@Composable
fun MembersList(
    viewModel: MyViewModel
) {
    // viewModel.getMembers()は 関数内で uiState の値を使用している
    val members by viewModel.getMembers().observeAsState(initial = emptyList())
    LazyColumn(
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        items(
            items = members, key = { it.userId }
        ) { item ->
            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                Image(
                    painter = painterResource(id = R.drawable.team),
                    contentDescription = null,
                    modifier = Modifier
                        .clickable {
                            viewModel.updateFlag(item.userId, item.userName, !item.flag)
                        }
                )
                Text(text = item.userName)
            }
        }
    }
}

UI に変化が反映された修正後のコード

何故 UI が変化しないのか分からないまま試しに uiState をコンポーザブル関数内で使ってみたら変化するようになりました。


@Composable
fun MembersList(
    viewModel: MyViewModel,
    uiState: UiState    ← ← ← 追加した部分
) {
    // viewModel.getMembers()は 関数内で uiState を使用している
    val members by viewModel.getMembers().observeAsState(initial = emptyList())
    LazyColumn(
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        items(
            items = members, key = { it.userId }
        ) { item ->
            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                Image(
                    painter = painterResource(id = R.drawable.team),
                    contentDescription = null,
                    modifier = Modifier
                        .clickable {
                            ※ name を uiState.uiName と uiState を使用したら表示が変化した
        変更した部分 → → →   viewModel.updateFlag(item.userId, uiState.uiName, !item.flag)
                        }
                )
                Text(text = item.userName)
            }
        }
    }
}

まとめ

結果的には解決しましたが、何故かは爺ちゃんの頭では無理でした。