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
}