Jetpack Compose多列文本布局与可变格式表单技术咨询

1. Spinner选择联动显示对应文本 #

Compose中没有原生Spinner组件，可通过TextField+DropdownMenu模拟实现。用状态保存选中的用户项，根据选中值动态展示对应职业文本。

示例代码：

data class User(val name: String, val occupation: String)

@Composable
fun UserSelector() {
    val users = listOf(
        User("张三", "Android开发工程师"),
        User("李四", "产品经理"),
        User("王五", "UI设计师")
    )
    var selectedUser by remember { mutableStateOf<User?>(null) }
    var expanded by remember { mutableStateOf(false) }

    Column {
        // 模拟Spinner的TextField
        TextField(
            value = selectedUser?.name ?: "请选择用户",
            onValueChange = {},
            modifier = Modifier.fillMaxWidth(),
            trailingIcon = {
                IconButton(onClick = { expanded = !expanded }) {
                    Icon(Icons.Default.ArrowDropDown, contentDescription = "展开选择")
                }
            },
            readOnly = true
        )

        // 下拉菜单
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            users.forEach { user ->
                DropdownMenuItem(
                    onClick = {
                        selectedUser = user
                        expanded = false
                    }
                ) {
                    Text(user.name)
                }
            }
        }

        // 显示对应职业文本
        selectedUser?.let {
            Text(
                text = "职业：${it.occupation}",
                modifier = Modifier.padding(top = 16.dp),
                fontSize = 16.sp
            )
        }
    }
}

2. 两列文本间穿插n个子Column的布局 #

通过Row作为每一行的容器，在左右两列文本之间嵌入包含多个子项的Column，外层套Column可实现多行结构。

示例代码：

@Composable
fun TwoColumnWithNestedColumns() {
    Column(Modifier.fillMaxWidth().padding(16.dp)) {
        // 第一行：左文本 + 子Column + 右文本
        Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
            Text("基本信息", modifier = Modifier.weight(1f), textAlign = TextAlign.Center)
            Column(modifier = Modifier.weight(2f)) {
                Text("姓名：张三")
                Text("年龄：28")
                Text("性别：男")
            }
            Text("状态", modifier = Modifier.weight(1f), textAlign = TextAlign.Center)
        }

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

        // 第二行：左文本 + 子Column + 右文本
        Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
            Text("职业信息", modifier = Modifier.weight(1f), textAlign = TextAlign.Center)
            Column(modifier = Modifier.weight(2f)) {
                Text("职位：Android开发工程师")
                Text("工作年限：5年")
                Text("技能：Kotlin、Jetpack Compose")
            }
            Text("评级", modifier = Modifier.weight(1f), textAlign = TextAlign.Center)
        }
    }
}

通过weight分配列宽，中间的子Column可承载任意数量的子项，满足“两列文本间穿插n个子Column”的布局需求。

3. 根据配置文件生成可变格式表单 #

先定义配置项的数据结构描述表单字段属性，再遍历配置列表，根据字段类型动态生成对应的Compose组件。

示例代码：

// 表单字段类型枚举
enum class FormFieldType {
    TEXT, DROPDOWN, SWITCH
}

// 表单字段配置类
data class FormField(
    val id: String,
    val label: String,
    val type: FormFieldType,
    val defaultValue: String = "",
    val options: List<String>? = null // 下拉选项集合
)

@Composable
fun DynamicForm(fields: List<FormField>) {
    val fieldValues = remember { mutableStateMapOf<String, String>() }
    val switchStates = remember { mutableStateMapOf<String, Boolean>() }

    Column(Modifier.fillMaxWidth().padding(16.dp)) {
        fields.forEach { field ->
            when (field.type) {
                FormFieldType.TEXT -> {
                    TextField(
                        value = fieldValues[field.id] ?: field.defaultValue,
                        onValueChange = { fieldValues[field.id] = it },
                        label = { Text(field.label) },
                        modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
                    )
                }
                FormFieldType.DROPDOWN -> {
                    var expanded by remember { mutableStateOf(false) }
                    val selectedValue = fieldValues[field.id] ?: field.defaultValue

                    TextField(
                        value = selectedValue,
                        onValueChange = {},
                        label = { Text(field.label) },
                        modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp),
                        trailingIcon = {
                            IconButton(onClick = { expanded = !expanded }) {
                                Icon(Icons.Default.ArrowDropDown, contentDescription = "展开选项")
                            }
                        },
                        readOnly = true
                    )

                    field.options?.let { options ->
                        DropdownMenu(
                            expanded = expanded,
                            onDismissRequest = { expanded = false }
                        ) {
                            options.forEach { option ->
                                DropdownMenuItem(
                                    onClick = {
                                        fieldValues[field.id] = option
                                        expanded = false
                                    }
                                ) {
                                    Text(option)
                                }
                            }
                        }
                    }
                }
                FormFieldType.SWITCH -> {
                    Row(
                        modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(field.label, modifier = Modifier.weight(1f))
                        Switch(
                            checked = switchStates[field.id] ?: field.defaultValue.toBoolean(),
                            onCheckedChange = { switchStates[field.id] = it }
                        )
                    }
                }
            }
        }

        // 表单提交按钮
        Button(
            onClick = {
                // 处理表单数据，如上传或本地逻辑
                println("表单数据：$fieldValues，开关状态：$switchStates")
            },
            modifier = Modifier.fillMaxWidth().padding(top = 16.dp)
        ) {
            Text("提交表单")
        }
    }
}

// 动态表单使用示例
@Composable
fun DynamicFormDemo() {
    val formConfig = listOf(
        FormField("username", "用户名", FormFieldType.TEXT, defaultValue = "zhangsan"),
        FormField("gender", "性别", FormFieldType.DROPDOWN, options = listOf("男", "女", "其他")),
        FormField("is_vip", "是否VIP", FormFieldType.SWITCH, defaultValue = "false")
    )
    DynamicForm(formConfig)
}

修改formConfig列表即可生成不同结构的表单，完全适配可变格式需求。

内容的提问来源于stack exchange，提问作者Luiz carlos Paredes