Android 如何在同一行中滚动自定义布局和惰性列，就好像它们是一个组件一样

您可以使用

val state = rememberScrollState()
val lazyListState = rememberLazyListState()

LaunchedEffect(key1 = Unit) {

    var oldValue = 0
    snapshotFlow {
        state.value
    }.collect {
        println("Value: $it")
        lazyListState.scrollBy((it -oldValue).toFloat())

        oldValue = it
    }
}

滚动带有垂直滚动的列时滚动LazyColumn.

由于它不可重现或没有图像达到预期效果，因此制作了一个示例来展示如何使用1值滚动

@Preview
@Composable
private fun LayoutTest() {

    val state = rememberScrollState()
    val lazyListState = rememberLazyListState()

    LaunchedEffect(key1 = Unit) {

        var oldValue = 0
        snapshotFlow {
            state.value
        }.collect {
            println("Value: $it")
            lazyListState.scrollBy((it - oldValue).toFloat())

            oldValue = it
        }
    }

    Column(
        Modifier
            .fillMaxSize()
            .border(2.dp, Color.Red)
    ) {


        Row(
            Modifier
                .fillMaxSize()
                .border(3.dp, Color.Green)
        ) {
            Column(
                modifier = Modifier
                    .width(150.dp)
                    .fillMaxHeight()
                    .verticalScroll(state = state)
            ) {
                for (i in 0..99) {
                    Text(
                        text = "Header $i",
                        fontSize = 20.sp,
                        color = Color.White,
                        modifier = Modifier
                            .fillMaxWidth()
                            .background(Color.Green)
                    )
                }
            }

            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth(),
                state = lazyListState
            ) {
                items(100) {
                    Text(
                        text = "Row $it",
                        fontSize = 20.sp,
                        color = Color.White,
                        modifier = Modifier
                            .fillMaxWidth()
                            .background(Color.Red)
                    )
                }
            }
        }
    }
}

编辑

如果您希望同时滚动可滚动列和LazyColumn，可以使用NestedScrollConnection获取LazyColumn的滚动值，并使用scroll stat禁用LaunchedEffect侦听列滚动以不再进一步滚动LazyColumn.

但是，如果您在滚动其他合成组件的过程中开始滚动，这将无法正常工作.

@Preview
@Composable
private fun LayoutTest() {

    val state = rememberScrollState()
    val lazyListState = rememberLazyListState()

    var listScrolling by remember {
        mutableStateOf(false)
    }

    val coroutineScope = rememberCoroutineScope()

    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                val delta = -available.y
                coroutineScope.launch {
                    state.scrollBy(delta)
                    listScrolling = true
                }
                return Offset.Zero
            }

            override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
                listScrolling = false
                return super.onPostFling(consumed, available)
            }
        }
    }


    LaunchedEffect(key1 = Unit) {
        var oldValue = 0
        snapshotFlow {
            state.value
        }.collect {
            if (listScrolling.not() && lazyListState.isScrollInProgress.not()) {
                lazyListState.scrollBy((it - oldValue).toFloat())
                oldValue = it
            }
        }
    }

    Column(
        Modifier
            .fillMaxSize()
            .padding(8.dp)
    ) {

        Row(
            Modifier
                .fillMaxSize()
        ) {
            Column(
                modifier = Modifier
                    .width(150.dp)
                    .fillMaxHeight()
                    .verticalScroll(state = state)
            ) {
                for (i in 0..400) {
                    Text(
                        text = "Header $i",
                        fontSize = 24.sp,
                        modifier = Modifier
                            .shadow(4.dp, RoundedCornerShape(8.dp))
                            .fillMaxWidth()
                            .background(Color.White, RoundedCornerShape(8.dp))
                            .padding(8.dp)
                            .wrapContentSize()
                    )
                }
            }


            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .nestedScroll(nestedScrollConnection),
                state = lazyListState
            ) {
                items(401) {
                    Text(
                        text = "Row $it",
                        fontSize = 24.sp,
                        modifier = Modifier
                            .shadow(4.dp, RoundedCornerShape(8.dp))
                            .fillMaxWidth()
                            .background(Color.White, RoundedCornerShape(8.dp))
                            .padding(8.dp)
                            .wrapContentSize()
                    )
                }
            }
        }
    }
}

编辑2

这个看起来在任何情况下都很好用

@Preview
@Composable
private fun LayoutTest2() {

    val state = rememberScrollState()
    val lazyListState = rememberLazyListState()
    
    val coroutineScope = rememberCoroutineScope()

    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                val delta = -available.y
                if (state.isScrollInProgress.not()) {
                    coroutineScope.launch {
                        state.scrollBy(delta)
                    }
                }

                if (lazyListState.isScrollInProgress.not()) {
                    coroutineScope.launch {
                        lazyListState.scrollBy(delta)
                    }
                }
                return Offset.Zero
            }

        }
    }

    Column(
        Modifier
            .fillMaxSize()
            .nestedScroll(nestedScrollConnection)
            .padding(8.dp)
    ) {

        Row(
            Modifier
                .fillMaxSize()
        ) {
            Column(
                modifier = Modifier
                    .width(150.dp)
                    .fillMaxHeight()
                    .verticalScroll(state = state)
            ) {
                for (i in 0..400) {
                    Text(
                        text = "Header $i",
                        fontSize = 24.sp,
                        modifier = Modifier
                            .shadow(4.dp, RoundedCornerShape(8.dp))
                            .fillMaxWidth()
                            .background(Color.White, RoundedCornerShape(8.dp))
                            .padding(8.dp)
                            .wrapContentSize()
                    )
                }
            }

            LazyColumn(
                state = lazyListState,
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                items(401) {
                    Text(
                        text = "Row $it",
                        fontSize = 24.sp,
                        modifier = Modifier
                            .shadow(4.dp, RoundedCornerShape(8.dp))
                            .fillMaxWidth()
                            .background(Color.White, RoundedCornerShape(8.dp))
                            .padding(8.dp)
                            .wrapContentSize()
                    )
                }
            }
        }
    }
}