Compose中OutlinedTextField位置异常及DropdownMenu点击问题求助

问题1：OutlinedTextField 仅显示在屏幕底部一小部分 #

原因分析 #

大多是父布局未处理内容超出屏幕的场景，比如直接使用Column但未添加滚动支持，或者父布局的高度约束不合理，导致文本框被挤压到屏幕底部。

解决方案 #

给包含OutlinedTextField的容器添加verticalScroll修饰符，确保内容可滚动查看；同时避免给父布局设置限制内容展示的高度约束。

示例代码：

Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
        .padding(16.dp)
) {
    // 其他布局元素
    OutlinedTextField(
        value = inputText,
        onValueChange = { inputText = it },
        label = { Text("请输入内容") },
        modifier = Modifier.fillMaxWidth()
    )
    // 其他布局元素
}

如果是Box布局导致文本框被错误定位，检查是否误用了align(Alignment.BottomCenter)这类定位修饰符，移除或调整即可。

问题2：两个DropdownMenu 点击后均触发第一个下拉列表 #

原因分析 #

两个DropdownMenu复用了同一个展开状态变量，比如共用var expanded by remember { mutableStateOf(false) }，导致任意一个触发时都会修改该状态，从而打开第一个下拉菜单。

解决方案 #

为每个DropdownMenu单独维护独立的展开状态变量，确保各自的展开/收起逻辑互不干扰。

示例代码：

Column(modifier = Modifier.padding(16.dp)) {
    // 第一个下拉菜单
    var expanded1 by remember { mutableStateOf(false) }
    val menuItems1 = listOf("选项1", "选项2", "选项3")
    var selectedItem1 by remember { mutableStateOf(menuItems1[0]) }

    Box(modifier = Modifier.fillMaxWidth()) {
        TextButton(onClick = { expanded1 = !expanded1 }) {
            Text(selectedItem1)
            Icon(Icons.Default.ArrowDropDown, contentDescription = null)
        }
        DropdownMenu(
            expanded = expanded1,
            onDismissRequest = { expanded1 = false }
        ) {
            menuItems1.forEach { item ->
                DropdownMenuItem(onClick = {
                    selectedItem1 = item
                    expanded1 = false
                }) {
                    Text(item)
                }
            }
        }
    }

    // 第二个下拉菜单
    var expanded2 by remember { mutableStateOf(false) }
    val menuItems2 = listOf("A选项", "B选项", "C选项")
    var selectedItem2 by remember { mutableStateOf(menuItems2[0]) }

    Box(modifier = Modifier.fillMaxWidth()) {
        TextButton(onClick = { expanded2 = !expanded2 }) {
            Text(selectedItem2)
            Icon(Icons.Default.ArrowDropDown, contentDescription = null)
        }
        DropdownMenu(
            expanded = expanded2,
            onDismissRequest = { expanded2 = false }
        ) {
            menuItems2.forEach { item ->
                DropdownMenuItem(onClick = {
                    selectedItem2 = item
                    expanded2 = false
                }) {
                    Text(item)
                }
            }
        }
    }
}

核心是为每个下拉菜单创建独立的expanded状态变量（如expanded1、expanded2），并分别绑定到对应DropdownMenu的展开属性和触发按钮的点击事件中。

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