Composableをスクロールに応じて動かす

スクロールで動かす

やり方

ScrollStateの値でComposableのOffSetを変更し続ければよい

以下のようなComposableを作る。

@Composable
    fun Blue(scrollProvider: () -> Int) {
        Column(
            modifier = Modifier
                .offset {
                    val scroll = scrollProvider()
                    val offset = (ScrollHeight - scroll).coerceAtLeast(80)
                    IntOffset(x = 0, y = offset)
                }
                .padding(bottom = 32.dp)
                .background(Color.Cyan)
        ) {
            Spacer(Modifier.height(16.dp))
            Text(
                text = "うごくよ",
                style = MaterialTheme.typography.h4,
                modifier = HzPadding
            )
            Text(
                text = "message",
                style = MaterialTheme.typography.subtitle2,
                fontSize = 20.sp,
                modifier = HzPadding
            )
        }
    }
    @Composable
    fun Body(scrollState: ScrollState) {
        Column(modifier = Modifier.verticalScroll(scrollState)) {
            Spacer(modifier = Modifier.height(ScrollHeight.dp))
            val dataList = mutableListOf<String>("a","a","a","a","a","a","a","a","a","a","a","a","a","a","a","a","a","a","a","a",)
            dataList.forEach {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(120.dp),
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(text = it)
                    Box(modifier = Modifier
                        .fillMaxWidth()
                        .height(60.dp)
                        .background(Color.Red))
                }
            }
        }
    }

よびだしはBoxで。

               Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.LightGray)
                ) {
                    val scrollState = rememberScrollState(0)
                    Body(scrollState = scrollState)
                    Blue { scrollState.value }
                }

参考