如何在Android Jetpack Compose中创建带编号的文本列表？

要实现缩进正确的编号列表，可以通过Column+Row的组合来实现核心布局，下面是直接可用的可组合函数：

@Composable
fun NumberedList(items: List<String>, modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(horizontal = 16.dp)) {
        items.forEachIndexed { index, text ->
            Row(verticalAlignment = Alignment.Top) {
                // 固定宽度的编号区域，确保多位数编号也能对齐文本
                Text(
                    text = "${index + 1}.",
                    modifier = Modifier
                        .width(24.dp)
                        .padding(end = 8.dp),
                    style = MaterialTheme.typography.bodyMedium
                )
                // 列表项文本，自动占满剩余宽度，换行时保持缩进
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier.weight(1f)
                )
            }
            // 列表项之间的间距
            Spacer(modifier = Modifier.height(8.dp))
        }
    }
}

关键实现细节 #

• 用Column作为容器，统一控制整体的水平内边距
• 通过forEachIndexed遍历列表，利用索引生成从1开始的编号
• 编号文本设置固定宽度，避免1位数和多位数编号（如1.、10.）导致的文本错位
• 列表项文本通过weight(1f)占据剩余宽度，换行时会自动在编号下方对齐，实现正确的缩进效果

使用示例 #

@Composable
fun DemoScreen() {
    val sampleItems = listOf(
        "这是第一条列表项，内容可以包含多行文本，换行后会自动保持和开头文本的对齐",
        "第二条短文本列表项",
        "第三条列表项，测试多位数编号的对齐效果，比如后续的第10项也能完美对齐"
    )
    NumberedList(items = sampleItems)
}

自定义扩展 #

如果需要支持起始编号不是1，或者调整编号样式，可以扩展函数参数：

@Composable
fun NumberedList(
    items: List<String>,
    startIndex: Int = 1,
    numberStyle: TextStyle = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Bold),
    modifier: Modifier = Modifier
) {
    Column(modifier = modifier.padding(horizontal = 16.dp)) {
        items.forEachIndexed { index, text ->
            Row(verticalAlignment = Alignment.Top) {
                Text(
                    text = "${startIndex + index}.",
                    modifier = Modifier
                        .width(28.dp)
                        .padding(end = 8.dp),
                    style = numberStyle
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier.weight(1f)
                )
            }
            Spacer(modifier = Modifier.height(8.dp))
        }
    }
}

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