如何在 Nested LazyColumn 中保持相同的幻灯片状态？

Question

一个

LazyColumn

包括另一个

LazyColumn

，第二个

LazyColumn

包括一个

HorizontalPager

。每个寻呼机都包含一个列表。

如何解决这个问题，或者有人有其他更好的想法来实现该功能吗？我提供了有关示例的 gif。

问题：我想通过滑动下面的LazyColumn使整个布局滑动到一起。然而我的实现中，只有下面的LazyColumn滑动，无法让整个页面在滑动的同时向上滑动

@Composable
fun RadioStationPage(viewModel: RadioStationViewModel = hiltViewModel()){
   ...
        LazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize()
        ){
        ...
                  item { ProgramRankPager( ... )}
    }
}
@Composable
private fun ProgramRankPager(
   ...
){
    Column(
        modifier = Modifier .fillMaxWidth()
.heightIn(max = LocalConfiguration.current.screenHeightDp.dp)
    ) {
        TabRow(
           ...
        ) {
             tabs.forEachIndexed { index, rankTab ->
               ...
            }
        }
        HorizontalPager(
            count = pagers.size,
            state = pageState,
            modifier = Modifier.weight(1f)

        ) {
            //include three page,Simplified into one
            ProgramRankList(...)
            SecondPage()
            ThirdPage()
        }
    }
}

@Composable
private fun ProgramRankList(...){
    LazyColumn(
        modifier = Modifier.fillMaxSize()//...
    ){
        ...
        items(items = programStatus){ item->
            item?.let { bean->
                ProgramRankListItem(
                   ...
                )
            }
        }

    }
}

Answer 1

还没人回答，我来试试吧。

我认为您想要实现的目标存在概念设计缺陷。让我指出一些我认为困难的事情：

• 您有两个可滚动的

  LazyColumn

  ，其中一个是另一个的子级。在 Jetpack Compose 中，只有当嵌套的

  LazyColumn

  具有固定高度时才可能实现。在您的情况下，这似乎没问题，因为您通过将

  LazyColumn

  设置为

  Modifier.weight(1f)

  来设置嵌套

  HorizontalPager

  的父级的高度，然后只需在嵌套

  LazyColumn

  中填充该高度。

• 但是，使用这个

  Modifier.weight(1f)

  对于另一个

  LazyColumn

  的孩子来说并没有真正的意义。它可能什么也不做，或者会将所有其他内容推离屏幕，或者可能导致不可预测的行为。

• 如果您组合了两个

  LazyColumns

  并且内部的一个尺寸固定，则只能通过用手指精确地在其顶部滚动来滚动内部的一个。如果要滚动外部 LazyColumn，则必须在内部 LazyColumn 之外的区域中滚动。

总而言之，如果你想通过滑动内部

LazyColumn

来使外部

LazyColumn

滚动，那么你必须使内部

LazyColumn

不可滚动。您可以使用以下代码禁用滚动：

LazyColumn(userScrollEnabled = false) {
    // ...
}

那么，只有最外层的

LazyColumn

会消耗滚动事件，并且会让整个页面滚动。

但是，我觉得你应该重新考虑你的 UI 设计，或者更清楚地解释你想要实现的确切滚动行为，以防我没有正确理解。