How to add compose views dynamically

Question

I am trying to add a some text fields compose dynamically. when clicking a add button a new compose fields appear and add some required texts my problem is text fields changes for all the layouts instead of the particular one. how can use the mutableStateOf for dynamic ones

my view

val containerTitle = viewModel.containerTitle.value
val containerAbout = viewModel.containerAbout.value

OutlinedTextField(value = containerTitle.innerStateTitle,
    onValueChange = { viewModel.onEvent(MainContentEvent.ContainerTitle(it)) },
    label = { Text(text = "Title") })

Spacer(modifier = Modifier.height(8.dp))

TextField(value = containerAbout.innerStateAbout,
    onValueChange = { viewModel.onEvent(MainContentEvent.ContainerAbout(it)) },
    modifier = Modifier.height(100.dp))

Spacer(modifier = Modifier.height(8.dp))

val options = listOf("Products", "Banners", "Categories")
var expanded by remember { mutableStateOf(false) }
var selectedOptionText by remember { mutableStateOf(options[0]) }
// We want to react on tap/press on TextField to show menu
ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = {
        expanded = !expanded
    }
) {
    TextField(
        readOnly = true,
        value = selectedOptionText,
        onValueChange = { },
        label = { Text("Label") },
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(
                expanded = expanded
            )
        },
        colors = ExposedDropdownMenuDefaults.textFieldColors()
    )
    ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = {
            expanded = false
        }
    ) {
        options.forEach { selectionOption ->
            DropdownMenuItem(
                onClick = {
                    selectedOptionText = selectionOption
                    expanded = false
                }
            ) {
                Text(text = selectionOption)
            }
        }
    }
}

viewModel

@HiltViewModel
class MainContentUploadViewModel @Inject constructor(private val 
useCases: UseCases) : ViewModel() {

private val _containerTitle = mutableStateOf(MainContentFieldState())
    val containerTitle : State<MainContentFieldState> = _containerTitle

private val _containerAbout = mutableStateOf(MainContentFieldState())
    val containerAbout : State<MainContentFieldState> = _containerAbout

private val _containerPriority = mutableStateOf(MainContentFieldState())
val containerPriority : State<MainContentFieldState> = _containerPriority

private val _selectedContent = mutableStateOf(MainContentFieldState())
    val selectedContent : State<MainContentFieldState> = _selectedContent

private val _selectedTags = mutableStateOf(MainContentFieldState())
    val selectedTags : State<MainContentFieldState> = _selectedTags

private val _allInnerContent = mutableStateOf(MainContentFieldState())
    val allInnerContent : State<MainContentFieldState> = _allInnerContent

    fun onEvent(event: MainContentEvent){
    when(event) {

        is MainContentEvent.ContainerTitle -> {
            _containerTitle.value = containerTitle.value.copy(innerStateTitle = event.value)
        }

        is MainContentEvent.ContainerAbout -> {
            _containerAbout.value = containerAbout.value.copy(innerStateAbout = event.about)
        }

        is MainContentEvent.ContainerType -> {
            _selectedContent.value = selectedContent.value.copy(selectedContent = event.value)
        }

        is MainContentEvent.ContainerTags -> {
            _selectedTags.value = selectedTags.value.copy(selectedTagsList = event.containerTags)
        }

        is MainContentEvent.ContainerPriority -> {
           _containerPriority.value = containerPriority.value.copy(containerPriority = event.value)
        }

data class

data class InnerContainerItems(
val containerName:String? = null,
val containerAbout:String? = null,
val containerTags:List<String>? = null,
val containerType:String? = null,
val containerPriority:Int? = null,

)

data class MainScreenContainer(
  val ScreenContainer:List<InnerContainerItems>? = null
)

How to solve the value of all text fields changing when one text is changed thanks

you haven't posted full code to understand. – Abhay Koradiya Dec 28 '22 at 06:57 — Abhay Koradiya, Dec 28 '22 at 06:57
have added the viewModel and dataclass code – Shiva s Dec 31 '22 at 23:28 — Shiva s, Dec 31 '22 at 23:28

score 0 · Answer 1 · answered Dec 29 '22 at 09:43

Probably system share one viewmodel to each containers, if you use separated viewmodels for them. You can try using the parent viewmodel to storage information. For this you should:

create a

data class ContainerData(
    val title: String,
    val description: String,
)

add to parent viewmodel

var containersData by mutableStateOf<List<ContainerData>>(emptyList())

get list from UI (if you will use delegate by and add imports, you can use field without .value when you set and get data)

val containersData = viewModel.containersData

use this data for getting information about container in the LazyColumn or simple Column by index
hand over this information to your Container

How to add compose views dynamically

1 Answers1