Android Jetpack Compose如何实现列表吸顶效果

这篇文章主要介绍“Android Jetpack Compose如何实现列表吸顶效果”，在日常操作中，相信很多人在Android Jetpack Compose如何实现列表吸顶效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Android Jetpack Compose如何实现列表吸顶效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

安卓传统的 Recyclerview 打造悬浮头部StickyHeader的吸顶效果，十分麻烦，而在Compose中就简单多了

stickyHeader

Compose设计的时候考虑得很周到，他们提供了stickyHeader

作用就是添加一个粘性标题项，即使在它后面滚动时也会保持固定。标头将保持固定，直到下一个标头取而代之。

参数key - 表示唯一的密钥键。

它不允许对列表出现使用相同的键。密钥的类型应该可以通过 Bundle 保存。如果传递了 null，则列表中的位置将代表键。当指定键时，滚动位置将基于该键保持，这意味着如果在当前可见项目之前添加删除项目，则具有给定键的项目将保留为第一个可见项目。

参数content 传入Composable控件就即可显示

实体类

创建一个实体类标题和内容

data class Post(    val title:String,    val contentData:List<String>)

加载假数据

val list : MutableList<Post> = mutableListOf()for (index in 1..10) {    val contentData :MutableList<String> = mutableListOf()    for (i in 1..30){        contentData.add("内容 $i")    }    list.add(Post("标题$index",contentData))}

定义一个垂直滚动列表，仅构成和布局当前可见的项目

LazyColumn {    list.forEachIndexed { position, post ->        stickyHeader {            ListTitle(title = post.title)        }        items(post.contentData.size) { route ->            StructureItem(post.contentData)        }        if (position <= list.size - 1) {            Divider()        }        Spacer(modifier = Modifier.height(10.dp))    }}

吸顶标题

接着封装一个吸顶标题，并传出点击事件

@Composablefun ListTitle(    onSubtitleClick: () -> Unit = {}) {        MediumTitle(            title = title,            modifier = Modifier.align(Alignment.CenterVertically).clickable {                onSubtitleClick.invoke()            }}

效果图

二级条目

接着写二级条目

FlowRow可以将其子项置于水平流中的可组合项。如果水平空间太小而无法将所有子项放在一行中，则可能会使用多行。传统的流式布局

用法很简单，和row一样

FlowRow {    for (item in bean) {        TextButton(           ....        }    }}

在content可组控件里面添加多个TextButton即可

fun StructureItem{    Column{        FlowRow() {            for (item in bean) {                TextButton                {                    Text()                }            }        }    }}

效果图

接着吸顶标题放在LazyColumn里面就完成了

LazyColumn() {    list.forEachIndexed { position, post ->        stickyHeader {            ListTitle(title = post.title) {                //点击事件            }        }        item {            StructureItem(post.contentData)            Spacer(modifier = Modifier.height(10.dp))        }    }}

完整代码

@OptIn(ExperimentalFoundationApi::class)@Composablefun StickyHeaderScreen() {    val list: MutableList<Post> = mutableListOf()    for (index in 1..10) {        val contentData: MutableList<String> = mutableListOf()        for (i in 1..12) {            contentData.add("内容 $i")        }        list.add(Post("标题$index", contentData))    }    LazyColumn(        modifier = Modifier            .fillMaxWidth()            .fillMaxHeight(),        contentPadding = PaddingValues(vertical = 10.dp)    ) {        list.forEachIndexed { position, post ->            stickyHeader {                ListTitle(title = post.title) {                    //点击事件                }            }            item {                StructureItem(post.contentData)                Spacer(modifier = Modifier.height(10.dp))            }        }    }}data class Post(    val title: String,    val contentData: List<String>)@Composablefun ListTitle(    modifier: Modifier = Modifier,    title: String,    isLoading: Boolean = false,    onSubtitleClick: () -> Unit = {}) {    Row(        modifier = modifier            .placeholder(false)            .fillMaxWidth()            .height(ListTitleHeight)            .background(color = Color.Gray)    ) {        Box(            modifier = Modifier                .padding(horizontal = 10.dp)                .width(5.dp)                .height(16.dp)                .align(Alignment.CenterVertically)                .background(color = Color.Black)        )        MediumTitle(            title = title,            color = Color.Black,            modifier = Modifier.align(Alignment.CenterVertically).clickable {                onSubtitleClick.invoke()            },            isLoading = isLoading        )        Spacer(modifier = Modifier.weight(1f))    }}@Composablefun StructureItem(    bean: List<String>) {    Column(        modifier = Modifier            .fillMaxWidth()            .padding(top = 10.dp)    ) {        FlowRow(            modifier = Modifier.padding(horizontal = 6.dp)        ) {            for (item in bean) {                Box(modifier = Modifier.padding(horizontal = 2.dp, vertical = 3.dp)) {                    TextButton(                        modifier = Modifier.padding(horizontal = 3.dp).height(34.dp),                        shape = RoundedCornerShape(12.dp),                        onClick = { },                        colors = ButtonDefaults.textButtonColors(                            backgroundColor = themeColor                        )                    )                    {                        Text(                            item,                            color = Color.White                        )                    }                }            }        }    }}

效果图

到此，关于“Android Jetpack Compose如何实现列表吸顶效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！