PullRefreshIndicator 与 ScrollableTabRow 重叠

Question

我开始了解 Jetpack Compose。我将这个应用程序放在一起，探索不同的日常用例，该项目中的每个功能模块都应该解决不同的场景。

\n

其中一个功能模块 \xe2\x80\x93 功能chatexample模块尝试实现一个简单的功能，ViewPager其中每个页面都是一个Fragment，第一页“消息”应该显示一个RecyclerView围绕 . 包裹的分页SwipeRefreshLayout。现在，我们的目标是使用 Jetpack Compose 来实现这一切。这是我现在遇到的问题：

\n

\n

我用来实现 Pull-To-Refresh 操作的PullRefreshIndicator按预期工作，到目前为止一切看起来都非常简单，但我无法弄清楚为什么 ProgresBar 保持在顶部。

\n

到目前为止我已经尝试过了；一直继承Modifier父母的教诲。Scaffold确保我明确设置尺寸以适合最大高度和宽度。在whenBox语句中添加一个空-但到目前为止没有任何效果，我猜我可以删除如果我看到ViewModel不应该刷新，但我不认为那样这是正确的做法。PullRefreshIndicator

\n

为了快速解释我在这里使用的可组合项，我有：

\n

<Surface>\n   <Scaffold> // Set with a topBar\n       <Column>\n           <ScrollableTabRow>\n              <Tab/> // Set for the first "Messages" tab\n              <Tab/> // Set for the second "Dashboard" tab\n           </ScrollableTabRow>\n           <HorizontalPager>\n                // ChatExampleScreen\n                <Box> // A Box set with the pullRefresh modifier\n                   // Depending on the ChatExamleViewModel we might pull different composables here\n                   </PullRefreshIndicator>\n                </Box>\n                // Another ChatExampleScreen for the second tab\n           </HorizontalPager>\n       </Column>\n   <Scaffold> \n</Surface>\n

\n

老实说，我不明白PullRefreshIndicator完全不同的 Composable ( ) 中的内容如何与外部的内容ChatExampleScreen重叠。ScrollableTabRow

\n

希望这能让用户界面更容易理解。如有任何提示、建议或推荐，我们将不胜感激。谢谢！

\n

编辑：为了完全清楚，我在这里想要实现的是在每个页面上都有一个 PullRefreshIndicator。像这样的东西：

\n

\n

在每个页面上，您向下拉，会看到进度条出现，完成后，它会在同一页面内消失。不与上面的选项卡重叠。

\n

Answer 1

此问题还有另一种解决方案，即.clipToBounds()在选项卡内容容器上使用修饰符。

Answer 2

在我的例子中，一个相对更简单的解决方案是简单地给包含我的垂直可滚动可组合项和我的 PullRefreshIndicator 的 Box 指定 -1f 的 zIndex：

Box(Modifier.fillMaxSize().zIndex(-1f)) {
    LazyColumn(...)
    PullRefreshIndicator(...)
}

这已经对我起到了作用。我有一个与 OP 非常相似的设置，一个包含 ScrollableTabRow 的 Scaffold 和一个 Horizo​​ntalPager，各个选项卡上带有可刷新列表。