在jetpack compose中，如何快速一次显示169个元素？

Question

我需要显示一个包含 169 项的表格。每个元素都不可单击，但具有边框以及自己的文本和颜色。我的代码生成表格的时间相当长，大约3秒。确实需要让它几乎是瞬时的。 1）我做错了什么以及如何加快速度？ 2）是否可以通过jetpack compose来做到这一点？ 3）我可能无法在编写代码的同时实现 xml 标记，对吗？

目前我的代码如下所示。我搜索了很多，但没有找到任何其他方法：

@Composable
fun GridOfButtons() {
    LazyColumn {
        repeat(13) { rowIndex ->
            item {
                Row(modifier = Modifier.fillMaxWidth()) {
                    repeat(13) { columnIndex ->
                        ButtonBox(index = rowIndex * 13 + columnIndex)
                    }
                }
            }
        }
    }
}
@Composable
fun ButtonBox(index: Int) {
    Box(
        modifier = Modifier
            .padding(0.dp)
            .size(screenWidth / 16)
            .background(Color.Blue, shape = RoundedCornerShape(4.dp))
            .clickable {
            }
            .border(width = 1.dp, color = Color.Black),
        contentAlignment = Alignment.Center,
    ) {
        Column (horizontalAlignment = Alignment.CenterHorizontally){
            Text (key_to_hand_h[index], fontSize = 12.sp)
            Text(text = index.toString(), color = Color.Black, fontSize = 8.sp)
        }
    }
}

@Composable
fun CustomDialog(onDismiss: () -> Unit) {
    Dialog(
        onDismissRequest = onDismiss,
        content = {
            BoxWithConstraints(modifier = Modifier
                //.fillMaxWidth(1.25f)
                //.fillMaxHeight(0.75f)
                .background(Color.Blue)
            ) {
                GridOfButtons()
            }
        }
    )
}

任何帮助将不胜感激！

我做了两件事。 1）尝试将其制作为文本表格 2）把原来的改成这样。 在这两种情况下，我都得到了轻微的加速。现在，它打开的时间不再是 3 秒，而是大约 2 秒。但仍然需要很长时间。

//1).......................
fun TextTable() {
    val textStyle = LocalTextStyle.current
    Column {
        for (i in 0 until 13) {
            Row(Modifier.fillMaxWidth()) {
                for (j in 0 until 13) {
                    Text(
//2)........................
@Composable
fun GridOfButtons() {
    LazyColumn {
        items(13) { index ->
            Row(modifier = Modifier.fillMaxWidth()) {
                repeat(13) { columnIndex ->
                    ButtonBox(index = index * 13 + columnIndex)
                }
            }
            //ButtonBox(index = index)
        }
    }
}

Answer 1

我最大限度地减少了不必要的嵌套和计算，并且在这里重用了可组合项以获得更好的性能。

@Composable
    fun GridOfButtons() {
        LazyColumn {
            items(169) { index ->
                ButtonBox(index = index)
            }
        }
    }
    
    @Composable
    fun ButtonBox(index: Int) {
        Box(
            modifier = Modifier
                .padding(0.dp)
                .size(screenWidth / 16)
                .background(Color.Blue, shape = RoundedCornerShape(4.dp))
                .border(width = 1.dp, color = Color.Black),
            contentAlignment = Alignment.Center,
        ) {
            Column (horizontalAlignment = Alignment.CenterHorizontally){
                Text (key_to_hand_h[index], fontSize = 12.sp)
                Text(text = index.toString(), color = Color.Black, fontSize = 8.sp)
            }
        }
    }
    
    @Composable
    fun CustomDialog(onDismiss: () -> Unit) {
        Dialog(
            onDismissRequest = onDismiss,
            content = {
                BoxWithConstraints(modifier = Modifier.background(Color.Blue)) {
                    GridOfButtons()
                }
            }
        )
    }