如何在 Jetpack Compose 中創建動態視圖

Question

我正在嘗試創建一些動態視圖，當用戶單擊添加按鈕時，它會啟動一組新的文本字段並填寫所需的詳細信息並將所有設置添加到數組的最終列表我面臨如何處理可變 state 的問題每個文本字段的值和 onValueChange 文本字段共享相同的 viewModel 可變 state。

如何處理動態視圖，以便僅更改所需的文本字段值而不是更改所有類似的文本字段

用戶界面代碼

@Composable
fun CombineFields(viewModel: MainContentUploadViewModel = hiltViewModel()) {


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)
            }
        }
    }
}

}

視圖模型

 @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

數據 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
)

任何人都可以幫助我如何進一步發展動態領域謝謝。

Answer 1

正如我所見，您正在使用var selectedOptionText by remember { mutableStateOf(options[0]) }我發現了這個https://stackoverflow.com/a/68887484/20839582 。 檢查它是否有用，因為它提到使用 mutableStateListOf 和 rememberSaveable。