Android Compose应用横竖屏切换后UI消失，点击恢复求助

核心原因 #

你的页面代码直接在HomeScreen中并列放置TopAppBar和内容容器Box，没有使用Scaffold作为顶层布局容器。Compose中TopAppBar是为配合Scaffold设计的，缺少这个容器会导致屏幕旋转时布局重组异常，出现空白，点击屏幕触发强制重组后UI才恢复显示。

修复代码 #

将TopAppBar和内容区域统一放入Scaffold内部，同时应用Scaffold的内边距避免内容被顶部栏遮挡：

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.navigation.NavHostController

@Composable
fun HomeScreen(navController: NavHostController) {
    Scaffold(
        topBar = {
            TopAppBar(title = {
                Text(
                    text = "Home Screen",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            })
        }
    ) { paddingValues ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues),
            contentAlignment = Alignment.Center
        ) {
            Column() {
                Text(
                    text = FlashcardAppRoutes.Electricity.name,
                    modifier = Modifier.clickable {
                        navController.navigate(FlashcardAppRoutes.Electricity.name)
                    }
                )
            }
        }
    }
}

全局适配建议 #

• 所有页面统一使用Scaffold管理顶部栏与内容区域，保持布局结构一致性
• 若页面中有需要跨配置变更保留的状态，使用rememberSaveable替代remember，避免旋转后状态丢失引发异常

内容的提问来源于stack exchange，提问作者Allen J Mathew