Jetpack Compose聊天应用顶栏消失与软键盘适配问题求助

问题描述 #

使用Jetpack Compose开发聊天应用时，激活输入框（TextField）会导致顶部导航栏向上隐藏消失。设置windowSoftInputMode为adjustResize时，聊天页面表现正常，但登录页等其他包含TextField的页面出现布局变形。尝试过AdjustPan及调整Scaffold外层Surface均未解决问题。

相关代码 #

Scaffold布局代码 #

Scaffold(
    topBar = {
        CenterAlignedTopAppBar(modifier = Modifier
            .height(50.dp)
            .clip(RoundedCornerShape(10.dp)),
            title = {
                Row {
                    Box(modifier = Modifier
                        .size(40.dp)
                        .align(Alignment.CenterVertically)){
                        Image(modifier = Modifier
                            .fillMaxSize()
                            .clip(CircleShape),bitmap = ImageBitmap.imageResource(R.drawable.numan) , contentDescription = null, contentScale = ContentScale.Crop  )

                    }
                    Spacer(modifier = Modifier.padding(horizontal = 2.dp))
                    Text(modifier = Modifier
                        .padding(top = 12.dp)
                        .fillMaxHeight(),
                        text = username.toString(), fontFamily = googleSans, color = MaterialTheme.colorScheme.secondary
                    )
                }
            },
            navigationIcon = {
                Icon(modifier = Modifier
                    .fillMaxHeight()
                    .width(30.dp)
                    .clickable {
                        navController.navigateUp()
                    },imageVector = Icons.Filled.ArrowBack, contentDescription = "back", tint = MaterialTheme.colorScheme.secondary)
            }
            ,colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                contentColorFor(backgroundColor = MaterialTheme.colorScheme.primary),
            ))
    }
, containerColor = MaterialTheme.colorScheme.primary)

输入框代码 #

OutlinedTextField(modifier = Modifier
    .fillMaxWidth(),
    value = myMessage.value,
    onValueChange ={
        myMessage.value = it
    }, trailingIcon ={
        Icon(imageVector = Icons.Filled.Send,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.onPrimary)
    },
    placeholder = {
        Text(text = "Mesaj Yaz...")
    },
    colors = OutlinedTextFieldDefaults.colors(
        focusedBorderColor = MaterialTheme.colorScheme.onPrimary,
        unfocusedBorderColor = MaterialTheme.colorScheme.onPrimary,
        cursorColor = MaterialTheme.colorScheme.onPrimary,
        focusedTextColor = MaterialTheme.colorScheme.onPrimary,
        unfocusedTextColor = MaterialTheme.colorScheme.onPrimary,
        focusedPlaceholderColor = MaterialTheme.colorScheme.onPrimary,
        unfocusedPlaceholderColor = MaterialTheme.colorScheme.onPrimary,
        selectionColors = TextSelectionColors(handleColor = MaterialTheme.colorScheme.onPrimary,
            backgroundColor = MaterialTheme.colorScheme.primary)
    },
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences)
)

解决方案 #

1. 动态设置不同页面的软键盘模式 #

如果是单Activity+Navigation架构，可通过监听导航目的地，为聊天页和其他页面分别设置软键盘调整模式：

navController.addOnDestinationChangedListener { _, destination, _ ->
    val window = requireActivity().window
    when(destination.id) {
        // 替换为你的聊天页面ID
        R.id.chatScreen -> {
            window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
        }
        else -> {
            window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN)
        }
    }
}

这样聊天页用adjustResize保证消息列表正常压缩，其他页面用adjustPan避免布局变形。

2. 优化聊天页Scaffold内部布局 #

确保聊天页的消息列表占据剩余空间，输入框固定在底部：

Scaffold(topBar = { /* 你的TopAppBar实现 */ }) { innerPadding ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
    ) {
        // 消息列表用weight(1f)填充剩余空间
        LazyColumn(modifier = Modifier.weight(1f)) {
            // 加载聊天消息项
            items(messages) { message ->
                // 消息布局
            }
        }
        // 输入框区域
        OutlinedTextField(/* 你的输入框配置 */)
    }
}

3. 修复其他页面的布局变形问题 #

登录页等页面避免固定高度，使用自适应布局：

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(
        text = "登录",
        modifier = Modifier.padding(bottom = 32.dp),
        style = MaterialTheme.typography.headlineSmall
    )
    // 用户名输入框
    OutlinedTextField(
        modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
        value = username.value,
        onValueChange = { username.value = it },
        label = { Text("用户名") }
    )
    // 密码输入框
    OutlinedTextField(
        modifier = Modifier.fillMaxWidth().padding(bottom = 24.dp),
        value = password.value,
        onValueChange = { password.value = it },
        label = { Text("密码") },
        visualTransformation = PasswordVisualTransformation()
    )
    Button(modifier = Modifier.fillMaxWidth(), onClick = { /* 登录逻辑 */ }) {
        Text("登录")
    }
}

通过fillMaxSize和Arrangement.Center让登录控件居中，避免软键盘弹出时布局挤压变形。

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