当前位置：首页 > news >正文

Compose笔记(五十)--stickyHeader

news 2025/9/8 13:59:20

这一节主要了解一下Compose中的stickyHeader，在Jetpack Compose开发中，stickyHeader是用于实现 "粘性头部" 效果的API，主要用于列表（如 LazyColumn）中，当滚动列表时，指定的头部会固定在顶部，直到下一个头部出现并将其顶出视野。简单总结:

API
stickyHeader是LazyListScope 的扩展函数，主要有以下两种形式：

    @ExperimentalFoundationApifun stickyHeader(key: Any? = null,contentType: Any? = null,content: @Composable LazyItemScope.() -> Unit)

作用：在列表中创建粘性头部，滚动时会固定在顶部
key：用于标识头部，当数据变化时帮助Compose识别是否需要重新绘制
contentType:标识标题内容的类型，辅助Compose的布局优化。
content：头部的内容布局

场景
1 分组数据导航
2 时间轴或步骤指示
3 复杂列表结构

栗子:

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp// 数据模型
data class CategoryItem(val category: String,val items: List<String>
)@OptIn(ExperimentalFoundationApi::class)
@Composable
fun StickyHeaderDemo() {val categories = listOf(CategoryItem(category = "A",items = listOf("Apple", "Apricot", "Avocado","Apple1", "Apricot", "Avocado","Apple2", "Apricot", "Avocado","Apple3", "Apricot", "Avocado")),CategoryItem(category = "B",items = listOf("Banana", "Blueberry", "Blackberry","Banana", "Blueberry", "Blackberry","Banana", "Blueberry", "Blackberry","Banana", "Blueberry", "Blackberry","Banana", "Blueberry", "Blackberry")),CategoryItem(category = "C",items = listOf("Cherry", "Coconut", "Cranberry","Cherry", "Coconut", "Cranberry","Cherry", "Coconut", "Cranberry","Cherry", "Coconut", "Cranberry",)),CategoryItem(category = "D",items = listOf("Date", "Dragonfruit")))LazyColumn(modifier = Modifier.fillMaxSize()) {categories.forEach { category ->stickyHeader(key = category.category) {Text(text = category.category,modifier = Modifier.fillMaxWidth().background(MaterialTheme.colorScheme.primaryContainer).padding(12.dp),color = MaterialTheme.colorScheme.primary,fontSize = 18.sp,fontWeight = FontWeight.Bold)}items(category.items) { item ->Text(text = item,modifier = Modifier.fillMaxWidth().padding(16.dp),fontSize = 16.sp)}}}
}

注意:
必须配合LazyColumn使用：stickyHeader是LazyListScope的扩展函数，只能在LazyColumn的作用域内使用
合理设置key：为每个粘性头部设置唯一key可以提高性能，避免不必要的重组
注意头部样式：粘性头部会覆盖在列表项上方，建议设置明显的背景色区分
避免复杂布局：粘性头部应保持轻量，复杂布局可能影响滚动性能