在 Jetpack Compose 中使用 HorizontalPager 时出现问题

Question

大家晚安！

在我的应用程序中，我正在做一个水平寻呼机，并且发生以下情况：

当我在 pageContent 中使用

when

时，页面会正常呈现。代码和截图如下

Scaffold { paddingValues ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)){
            HorizontalPager(
                state = pagerState
            ) {index ->
                when(index){
                    0 -> {
                        BasePresentation(
                            backgroundColor = Color(0xff0C0810),
                            isObliviateIcon = true,
                            color = Color.LightGray,
                            imageIcon = null,
                            text = Strings.presentation
                        )
                    }
                    1 -> {
                        BasePresentation(
                            backgroundColor = Color(0xffEEBA30),
                            isObliviateIcon = false,
                            imageIcon = R.raw.grifinoria,
                            color = Color(0xffA12A32),
                            text = Strings.presentation
                        )
                    }
                }
            }
        }
    }

事实证明，我想采用

when

块的这两个组件并以列表的形式创建它们，通过索引访问它们，类似于下面的代码：

val presentationList = mutableListOf(
        BasePresentation(
            backgroundColor = Color(0xff0C0810),
            isObliviateIcon = true,
            color = Color.LightGray,
            imageIcon = null,
            text = Strings.presentation
        ),
        BasePresentation(
            backgroundColor = Color(0xffEEBA30),
            isObliviateIcon = false,
            imageIcon = R.raw.grifinoria,
            color = Color(0xffA12A32),
            text = Strings.presentation
        ),
    )
    val pagerState = rememberPagerState(initialPage = 0, pageCount = {presentationList.size})

    Scaffold { paddingValues ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)){
            HorizontalPager(
                state = pagerState
            ) {index ->
                presentationList[index]
            }
        }
    }

但是当我以这种方式运行代码时，组件根本无法加载，并且模拟器中出现白屏。通过在pageContent中添加

println(index)

并在模拟器屏幕上滑动，可以在日志中看到索引发生变化。

你能帮我解决这个问题吗？

唯一有效的方法是添加

when

块。但我想使用这个列表

Answer 1

BasePresentation

是一个可组合项。您尝试将其存储在列表中，并稍后检索它以显示在该位置。但这不是 Compose 的工作原理。 Compose 的声明性性质期望可组合项放置在应显示的位置。它必须留在里面

HorizontalPager

。

您可以做的是将

BasePresentation

的配置（即参数）提取到这样的数据类中（请检查使用的类型是否正确）：

data class Presentation(
    val backgroundColor: Color,
    val isObliviateIcon: Boolean,
    val color: Color,
    val imageIcon: Any?,
    val text: String,
)

现在您可以创建该类的简单对象来表示每个页面的配置并将它们存储在列表中：

val presentationList = remember {
    listOf(
        Presentation(
            backgroundColor = Color(0xff0C0810),
            isObliviateIcon = true,
            color = Color.LightGray,
            imageIcon = null,
            text = Strings.presentation,
        ),
        Presentation(
            backgroundColor = Color(0xffEEBA30),
            isObliviateIcon = false,
            imageIcon = R.raw.grifinoria,
            color = Color(0xffA12A32),
            text = Strings.presentation,
        ),
    )
}

不要忘记记住该列表，否则每次重组时都会重新创建该列表。不需要可变状态，它只是静态配置，不需要观察变化。

最后，在寻呼机中检索适当的配置并使用它调用

BasePresentation

：

HorizontalPager(
    state = pagerState,
) { index ->
    with(presentationList[index]) {
        BasePresentation(
            backgroundColor = backgroundColor,
            isObliviateIcon = isObliviateIcon,
            color = color,
            text = text,
            imageIcon = imageIcon,
        )
    }
}