如何在可垂直滚动的Compose屏幕中固定视图至屏幕外区域？

要实现特定组件（黑色轮廓）固定填充初始可见区域，其余组件（蓝色轮廓）仅滚动后可见且适配所有屏幕尺寸，核心思路是动态获取屏幕可视区域高度，让目标组件刚好填满该高度，其余组件置于其下方。

实现方式一：基于系统配置与窗口Insets（适配系统栏） #

这种方式会自动减去状态栏、导航栏等系统元素的高度，确保黑色组件完全占据用户可见的屏幕区域：

@Composable
fun FixedVisibleScrollScreen() {
    // 获取屏幕总高度与系统栏内边距
    val config = LocalConfiguration.current
    val screenHeight = config.screenHeightDp.dp
    val systemInsets = LocalWindowInsets.current.systemBars
    // 计算实际可用的可见高度
    val visibleHeight = screenHeight - systemInsets.top.dp - systemInsets.bottom.dp

    val scrollState = rememberScrollState()

    Box(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
    ) {
        Column {
            // 黑色组件：占满初始可见区域
            Box(
                modifier = Modifier
                    .height(visibleHeight)
                    .fillMaxWidth()
                    .background(Color.Black.copy(alpha = 0.8f))
            ) {
                Text(
                    text = "固定可见区域",
                    color = Color.White,
                    fontSize = 20.sp,
                    modifier = Modifier.align(Alignment.Center)
                )
            }

            // 蓝色组件：滚动后可见
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(250.dp)
                    .background(Color.Blue.copy(alpha = 0.8f))
            ) {
                Text(
                    text = "滚动可见区域",
                    color = Color.White,
                    fontSize = 20.sp,
                    modifier = Modifier.align(Alignment.Center)
                )
            }

            // 可添加更多滚动内容
            repeat(4) { index ->
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(180.dp)
                        .background(Color.Blue.copy(alpha = 0.4f))
                        .padding(16.dp)
                ) {
                    Text(
                        text = "更多滚动内容 ${index + 1}",
                        color = Color.White,
                        fontSize = 18.sp
                    )
                }
            }
        }
    }
}

实现方式二：基于滚动容器实际渲染高度（更精准） #

通过onSizeChanged监听滚动容器的实际高度，让黑色组件完全匹配该高度，避免系统配置计算的误差：

@Composable
fun FixedVisibleScrollScreen() {
    val scrollState = rememberScrollState()
    var containerHeight by remember { mutableStateOf(0.dp) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
            // 获取滚动容器的实际渲染高度
            .onSizeChanged { size ->
                containerHeight = size.height.toDp()
            }
    ) {
        Column {
            // 黑色组件：完全填充滚动容器初始可见高度
            Box(
                modifier = Modifier
                    .height(containerHeight)
                    .fillMaxWidth()
                    .background(Color.Black.copy(alpha = 0.8f))
            ) {
                Text(
                    text = "固定可见区域",
                    color = Color.White,
                    fontSize = 20.sp,
                    modifier = Modifier.align(Alignment.Center)
                )
            }

            // 蓝色滚动内容区
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(300.dp)
                    .background(Color.Blue.copy(alpha = 0.8f))
            ) {
                Text(
                    text = "滚动可见区域",
                    color = Color.White,
                    fontSize = 20.sp,
                    modifier = Modifier.align(Alignment.Center)
                )
            }
        }
    }
}

关键说明 #

• 两种方式都能确保黑色组件在任何屏幕尺寸下刚好填满初始可见区域，蓝色组件始终处于屏幕外，仅滚动后可见。
• 如果不需要适配系统栏，可直接使用config.screenHeightDp.dp作为黑色组件的高度。

内容的提问来源于stack exchange，提问作者ziyaddin.ovchiyev