Android Jetpack Compose实现列表吸顶效果

 更新时间:2022年02月22日 16:33:10   作者:九狼  
安卓传统的Recyclerview打造悬浮头部StickyHeader的吸顶效果,十分麻烦,而在Compose中就简单多了。因此,本文将采用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))
    }
}

吸顶标题

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

@Composable
fun 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)
@Composable
fun 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>
)

@Composable
fun 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))
    }

}


@Composable
fun 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实现列表吸顶效果的文章就介绍到这了,更多相关Jetpack Compose列表吸顶内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • android textview 显示html方法解析

    android textview 显示html方法解析

    现在网络的繁盛时代,光文字是不能满足人们的胃口的,图片,flash,音频,视频就成为浏览网页的主流显示,在手机上也一样,本文将详细介绍此功能的实现方法
    2012-11-11
  • Android中Service和Activity相互通信示例代码

    Android中Service和Activity相互通信示例代码

    在android中Activity负责前台界面展示,service负责后台的需要长期运行的任务。下面这篇文章主要给大家介绍了关于Android中Service和Activity相互通信的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • Android如何实现时间线效果

    Android如何实现时间线效果

    这篇文章主要介绍了 Android如何实现时间线效果,下面文章围绕 Android如何实现时间线效果的相关资料展开详细内容,具有一定的参考价值 ,需要的朋友可以参考一下
    2021-11-11
  • Android中Fragment的解析和使用详解

    Android中Fragment的解析和使用详解

    现在Fragment的应用真的是越来越广泛了,之前Android在3.0版本加入Fragment的时候,主要是为了解决Android Pad屏幕比较大,空间不能充分利用的问题,但现在即使只是在手机上,也有很多的场景可以运用到Fragment了,这篇文章给大家介绍了Android中Fragment的解析和使用。
    2016-11-11
  • Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法

    Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法

    这篇文章主要介绍了Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法的相关资料,需要的朋友可以参考下
    2017-04-04
  • Android获取手机通话记录的方法

    Android获取手机通话记录的方法

    这篇文章主要为大家详细介绍了Android获取手机通话记录的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • android电源信息查看(电量、温度、电压)实例代码

    android电源信息查看(电量、温度、电压)实例代码

    这篇文章主要介绍了android电源信息查看方法,以实例形式较为详细的分析了Android实现电源电量、电压、温度等信息查看的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Android自定义View实现渐变色进度条

    Android自定义View实现渐变色进度条

    这篇文章主要为大家详细介绍了Android自定义View实现渐变色进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Android控件之TabHost用法实例分析

    Android控件之TabHost用法实例分析

    这篇文章主要介绍了Android控件之TabHost用法,以完整实例形式较为详细的分析了TabHost控件实现选项卡的相关技巧,需要的朋友可以参考下
    2015-09-09
  • 详解Android App卸载后跳转到指定的反馈页面的方法

    详解Android App卸载后跳转到指定的反馈页面的方法

    这篇文章主要介绍了Android App卸载后跳转到指定的反馈页面的方法,关键点是相关线程要判断在目录被消除以前作出响应,需要的朋友可以参考下
    2016-04-04

最新评论