Recomposition does not happen on change of value of LiveData

Viewed 299

I'm making app like a cookbook for alcohol. The main model object is RecipePreparation. I put it into LiveData object in ViewModel, and observeAsState it into my compose function. I ran into a problem - when I click "ADD BASE" buttonvrecomposition does not happen, new AlcoholBaseView does not appear. But if I scroll down the screen, and then scroll up - it appears.

Model:

class RecipePreparation(
val id: Int,
var title: String,
var listOfAlcoholBase: MutableList<AlcoholBase>,
var listOfStages: MutableList<Stage>,
var isFinished: Boolean,

)

Composble fun

    @Composable
fun EditRecipeScreen(editRecipeScreenViewModel: EditRecipeScreenViewModel = viewModel()){

    Column(modifier = Modifier.fillMaxWidth()
        .wrapContentHeight()) {

        val recipe by editRecipeScreenViewModel.recipe.observeAsState()
        var text by remember { mutableStateOf(recipe!!.title) }

        LazyColumn(
            modifier = Modifier.fillMaxSize())
        {
            item {
                OutlinedTextField(
                    value = text,
                    onValueChange = { text = it},
                    label = { Text("TITLE") } )
            }
            item {
                Row(verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Start) {
                    Text("ALCOHOL BASE")
                }
            }
            item{
                Column(modifier = Modifier
                    .wrapContentHeight()
                    .fillMaxWidth(),
                    verticalArrangement = Arrangement.Center) {
                    for (i in 0 until recipe!!.listOfAlcoholBase.size) {
                        var isRemovable = if (i == recipe!!.listOfAlcoholBase.size - 1) true else false
                        AlcoholBaseView(
                            editRecipeScreenViewModel,
                            recipe!!.listOfAlcoholBase!![i].title,
                            recipe!!.listOfAlcoholBase!![i].volume!!,
                            recipe!!.listOfAlcoholBase!![i].strength!!,
                            i,
                            isRemovable
                        )
                    }
                }
            }
        }
        item{
            Row(modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.Center) {
                Button(onClick = {
                    editRecipeScreenViewModel.addBase()
                } ) {
                    Text("ADD BASE")
                }
            }
        }
    }

}

@Composable
fun AlcoholBaseView(
    viewModel: EditRecipeScreenViewModel = viewModel(),
    name: String,
    vol:String,
    str: String,
    index: Int,
    isRemovable: Boolean) {

    var name by remember { mutableStateOf(name ) }
    var volume by remember { mutableStateOf(vol) }
    var strenght by remember { mutableStateOf(str) }

    Column(modifier = Modifier.fillMaxWidth()) {
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {

            TextField(
                value = name,
                onValueChange = {name = it},
                modifier = Modifier
                    .weight(0.5f)
            )
            TextField(
                value = volume,
                onValueChange = {volume = it},
                modifier = Modifier
                    .weight(0.2f)
            )
            TextField(
                value = strenght,
                onValueChange = {strenght = it},
                modifier = Modifier
                    .weight(0.2f)
            )
            if (isRemovable) {
                Button(onClick = {
                    viewModel.removeBase()
                },
                    modifier = Modifier.weight(0.1f)) {
                    Text("X")
                }
            } else {
                Box(modifier = Modifier.weight(0.1f)) {

                }
            }
        }
    }
}

viewModel:

class EditRecipeScreenViewModel : ViewModel() {

var emptyBase = AlcoholBase("", "", "")
var emptyIngredient = Ingredient("", "")
val emptyRecipe = RecipePreparation(
    123, //
    "",
    mutableListOf(emptyBase),
    mutableListOf(Stage(1, mutableListOf(emptyIngredient), "", "")),
    false
)

val fullRecipe = emptyRecipe
val _recipe: MutableLiveData<RecipePreparation> = MutableLiveData(fullRecipe)
val recipe: LiveData<RecipePreparation> = _recipe

fun addBase()  {
    recipe.value!!.listOfAlcoholBase.add(emptyBase)
    _recipe.value = recipe.value
}
0 Answers
Related