PullRefreshIndicator 与 ScrollableTabRow 重叠

Question

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

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

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

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

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

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

老实说，我不明白位于完全不同的可组合项 ( ChatExampleScreen ) 中的PullRefreshIndicator如何与外部的ScrollableTabRow重叠。

希望这能让理解 UI 更容易一些。 任何提示、建议或推荐都将受到赞赏。 谢谢！

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

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

Answer 1

我想留下我的第一个答案，因为我觉得它对未来的读者仍然有用，所以这里有另一个你可能会考虑的答案。

不过，选项卡中的一个Box有一个滚动修饰符，因为根据Accompanist Docs和实际功能。

... 内容需要“垂直滚动”，以便 SwipeRefresh() 能够对滑动手势做出反应。 LazyColumn 等布局可以自动垂直滚动，但 Column 或 LazyRow 等其他布局则不能。 在这些情况下，您可以提供一个 Modifier.verticalScroll 修饰符……

它来自关于 API 迁移的伴奏文档，但它仍然适用于当前的 compose 框架。

我的理解是滚动事件应该存在，以便手动激活PullRefresh （即具有垂直滚动修改器或 LazyColumn 的布局/容器），这将消耗屏幕中的拖动/滑动事件。

这是简短的工作示例。 所有这些都是可以复制和粘贴的。

活动：

class PullRefreshActivity: ComponentActivity() {

    private val viewModel: MyViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Scaffold(
                        modifier = Modifier.fillMaxSize(),
                        topBar = { TopAppBarSample() }
                    ) {
                        MyScreen(
                            modifier = Modifier.padding(it),
                            viewModel = viewModel
                        )
                    }
                }
            }
        }
    }
}

一些数据类：

data class MessageItems(
    val message: String = "",
    val author: String = ""
)

data class DashboardBanner(
    val bannerMessage: String = "",
    val content: String = ""
)

视图模型：

class MyViewModel: ViewModel() {

    var isLoading by mutableStateOf(false)

    private val _messageState = MutableStateFlow(mutableStateListOf<MessageItems>())
    val messageState = _messageState.asStateFlow()

    private val _dashboardState = MutableStateFlow(DashboardBanner())
    val dashboardState = _dashboardState.asStateFlow()

    fun fetchMessages() {

        viewModelScope.launch {
            isLoading = true

            delay(2000L)

            _messageState.update {
                it.add(
                    MessageItems(
                        message = "Hello First Message",
                        author = "Author 1"
                    ),
                )
                it.add(
                    MessageItems(
                        message = "Hello Second Message",
                        author = "Author 2"
                    )
                )

                it
            }
            isLoading = false
        }
    }

    fun fetchDashboard() {

        viewModelScope.launch {
            isLoading = true

            delay(2000L)

            _dashboardState.update {
                it.copy(
                    bannerMessage = "Hello World!!",
                    content = "Welcome to Pull Refresh Content!"
                )
            }
            isLoading = false
        }
    }
}

选项卡屏幕可组合项：

@Composable
fun MessageTab(
    myViewModel : MyViewModel
) {
    val messages by myViewModel.messageState.collectAsState()

    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(messages) { item ->
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .border(BorderStroke(Dp.Hairline, Color.DarkGray)),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = item.message)
                Text(text = item.author)
            }
        }
    }
}

@Composable
fun DashboardTab(
    myViewModel: MyViewModel
) {

    val banner by myViewModel.dashboardState.collectAsState()

    Box(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState()),
        contentAlignment = Alignment.Center
    ) {
        Column {
            Text(
                text = banner.bannerMessage,
                fontSize = 52.sp
            )

            Text(
                text = banner.content,
                fontSize = 16.sp
            )
        }
    }
}

最后，包含PullRefresh和Pager/Tab组件的可组合项，它们都是ConstraintLayout的直接子项。 因此，要在Tabs后面实现PullRefresh但仍位于 Horizo HorizontalPager之上，首先我必须将 Horizo HorizontalPager作为第一个孩子，将PullRefresh作为第二个，将Tabs作为最后一个，相应地约束它们以保留视觉排列一个标签寻呼机。

@OptIn(ExperimentalMaterialApi::class, ExperimentalPagerApi::class)
@Composable
fun MyScreen(
    modifier : Modifier = Modifier,
    viewModel: MyViewModel
) {
    val refreshing = viewModel.isLoading
    val pagerState = rememberPagerState()

    val pullRefreshState = rememberPullRefreshState(
        refreshing = refreshing,
        onRefresh = {
            when (pagerState.currentPage) {
                0 -> {
                    viewModel.fetchMessages()
                }
                1 -> {
                    viewModel.fetchDashboard()
                }
            }
        },
        refreshingOffset = 100.dp // just an arbitrary offset where the refresh will animate
    )

    ConstraintLayout(
        modifier = modifier
            .fillMaxSize()
            .pullRefresh(pullRefreshState)
    ) {
        val (pager, pullRefresh, tabs) = createRefs()

        HorizontalPager(
            count = 2,
            state = pagerState,
            modifier = Modifier.constrainAs(pager) {
                top.linkTo(tabs.bottom)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
                height = Dimension.fillToConstraints
            }
        ) { page ->
            when (page) {
                0 -> {
                    MessageTab(
                        myViewModel = viewModel
                    )
                }
                1 -> {
                    DashboardTab(
                        myViewModel = viewModel
                    )
                }
            }
        }

        PullRefreshIndicator(
            modifier = Modifier.constrainAs(pullRefresh) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
            refreshing = refreshing,
            state = pullRefreshState,
        )

        ScrollableTabRow(
            modifier = Modifier.constrainAs(tabs) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
            selectedTabIndex = pagerState.currentPage,
            indicator = { tabPositions ->
                TabRowDefaults.Indicator(
                    modifier = Modifier.tabIndicatorOffset(
                        currentTabPosition = tabPositions[pagerState.currentPage],
                    )
                )
            },
        ) {
            Tab(
                selected = pagerState.currentPage == 0,
                onClick = {},
                text = {
                    Text(
                        text = "Messages"
                    )
                }
            )

            Tab(
                selected = pagerState.currentPage == 1,
                onClick = {},
                text = {
                    Text(
                        text = "Dashboard"
                    )
                }
            )
        }
    }
}

输出：

<Surface>
    <Scaffold>
        <ConstraintLayout>

            // top to ScrollableTabRow's bottom
            // start, end, bottom to parent's start, end and bottom
            // 0.dp (view), fillToConstraints (compose)
            <HorizontalPager>
                <PagerScreens/>
            </HorizontalPager>

            // top, start, end of parent
            <PullRefreshIndicator/>

            // top, start and end of parent
            <ScrollableTabRow>
                <Tab/> // Set for the first "Messages" tab
                <Tab/> // Set for the second "Dashboard" tab
            </ScrollableTabRow>
        </ConstraintLayout>
   <Scaffold>
</Surface>

Answer 2

我只想在这里分享有关该问题的更多详细信息以及解决方案。 我非常感谢上面分享的解决方案，这些绝对是解决问题的关键。

这里的最低限度解决方案是在ChatScreenExample可组合项中用ConstraintLayout替换Box ：

为什么？ 因为正如 @zy 在上面分享的那样， PullRefreshIndicator需要包含在“垂直可滚动”的可组合项中，而虽然Box可组合项可以使用vericalScroll()修饰符进行设置，但我们需要确保限制内容的高度，这就是为什么我们必须更改为ConstraintLayout 。

如果我遗漏了什么，请随时纠正我。

Answer 3

我认为PullRefresh api 和Compose/Accompanist Tab/Pager api 一起使用没有任何问题，看起来PullRefresh只是尊重它所放入的布局/容器的放置结构。

考虑这段代码，没有tabs ，没有pager ，只是一个简单的小部件设置，与您的设置相同

Column(
        modifier = Modifier.padding(it)
    ) {

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp)
                .background(Color.Blue)
        )

        val pullRefreshState = rememberPullRefreshState(
            refreshing = false,
            onRefresh = { viewModel.fetchMessages() }
        )

        Box(
            modifier = Modifier.pullRefresh(pullRefreshState)
        ) {

            PullRefreshIndicator(
                modifier = Modifier.align(Alignment.TopCenter),
                refreshing = false,
                state = pullRefreshState,
            )
        }
    }

它看起来像什么。

PullRefresh放置在一个组件 ( Box ) 内，该组件 ( Box ) 在Column垂直放置中放置在另一个组件下方，并且由于它位于另一个小部件下方，因此它的初始位置不会像图像示例那样被隐藏。

通过您的设置，因为我注意到选项卡正在共享ViewModel以及我确认您是否决定使用您的体系结构的原因是因为我能想到的唯一解决方法是按顺序移动PullRefresh可组合的小部件。

我所做的第一个更改是在您的ChatExampleScreen可组合项中，它最终是这样的，所有PullRefresh组件都被删除了。

@Composable
fun ChatExampleScreen(
    chatexampleViewModel: ChatExampleViewModel,
    modifier: Modifier = Modifier
) {
    val chatexampleViewModelState by chatexampleViewModel.state.observeAsState()

    Box(
        modifier = modifier
            .fillMaxSize()
    ) {

        when (val result = chatexampleViewModelState) {
            is ChatExampleViewModel.State.SuccessfullyLoadedMessages -> {
                ChatExampleScreenSuccessfullyLoadedMessages(
                    chatexampleMessages = result.list,
                    modifier = modifier,
                )
            }
            is ChatExampleViewModel.State.NoMessagesFetched -> {
                ChatExampleScreenEmptyState(
                    modifier = modifier
                )
            }
            is ChatExampleViewModel.State.NoInternetConnectivity -> {
                NoInternetConnectivityScreen(
                    modifier = modifier
                )
            }
            else -> {
                // Agus - Do nothing???
                Box(modifier = modifier.fillMaxSize())
            }
        }
    }
}

在您的Activity中，我将所有setContent{…}范围移动到另一个名为ChatTabsContent的函数中，并将所有内容放入其中，包括PullRefresh组件。

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ChatTabsContent(
    modifier : Modifier = Modifier,
    viewModel : ChatExampleViewModel
) {
    val chatexampleViewModelIsLoadingState by viewModel.isLoading.observeAsState()

    val pullRefreshState = rememberPullRefreshState(
        refreshing = chatexampleViewModelIsLoadingState == true,
        onRefresh = { viewModel.fetchMessages() }
    )

    Box(
        modifier = modifier
            .pullRefresh(pullRefreshState)
    ) {

        Column(
            Modifier
                .fillMaxSize()
        ) {
            val pagerState = rememberPagerState()

            ScrollableTabRow(
                selectedTabIndex = pagerState.currentPage,
                indicator = { tabPositions ->
                    TabRowDefaults.Indicator(
                        modifier = Modifier.tabIndicatorOffset(
                            currentTabPosition = tabPositions[pagerState.currentPage],
                        )
                    )
                }
            ) {
                Tab(
                    selected = pagerState.currentPage == 0,
                    onClick = { },
                    text = {
                        Text(
                            text = "Messages"
                        )
                    }
                )
                Tab(
                    selected = pagerState.currentPage == 1,
                    onClick = { },
                    text = {
                        Text(
                            text = "Dashboard"
                        )
                    }
                )
            }

            HorizontalPager(
                count = 2,
                state = pagerState,
                modifier = Modifier.fillMaxWidth(),
            ) { page ->
                when (page) {
                    0 -> {
                        ChatExampleScreen(
                            chatexampleViewModel = viewModel,
                            modifier = Modifier.fillMaxSize()
                        )
                    }
                    1 -> {
                        ChatExampleScreen(
                            chatexampleViewModel = viewModel,
                            modifier = Modifier.fillMaxWidth()
                        )
                    }
                }
            }
        }

        PullRefreshIndicator(
            modifier = Modifier.align(Alignment.TopCenter),
            refreshing = chatexampleViewModelIsLoadingState == true,
            state = pullRefreshState,
        )
    }
}

结果像这样

 setContent {
        TheOneAppTheme {
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colors.background
            ) {
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    topBar = { TopAppBarSample() }
                ) {

                    ChatTabsContent(
                        modifier = Modifier.padding(it),
                        viewModel = viewModel
                    )
                }
            }
        }
    }

结果：

结构变化。

<Surface>
    <Scaffold> // Set with a topBar
        <Box>
            <Column>
                <ScrollableTabRow>
                    <Tab/> // Set for the first "Messages" tab
                    <Tab/> // Set for the second "Dashboard" tab
                </ScrollableTabRow>
                <HorizontalPager>
                    <Box/>
                </HorizontalPager>
            </Column>

            // pull refresh is now at the most "z" index of the 
            // box, overlapping the content (tabs/pager)
            <PullRefreshIndicator/> 
        </Box>
    <Scaffold>
</Surface>

我还没有探索这个 API，但看起来它应该直接用于 z-oriented 布局/容器父级，例如Box作为最后一个子级。

Answer 4

在我的例子中，一个相对简单的解决方案是简单地为包含我的可垂直滚动的 Composable 和我的 PullRefreshIndicator 的 Box 提供一个 -1f 的 zIndex：

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

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

Answer 5

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