【Jetpack Compose】List型のMutableLiveDataがViewに発火しない原因はこれだった

しばしハマってしまったのですが、原因がわかったらそらそうだ！となったメモです。

List型の要素が追加されたらViewを更新したい

MutableLiveDataにList型を入れて、要素が追加されたらViewを更新しようとするサンプルです。

kotlin

class SampleViewModel : ViewModel() {
    val items = MutableLiveData<ArrayList<String>>(ArrayList())
    var counter = 0

    init {
        add()
    }

    fun add() {
        counter++
        items.value?.add(counter.toString())
    }
}

@Composable
fun SampleView(viewModel: SampleViewModel) {
    val items = viewModel.items.observeAsState()

    Column {
        Button(onClick = {
            viewModel.add()
        }) {
            Text("add")
        }

        items.value?.forEach { item ->
            Text(item)
        }
    }
}

このコードで良さげと思ったのですが、、ボタンをタップしても反応しません...

対処：その１

ググったらこういうのが出てきました。なんか良さげ。

kotlin

    items.postValue(items.value)

そうかと思いやってみたら・・・

効きません。。

対処：その2

こういうのもヒットしました。

kotlin

    items.value = items.value

どうでしょうか・・・

ダメです。。

解決方法

冷静になって見直してみると MutableLiveData に ArrayList が突っ込まれている・・・、kotlinではMutableListが定石ですよね！

kotlin

-   val items = MutableLiveData<ArrayList<String>>(ArrayList())
+   val items = MutableLiveData<MutableList<String>>(mutableStateListOf())

やってみると・・・

うまくいきました！！

よかった。
（こういうのコンパイラで教えて欲しい）