在 Jetpack Compose 中单击按钮循环？

Question

我们如何编写代码，例如，如果用户单击按钮，则在按钮下方的列内创建 20 个文本或 20 个函数？

因为我们不能在按钮点击中编写for循环，因为我们得到：

@Composable invocations can only happen from the context of a @Composable function

错误

Answer 1

如果您添加到

mutableStateListOf

，从中删除或更新具有新实例重组的项目，将被触发，并且在 for 循环内，您可以为

Text

中包含的每个数据创建

SnapshotStateList

。

@Composable
private fun AddComposablesInLoopSample() {
    val myList: SnapshotStateList<String> = remember {
        mutableStateListOf()
    }

    Column {
        Button(onClick = {
            myList.addAll(getData())
        }) {
            Text("Get Data")
        }

        myList.forEach {
            Text(it)
        }
    }
}

private fun getData(): List<String> {
    val myList = mutableListOf<String>()
    repeat(20) {
        myList.add("Row $it")
    }

    return myList.toList()
}

getData

功能用于演示填写列表。

结果