求助：如何在Kotlin中实现带新增列按钮的表格

核心思路 #

基于Jetpack Compose（当前Kotlin Android开发主流框架）实现响应式表格，通过mutableStateListOf维护列名和行数据，确保数据变化时UI自动更新，同时通过对话框获取用户自定义列名，完成列的动态添加。

步骤拆解 #

1. 定义数据模型
   用数据类封装表格核心数据，列名和行数据均采用可观察状态集合，保证数据变更能触发UI重组：

   data class TableData(
       val columnNames: MutableList<String>,
       val rows: MutableList<MutableList<String>>
   )
   

2. 实现表格基础UI
   拆分表头、表体结构，用带边框的Box实现单元格样式，表头默认加粗区分：

   @Composable
   fun TableCell(text: String, isHeader: Boolean = false) {
       val textStyle = if (isHeader) TextStyle(fontWeight = FontWeight.Bold) else TextStyle()
       Box(
           modifier = Modifier
               .weight(1f)
               .border(1.dp, Color.Gray)
               .padding(8.dp),
           contentAlignment = Alignment.Center
       ) {
           Text(text = text, style = textStyle)
       }
   }
   

3. 新增列逻辑实现

   • 点击"新增列"按钮弹出输入对话框，收集用户输入的列名
   • 验证列名非空后，将列名添加到列名列表
   • 同步给每一行添加对应位置的空值，保证行列数匹配：

   // 对话框确认按钮核心逻辑
   if (newColumnName.isNotBlank()) {
       tableData.columnNames.add(newColumnName)
       tableData.rows.forEach { row -> row.add("") }
       newColumnName = ""
       showAddColumnDialog = false
   }
   

完整可运行代码 #

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

data class TableData(
    val columnNames: MutableList<String>,
    val rows: MutableList<MutableList<String>>
)

@Composable
fun EditableTable() {
    val tableData = remember {
        TableData(
            columnNames = mutableStateListOf("列1", "列2"),
            rows = mutableStateListOf(
                mutableStateListOf("数据1-1", "数据1-2"),
                mutableStateListOf("数据2-1", "数据2-2")
            )
        )
    }

    var showAddColumnDialog by remember { mutableStateOf(false) }
    var newColumnName by remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        Button(
            onClick = { showAddColumnDialog = true },
            modifier = Modifier.align(Alignment.End)
        ) {
            Text("新增列")
        }

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

        // 表格区域（数据量大时可替换为LazyColumn优化滚动）
        Column {
            Row {
                tableData.columnNames.forEach { columnName ->
                    TableCell(text = columnName, isHeader = true)
                }
            }

            tableData.rows.forEach { row ->
                Row {
                    row.forEach { cellValue ->
                        TableCell(text = cellValue)
                    }
                }
            }
        }

        if (showAddColumnDialog) {
            AlertDialog(
                onDismissRequest = { showAddColumnDialog = false },
                title = { Text("输入新列名") },
                text = {
                    OutlinedTextField(
                        value = newColumnName,
                        onValueChange = { newColumnName = it },
                        label = { Text("列名") },
                        modifier = Modifier.fillMaxWidth()
                    )
                },
                confirmButton = {
                    Button(
                        onClick = {
                            if (newColumnName.isNotBlank()) {
                                tableData.columnNames.add(newColumnName)
                                tableData.rows.forEach { row -> row.add("") }
                                newColumnName = ""
                                showAddColumnDialog = false
                            }
                        }
                    ) {
                        Text("确认")
                    }
                },
                dismissButton = {
                    Button(onClick = {
                        newColumnName = ""
                        showAddColumnDialog = false
                    }) {
                        Text("取消")
                    }
                }
            )
        }
    }
}

@Composable
fun TableCell(text: String, isHeader: Boolean = false) {
    val textStyle = if (isHeader) {
        TextStyle(fontWeight = FontWeight.Bold)
    } else {
        TextStyle()
    }
    Box(
        modifier = Modifier
            .weight(1f)
            .border(1.dp, Color.Gray)
            .padding(8.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(text = text, style = textStyle)
    }
}

扩展建议 #

• 数据量大时，将表体替换为LazyColumn实现滚动优化，表头可固定在顶部
• 支持配置新增列的默认值，替代空字符串
• 可扩展列名修改、列删除功能，只需对columnNames和rows做对应增删操作即可

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