Jetpack Compose实现带阴影分层布局：滚动列表按钮下显示阴影

核心调整思路 #

放弃原有的Box重叠布局，改用Column让滚动内容占据剩余空间，同时将按钮栏置于视觉上层，并给按钮栏添加顶部渐变遮罩，实现内容滚动到底部时的阴影过渡效果。

代码实现 #

Column(modifier = Modifier.fillMaxSize()) {
    // 可滚动内容区域：占满剩余空间，允许绘制到按钮栏下方
    SubtitleSelector(
        selectedSubtitle = state.selectedSubtitle,
        onSubtitleSelected = { vm.setSubtitle(it) },
        modifier = Modifier
            .weight(1f)
            .zIndex(0f)
    )

    // 底部按钮栏：带渐变遮罩，确保在内容上层显示
    Box(modifier = Modifier.zIndex(1f)) {
        // 顶部渐变遮罩：从透明过渡到背景色，模拟阴影效果
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(24.dp)
                .align(Alignment.TopCenter)
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(
                            Color.Transparent,
                            MaterialTheme.colorScheme.background.copy(alpha = 0.9f)
                        )
                    )
                )
        )

        // 原有按钮组
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 16.dp, horizontal = Theme.spacing.small_3),
            horizontalArrangement = Arrangement.spacedBy(Theme.spacing.small_3)
        ) {
            ClearAllButton(modifier = Modifier.weight(1f)) {
                vm.clearAll()
            }

            ApplyButton(modifier = Modifier.weight(1f)) {}
        }
    }
}

关键细节说明 #

• 层级控制：通过zIndex明确绘制层级，按钮栏层级更高，滚动内容可延伸到其下方。
• 渐变遮罩：用垂直渐变实现从透明到背景色的过渡，内容滚动到底部时会被渐变层逐步遮挡，呈现类似阴影的视觉效果。
• 布局适配：确保SubtitleSelector内部的滚动组件（比如LazyColumn）没有设置clipToBounds = true，否则内容无法延伸到按钮栏下方。

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