如何在Jetpack Compose中创建带列表的自定义Silver App Bar

一、自定义折叠式Sliver AppBar实现 #

根据目标UI样式，我们可以实现支持滚动折叠效果的自定义Sliver AppBar，包含自定义标题、背景及动态折叠逻辑：

@Composable
fun CustomCollapsingAppBar(
    scrollState: ScrollState,
    title: String
) {
    val appBarExpandedHeight = 250.dp // 展开时的高度
    val appBarCollapsedHeight = 64.dp // 折叠后的高度
    val scrollOffset = scrollState.value.coerceIn(0, (appBarExpandedHeight - appBarCollapsedHeight).toPx())
    val collapseRatio = scrollOffset / (appBarExpandedHeight - appBarCollapsedHeight).toPx()

    SliverAppBar(
        expandedHeight = appBarExpandedHeight,
        collapsedHeight = appBarCollapsedHeight,
        pinned = true,
        backgroundColor = Color(0xFF6200EE),
        elevation = 0.dp
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 16.dp),
            verticalArrangement = Arrangement.Bottom
        ) {
            // 折叠状态下的小标题
            Text(
                text = title,
                color = Color.White,
                fontSize = 20.sp,
                modifier = Modifier
                    .alpha(if (collapseRatio > 0.5f) 1f else 0f)
                    .padding(bottom = 16.dp)
            )
            // 展开状态下的大标题
            Text(
                text = title,
                color = Color.White,
                fontSize = 32.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .alpha(if (collapseRatio < 0.5f) 1f else 0f)
                    .padding(bottom = 32.dp)
            )
        }
    }
}

二、整合列表的完整应用布局 #

将自定义Sliver AppBar与LazyColumn结合，实现滚动联动的折叠效果：

@Composable
fun CustomAppWithList() {
    val scrollState = rememberScrollState()

    Scaffold { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            LazyColumn(
                state = scrollState,
                modifier = Modifier.fillMaxSize()
            ) {
                // 插入自定义Sliver AppBar
                item {
                    CustomCollapsingAppBar(scrollState = scrollState, title = "我的自定义标题")
                }
                // 生成模拟列表项
                items(50) { index ->
                    ListItem(
                        headlineContent = { Text("列表项 $index") },
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                    )
                }
            }
        }
    }
}

// 在Activity中启动应用
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourAppTheme {
                CustomAppWithList()
            }
        }
    }
}

关键细节说明 #

• scrollState：跟踪滚动偏移量，用于计算AppBar的折叠进度
• collapseRatio：通过滚动偏移量计算折叠比例，控制不同状态下标题的显示透明度
• pinned = true：确保AppBar折叠后固定在顶部，不会随滚动消失
• 可根据需求修改appBarExpandedHeight、appBarCollapsedHeight、背景色、标题样式等参数，完全匹配目标UI

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