Jetpack Compose 中嵌套水平分页控件的挑战与解决方法

2024-04-02 05:03:04

在 Jetpack Compose 中解决水平分页控件嵌套在垂直分页控件中的问题

引言

在开发类似 TikTok 个人资料屏幕时，我们需要在垂直滚动页面中嵌套水平分页控件，以实现顶部个人资料信息和底部可左右切换的帖子列表。然而，Compose 中存在限制，无法直接嵌套两个垂直分页控件，导致崩溃问题。

问题

当尝试将 HorizontalPager 嵌套在 LazyColumn 中时，我们会遇到以下崩溃错误：

Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed.

解决方法

经过探索和尝试，我们找到了解决此问题的最佳方法：

固定高度

我们可以为 LazyColumn 提供固定高度，但此解决方案并不理想，因为无法动态调整内容高度，且不同列表长度时会出现错位。

使用 FlowRow

替代 LazyColumn 使用 FlowRow 可以避免崩溃，但列表会同时同步滚动，并非预期效果。

将 LazyColumn 移动到 HorizontalPager 之外

最优解是将 LazyColumn 移出 HorizontalPager，通过 rememberCoroutineScope 和 launch 函数处理分页事件：

Scaffold(
    content = {
        HorizontalPager(state = pagerState, count = tabList.size) { page ->
            when (page) {
                0 -> PostsList()
                1 -> DraftsList()
                2 -> LikesList()
                else -> FavoritesList()
            }
        }
    },
    topBar = {
        Column {
            // Profile Header (Picture, Username, Followers, etc)
            Text(text = "Profile Picture")
            
            TabRow(
                // ... Tab configuration
            )
        }
    }
)