0
 LazyColumn(state = lazyListState,) {
     item {}
     item {}
     stickyHeader{
        stickState.value = lazyListState.firstVisibleItemIndex >= stickyItemIndex
        //Some item in here
     }
 }

When using stickyHeader {}, how can I access the isSticky property? I tried firstVisibleItemIndex. Sometimes it's working. Sometimes not.I will use this state to make the divider in the header disappear. And I will use it to change the background of the stickyItem

I'm looking for guidance on how to determine if a particular item is sticky and use this information to customize its appearance based on whether it's sticky or not. If anyone has experience with this or can provide an example, I would greatly appreciate it.

UPDATE: We've realised I'm going to have to go about this in a different way. I'll share the solution if I can figure it out.

UPDATE 2: I show some items according to some conditions, so I was increasing the stickyHeaderIndex within these conditions. Because of recomposition, sometimes this index increases when it should not increase. When I gave a specific index, my problem was solved and it was as I wanted with stickyHeader.You can only find out if the stickyHeader is sticky by giving a specific index to stickyItemIndex in the following example

stickState.value = lazyListState.firstVisibleItemIndex >= stickyItemIndex
Kaan Sarıkaya
  • 131
  • 9

1 Answers1

1

Here is a simple example you can try it and read it

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun StickyHeaderList(data: List<Pair<String, List<String>>>, isShowSticky: Boolean) {
    LazyColumn(modifier = Modifier.fillMaxSize(),
        content = {
            data.forEach { (header, value) ->
                if (isShowSticky) {
                    stickyHeader {
                        Text(
                            text = header,
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(Color.Gray)
                                .padding(8.dp),
                            fontSize = 18.sp,
                            fontWeight = FontWeight.Bold,
                            color = Color.White
                        )
                    }
                } else {
                    item {
                        Text(
                            text = header,
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(Color.Gray)
                                .padding(8.dp),
                            fontSize = 18.sp,
                            fontWeight = FontWeight.Bold,
                            color = Color.White
                        )
                    }
                }
                items(value) { contactItem ->
                    Text(
                        text = contactItem,
                        modifier = Modifier
                            .fillMaxWidth()
                            .background(Color.Gray)
                            .padding(8.dp)
                    )
                }
            }
        })
}

@Composable
fun StickyHeaderExample() {
    val data = listOf(
        "Group A" to listOf("Item 1A", "Item 2A", "Item 3A"),
        "Group B" to listOf("Item 1B", "Item 2B", "Item 3B"),
        "Group C" to listOf("Item 1C", "Item 2C", "Item 3C")
    )

    Scaffold(content = { paddingValues ->
        Box(modifier = Modifier.padding(paddingValues = paddingValues)) {
            StickyHeaderList(data = data, isShowSticky = true)
        }
    })
}
Đốc.tc
  • 530
  • 4
  • 12