skydoves / Cloudy

☁️ Jetpack Compose blur effect library, which falls back onto a CPU-based implementation to support older API levels.
Apache License 2.0
789 stars 28 forks source link

update blur while scrolling LazyColumn below blur #26

Open MaximCemencov opened 1 month ago

MaximCemencov commented 1 month ago

I wanna create a screen with your really cool library but I got a issue with blur I wanna create a blue anything below my textField and I do it but while I scroll my list of items the blur does not update by the scroll and the scroll displays the outdated blur info

https://github.com/skydoves/Cloudy/assets/112812079/2966f526-5c59-4cf4-ac85-9d6798623285

and I wanna create some effect like on telegram with blur:

https://github.com/skydoves/Cloudy/assets/112812079/6ae0905f-5dbc-4eae-8e12-438995497213

my code:

var text by remember { mutableStateOf("") } val rememberLazyColumnState = rememberLazyListState()

Box {
    LazyColumn(
        state = rememberLazyColumnState
    ) {
        items(100) { index ->
            Text(text = "Itemasd;klfja;kdfjka;lsjdfl;ajsdflasdlkf;alskdjf: $index")
        }
    }

    Box (
        modifier = Modifier.height(80.dp)
    ) {
        Cloudy(
            radius = 20,
            key2 = rememberLazyColumnState.firstVisibleItemIndex
        ) {
            Box(modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight())
        }
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            placeholder = { Text("Search...") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
        )
    }
}
skydoves commented 1 month ago

Hey @MaximCemencov, for now, Cloudy doesn't support the window blurring feature. It's one of my plans for the next release.