Jetpack Compose聊天页：固定TopAppBar及底部下拉菜单间隙问题

问题1：键盘弹出时TopAppBar随屏幕上移 #

解决方案 #

要实现TopAppBar固定、仅BottomBar和聊天内容随键盘移动的效果，需调整WindowInsets处理逻辑，并配置Activity的软键盘模式：

1. 配置Activity软键盘模式
   在AndroidManifest.xml对应Activity中添加：

android:windowSoftInputMode="adjustResize"

2. 修改Scaffold布局逻辑

• 让TopAppBar仅响应状态栏Insets，固定在顶部；
• 聊天内容和BottomBar响应键盘（IME）Insets，随键盘移动；
• 调整Scaffold的WindowInsets参数，避免TopAppBar受键盘影响。

修改后的代码：

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("聊天") },
            modifier = Modifier.windowInsetsPadding(WindowInsets.statusBars)
        )
    },
    bottomBar = {
        CustomNavBar(allSendersContactMethods = listOf("方法1", "方法2"))
            .windowInsetsPadding(WindowInsets.ime)
    },
    windowInsets = WindowInsets.systemBars // 仅处理系统状态栏和导航栏，排除IME影响
) { paddingValues ->
    Box(
        modifier = Modifier
            .padding(
                top = paddingValues.calculateTopPadding(),
                bottom = paddingValues.calculateBottomPadding()
            )
            .windowInsetsPadding(WindowInsets.ime) // 聊天内容响应键盘Insets
    ) {
        LazyColumn {
            items(100) { index ->
                Text(text = "消息 $index", modifier = Modifier.padding(8.dp))
            }
        }
    }
}

问题2：DropdownMenu与TextField Row之间存在间隙 #

解决方案 #

间隙源于DropdownMenu的默认布局偏移和内边距，通过将DropdownMenu与Row置于同一Box布局中，并调整位置可消除间隙：

修改后的CustomNavBar代码：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun CustomNavBar(
    allSendersContactMethods: List<String>
) {
    var messageText by remember { mutableStateOf("") }
    val showSendButton: Boolean by remember { derivedStateOf { messageText.isNotEmpty() } }
    var sendersContactMethodNumber: Int by remember { mutableIntStateOf(1) }
    var expanded: Boolean by remember { mutableStateOf(false) }
    var selectedSendersContactMethod by remember { mutableStateOf(allSendersContactMethods.first()) }

    // 用Box替代Column，让DropdownMenu覆盖在Row上方
    Box(
        modifier = Modifier.fillMaxWidth(),
        contentAlignment = Alignment.BottomCenter
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 4.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            TextField(
                value = messageText,
                onValueChange = { messageText = it },
                modifier = Modifier
                    .weight(1f)
                    .background(
                        shape = CircleShape,
                        color = MaterialTheme.colorScheme.inverseOnSurface
                    )
                    .padding(horizontal = 8.dp),
                placeholder = { Text(text = "Type a message") },
                maxLines = 4,
                colors = TextFieldDefaults.textFieldColors(
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    containerColor = Color.Transparent
                ),
                trailingIcon = {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Text(
                            text = "$sendersContactMethodNumber",
                            fontSize = 14.sp,
                            color = MaterialTheme.colorScheme.primary,
                            modifier = Modifier
                                .clickable { expanded = true }
                                .border(
                                    1.5.dp, MaterialTheme.colorScheme.primary,
                                    RoundedCornerShape(4.dp)
                                )
                                .padding(vertical = 1.dp, horizontal = 4.dp)
                        )

                        if (showSendButton) {
                            Spacer(modifier = Modifier.width(4.dp))
                            IconButton(onClick = { /* Handle send action */ }) {
                                Icon(
                                    Icons.Outlined.Send,
                                    contentDescription = "Send",
                                    tint = MaterialTheme.colorScheme.primary
                                )
                            }
                        }
                    }
                }
            )
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.TopEnd) // 对齐到Box右上角，紧贴Row顶部
                .offset(y = (-4).dp) // 微调偏移，彻底消除间隙
        ) {
            allSendersContactMethods.forEachIndexed { index, method ->
                DropdownMenuItem(
                    onClick = {
                        sendersContactMethodNumber = index + 1
                        selectedSendersContactMethod = method
                        expanded = false
                    },
                    text = { Text(text = method) }
                )
            }
        }
    }
}

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