Jetpack Compose动态视图：解决TextField状态共享问题

核心问题分析 #

当前所有同类型文本字段共享ViewModel的单个可变状态，修改时会同步更新所有字段。要实现独立修改，需要让每个字段组对应独立的数据实例，ViewModel维护字段组的列表而非单个字段状态。

分步实现方案 #

1. 优化数据结构 #

现有数据类无需大幅修改，利用data class的copy方法即可实现字段更新：

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
)

2. 重构ViewModel逻辑 #

将单个字段状态替换为字段组列表状态，添加添加新组、更新组内字段的方法：

@HiltViewModel
class MainContentUploadViewModel @Inject constructor(private val useCases: UseCases) : ViewModel() {
    // 维护所有字段组的可观察列表
    private val _containerItems = mutableStateListOf<InnerContainerItems>()
    val containerItems: List<InnerContainerItems> = _containerItems

    // 初始化默认添加一个空字段组
    init {
        _containerItems.add(InnerContainerItems())
    }

    // 添加新的空字段组
    fun addNewContainer() {
        _containerItems.add(InnerContainerItems())
    }

    // 更新指定索引组的标题
    fun updateContainerTitle(index: Int, title: String) {
        _containerItems[index] = _containerItems[index].copy(containerName = title)
    }

    // 更新指定索引组的描述
    fun updateContainerAbout(index: Int, about: String) {
        _containerItems[index] = _containerItems[index].copy(containerAbout = about)
    }

    // 更新指定索引组的类型
    fun updateContainerType(index: Int, type: String) {
        _containerItems[index] = _containerItems[index].copy(containerType = type)
    }

    // 标签、优先级等字段的更新方法可参照上述逻辑实现
}

3. 重构UI组件 #

循环渲染每个字段组，每个组绑定对应索引的数据，修改时仅更新对应项：

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

    Column(modifier = Modifier.padding(16.dp)) {
        // 遍历渲染所有字段组
        containerItems.forEachIndexed { index, item ->
            FieldGroup(
                item = item,
                onTitleChange = { viewModel.updateContainerTitle(index, it) },
                onAboutChange = { viewModel.updateContainerAbout(index, it) },
                onTypeChange = { viewModel.updateContainerType(index, it) }
            )
            Spacer(modifier = Modifier.height(16.dp))
        }

        // 添加新字段组的按钮
        Button(onClick = { viewModel.addNewContainer() }) {
            Text(text = "添加新字段组")
        }
    }
}

// 单个字段组的独立组件
@Composable
fun FieldGroup(
    item: InnerContainerItems,
    onTitleChange: (String) -> Unit,
    onAboutChange: (String) -> Unit,
    onTypeChange: (String) -> Unit
) {
    Column {
        OutlinedTextField(
            value = item.containerName ?: "",
            onValueChange = onTitleChange,
            label = { Text(text = "Title") }
        )

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

        TextField(
            value = item.containerAbout ?: "",
            onValueChange = onAboutChange,
            modifier = Modifier.height(100.dp),
            label = { Text(text = "About") }
        )

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

        val options = listOf("Products", "Banners", "Categories")
        var expanded by remember { mutableStateOf(false) }
        var selectedOptionText by remember { 
            mutableStateOf(item.containerType ?: options[0]) 
        }

        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
                            onTypeChange(selectionOption)
                            expanded = false
                        }
                    ) {
                        Text(text = selectionOption)
                    }
                }
            }
        }
    }
}

4. 最终数组存储 #

当需要提交数据时，直接使用ViewModel中的containerItems列表，它已包含所有用户填写的字段组数据：

// 获取所有字段组数据
val finalArray = viewModel.containerItems
// 如需封装到MainScreenContainer
val mainContainer = MainScreenContainer(screenContainer = finalArray)

关键说明 #

• 使用mutableStateListOf确保列表变化时UI自动触发重组
• 每个字段组通过索引绑定对应的数据实例，修改操作仅作用于目标项
• 拆分独立的FieldGroup组件，提升代码复用性和可读性

内容的提问来源于stack exchange，提问作者AndroidRocket