Kotlin Compose循环中TextField无法输入内容问题排查

我能让单行TextField正常工作，但在循环中为每一行添加TextField时，输入内容无法显示。以下是我的代码：

class WithdrawScreen: Screen {
@Composable
override fun Content() {
    val navigator = LocalNavigator.currentOrThrow
    val realm = openPelletRealm()
    val pelletLots: RealmResults<PelletLot> = retrieveAllPellotLots(realm)


    MaterialTheme {
//            var pelletsNeeded by remember { mutableStateOf("0") }

        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Withdraw Screen")

            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 20.dp),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                Text("Lot #")
                Text("# of Pellets")
                Text("Lot Date")
                Text("Size")
                Text("Pellets Needed")
            }

            val textFields = Array(pelletLots.size) { "" }

            for ((index, item) in pelletLots.withIndex()) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 5.dp),
                    horizontalArrangement = Arrangement.SpaceEvenly
                ) {
                    Text(item.lotNumber)
                    Text(item.numberOfPelletsInLot.toString())
                    Text(convertLongDateToString(item.dateOfLot))
                    Text(item.pelletSize.toString())
                    TextField(
                        modifier = Modifier.padding(start = 5.dp).width(width = 50.dp),
                        value = textFields[index],  //<-- Problem here maybe?
                        onValueChange = { textFields[index] = it })  //<-- Or here?
                }
            }

            Spacer(modifier = Modifier.weight(1f))

            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 20.dp),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                Button(onClick = {
                    closePelletRealm(realm)
                    navigator.pop()
                }) {
                    Text("Back")
                }
            }
        }
    }
}

问题原因与解决方案 #

核心问题 #

你使用的普通Array不是Jetpack Compose的状态容器，修改数组元素时Compose无法感知状态变化，因此不会触发UI重组，输入的内容自然无法显示。

修复方案 #

需要用remember配合可观察的状态容器来保存TextField的输入值，让Compose能追踪状态变化：

1. 替换状态容器
   将原来的val textFields = Array(pelletLots.size) { "" }替换为mutableStateListOf（推荐）或mutableStateArrayOf：

val textFields = remember {
    mutableStateListOf<String>().apply {
        repeat(pelletLots.size) { add("") }
    }
}

2. 同步数据长度（可选）
   如果pelletLots是可观察的Realm数据，当数据数量变化时，需要同步textFields的长度，避免索引越界：

LaunchedEffect(pelletLots.size) {
    if (textFields.size != pelletLots.size) {
        textFields.clear()
        repeat(pelletLots.size) { textFields.add("") }
    }
}

修改后，当你在onValueChange中更新textFields[index] = it时，Compose会检测到状态变化并触发重组，TextField就能正常显示输入内容了。

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