我有一行,其中包含一个lazyColumn和一个定制布局.LAZY列包含小时数和包含定位的事件的自定义布局.它们的滚动状态不同,因此不会一起滚动.我怎么才能解决这个问题.因为我需要一个懒惰专栏来跟踪我在使用布局信息的那一天.

@Composable
fun ScheduleSidebar(
    hourHeight: Dp = 64.dp){
    LazyColumn(
        modifier = modifier,
    
    ) {
        val startTime = LocalTime.MIN
        items(168) { hour ->
            Box(modifier = Modifier.height(hourHeight)) {
                Text(startTime.plusHours(hour.toLong()))
            }
        
        }

    }

这是我的观点:

@Composable
fun ScheduleView(
    viewModel: ScheduleViewModel = getViewModel()
) {
    val verticalScrollState = rememberScrollState()
    val ss = rememberLazyListState()
    val scrollConnection = rememberNestedScrollInteropConnection()

     //added this and still the lazycolumn can scroll alone

LaunchedEffect(key1 = Unit) {



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


    Column(modifier = Modifier.fillMaxSize()) {


        ScheduleHeader()

        Row(
            modifier = Modifier
                .weight(1f)
        ) {

            ScheduleSidebar(
                hourHeight = 64.dp,
                modifier = Modifier
               
                ,
             
            
          
            )

            Schedule(
                bookings = viewModel.state.value.bookingsList,
                modifier = Modifier
                    .verticalScroll(verticalScrollState),
            
           
                onEmptyViewClicked = { days, hour, selectedDate ->
                    showSheet = true
                    viewModel.onEvent(
                        ScheduleEvent.OnEmptyViewClicked(
                            days = days,
                            startTime = hour,
                            selectedDate = selectedDate
                        )
                    )

                }
            )
        }


    }
}

推荐答案

您可以使用

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值滚动

enter image description here

@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()
                    )
                }
            }
        }
    }
}

Android相关问答推荐

垂直居中图标

如何允许我的应用程序在Android 10上运行,同时目标是API 33

广播接收者意图从服务内设置,而不被其他服务接收

无法安装后重新编译android代码'

Android意图过滤器不限制应用程序仅处理YouTube链接

无法加载类';com.android.build.api.extension.AndroidComponentsExtension';

如果我的圆形图像的顶部居中于卡片内部,我如何在其下方画一条弧线?

Android 12+BLE字节不同

从不可组合回调打开可组合屏幕

使用 JNI 从 Android 应用程序中使用 Kotlin/Native 预构建共享库

无法插入 LayoutNode@cc72396 子级,因为它已有父级

获取 ArithmeticException:除以零,但我没有在任何地方除以零

每次在 Jetpack Compose 中调用导航

Jetpack Compose Arc 进度条动画(如何重启动画)

Int 传递给 Intent 但Android工作室说我传递了一个字符串

运行一次 kotlin 流,但在下游收到两次

android 13 版本是否会影响 android 12 目标应用程序

Firebase Crashlytics 缩小 R8 Android

Jetpack Compose 中的按钮上的文本未更新

Google Play 服务登录在 Unity Android 上无法正常运行