Динамически добавлять представления при нажатии кнопки с помощью Jetpack Compose

Question

Я хочу динамически добавлять текстовые поля в свой макет каждый раз, когда пользователь нажимает кнопку «Добавить». Добавленное текстовое поле должно быть добавлено над кнопкой «Добавить». Между шагом 1 текстовое поле и кнопку «Добавить». Как это можно сделать с помощью Jetpack Compose? Ниже приведен снимок экрана за которым следует мой текущий код ..

Код-

      Column(modifier = Modifier.padding(16.dp)) {

            OutlinedTextField(
                modifier = Modifier.fillMaxWidth(),
                value = step1,
                onValueChange = {
                    viewModel.onStep1Changed(it)
                },
                label = {
                    Text(text = "Step 1...")
                },
                shape = RoundedCornerShape(8.dp),
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.Transparent),
                trailingIcon = {
                    Icon(
                        modifier = Modifier.padding(start=10.dp),
                        imageVector = Icons.Filled.Image,
                        tint= Color.Blue,
                        contentDescription = "Select Image"
                    )
                }
            )
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = {
             //TODO Dynamically add text fields
            }){
                Text("Add")
            }

        }

Answer 1

      Column(modifier = Modifier.padding(16.dp)) {
val textFieldCount by remember { mutableStateOf (1) }
            repeat(textFieldCount) {
                OutlinedTextField(
                modifier = Modifier.fillMaxWidth(),
                value = step1,
                onValueChange = {
                    viewModel.onStep1Changed(it)
                },
                label = {
                    Text(text = "Step 1...")
                },
                shape = RoundedCornerShape(8.dp),
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.Transparent),
                trailingIcon = {
                    Icon(
                        modifier = Modifier.padding(start=10.dp),
                        imageVector = Icons.Filled.Image,
                        tint= Color.Blue,
                        contentDescription = "Select Image"
                    )
                }
            )
            Spacer(modifier = Modifier.height(16.dp))
        }
            Button(onClick = {
             textFieldCount++
            }){
                Text("Add")
            }

        }