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)) } }
吸頂標題
接著封裝一個吸頂標題,並傳出點擊事件
@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列表吸頂內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Jetpack Compose佈局的使用詳細介紹
- Jetpack Compose實現列表和動畫效果詳解
- Android Compose實現底部按鈕以及首頁內容詳細過程第1/2頁
- Jetpack Compose實現動畫效果的方法詳解
- Android開發Compose remember原理解析