jetpackcompose從文本欄位串列中洗掉元素

.

我希望我的代碼正確地從文本欄位串列中洗掉元素。每個元素都有一個 X 按鈕來洗掉它的文本欄位。如果我開始從底部洗掉元素，它可以作業，但它不適用于洗掉 我想使用 forEachIndexed 來顯示串列的隨機元素 請幫助我解決這個問題。我一直在嘗試這樣做一段時間，但每次嘗試都不成功。

這是我設法撰寫的一段代碼，但洗掉元素無法正常作業

val listOfWords = mutableStateListOf<String>()


@Composable
fun Main() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Text(
            text = "Words",
            modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 4.dp),
            style = MaterialTheme.typography.h6
        )

            listOfWords.forEachIndexed { index, word ->
                Input(word, 30, "Word", 1,
                    {newWord ->
                        listOfWords[index] = newWord
                        Log.d("text ",word)
                    },
                    {
                        listOfWords.removeAt(index)
                    }
                )
            }

        IconButton(
            onClick = {
                listOfWords.add("")
            }
        ) {
            Icon(
                imageVector = Icons.Filled.Add,
                contentDescription = "Add"
            )
        }


    }
}

@Composable
fun Input(
    word: String,
    maxChar: Int,
    label: String,
    maxLines: Int,
    onEdit: (word: String) -> (Unit),
    onRemove: () -> (Unit)
) {
    var text by remember { mutableStateOf(word) }
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp, 0.dp, 8.dp, 0.dp)
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = {
                if (it.length <= maxChar) text = it
                onEdit(text)
            },
            modifier = Modifier.fillMaxWidth(),
            label = { Text(label) },
            leadingIcon = {
                Icon(Icons.Default.Edit, null)
            },
            trailingIcon = {
                IconButton(onClick = {
                    onRemove()
                }) {
                    Icon(
                        imageVector = Icons.Default.Clear,
                        contentDescription = "Back"
                    )
                }
            },
            maxLines = maxLines
        )

        Text(
            text = "${text.length} / $maxChar",
            textAlign = TextAlign.End,
            style = MaterialTheme.typography.caption,
            modifier = Modifier
                .fillMaxWidth()
                .padding(end = 16.dp)
        )
    }
}

uj5u.com熱心網友回復：

問題就在這里。

var text by remember { mutableStateOf(word) }

如果不提供keyto ，則每次洗掉 an 時Input's remember，compose 將無法重繪 /更新您的剩余Input狀態。Main's re-compositionInput

您可以將引數word用于key每個組合傳遞（即，當您在 TextField 中添加/洗掉或鍵入值時），您的代碼應該可以按預期作業。rememberre-calculate

var text by remember(word) { mutableStateOf(word) }

uj5u.com熱心網友回復：

您是否嘗試過執行以下操作？

listOfWords.forEachIndexed { index, word ->
    ... // rest of code
    {
        listOfWords.removeAt(index)
    }

標籤：安卓工作室科特林输入android-jetpack-compose

上一篇：將證書字串拆分為兩個單獨的證書

下一篇：漢堡按鈕未在Android上打開NavigationUI導航抽屜