Shulou(Shulou.com)06/01 Report--

This article mainly introduces "Android Jetpack Compose how to achieve the list top effect". In the daily operation, I believe many people have doubts about how to achieve the list top effect in Android Jetpack Compose. The editor consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for you to answer the question of "how to achieve list top effect in Android Jetpack Compose". Next, please follow the editor to study!

It is very troublesome for Android traditional Recyclerview to create the ceiling effect of floating head StickyHeader, but it is much easier in Compose.

StickyHeader

Compose was very considerate in its design, and they provided stickyHeader.

The function is to add a sticky title item that remains fixed even when scrolling behind it. The header will remain fixed until the next header is replaced.

The parameter key-represents the unique key.

It does not allow the use of the same key for list occurrences. The type of key should be saved via Bundle. If a null is passed, the position in the list represents the key. When you specify a key, the scrolling position is maintained based on that key, which means that if a delete item is added before the currently visible item, the item with the given key remains as the first visible item.

The parameter content can be displayed when passed into the Composable control.

Entity class

Create an entity class title and content

Data class Post (val title:String, val contentData:List) load fake data val list: MutableList = mutableListOf () for (index in 1.. 10) {val contentData: MutableList = mutableListOf () for (I in 1.. 30) {contentData.add ("content $I")} list.add (Post ("title $index", contentData))}

Define a vertical scrolling list that makes up and lays out only items that are currently visible

LazyColumn {list.forEachIndexed {position, post-> stickyHeader {ListTitle (title = post.title)} items (post.contentData.size) {route-> StructureItem (post.contentData)} if (position Unit = {}) {MediumTitle (title = title) Modifier = Modifier.align (Alignment.CenterVertically). Clickable {onSubtitleClick.invoke ()}

Effect picture

Secondary entry

Continue to write second-level entries

FlowRow can place its children in a combinable item in a horizontal flow. If the horizontal space is too small to put all children in one row, multiple rows may be used. Traditional streaming layout

The usage is simple, just like row

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

You can add multiple TextButton to the content groupable control.

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

Effect picture

Then the top title is put in the LazyColumn and it is done.

LazyColumn () {list.forEachIndexed {position Post-> stickyHeader {ListTitle (title = post.title) {/ / Click event}} item {StructureItem (post.contentData) Spacer (modifier = Modifier.height (10.dp))} complete code @ OptIn (ExperimentalFoundationApi::class) @ Composablefun StickyHeaderScreen () {val list: MutableList = mutableListOf () for (index in 1.. 10) {val contentData: MutableList = mutableListOf () for (I in 1.. 12) {contentData.add ("content $I")} list.add (Post ("title $index") ContentData)} LazyColumn (modifier = Modifier .fillMaxWidth () .fillMaxHeight (), contentPadding = PaddingValues (vertical = 10.dp)) {list.forEachIndexed {position Post-> stickyHeader {ListTitle (title = post.title) {/ / Click event}} item {StructureItem (post.contentData) Spacer (modifier = Modifier.height (10.dp)} data class Post (val title: String) Val contentData: List) @ 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 .paddin g (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) {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)} effect picture

At this point, the study on "how to achieve the list top effect of Android Jetpack Compose" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.