Jetpack Compose中HorizontalPager列表加载页面失败问题求助

问题核心原因 #

你遇到的问题本质是错误地将Composable组件实例直接存入列表。Composable函数并非普通的Kotlin对象，它们必须在Compose的重组上下文内执行，才能生成可被框架追踪、渲染的UI元素。你之前的presentationList存储的是调用BasePresentation()后的结果，这个调用脱离了HorizontalPager的重组作用域，导致组件无法被Compose正确初始化与渲染，最终出现白屏。

修复方案 #

以下两种方案均可解决问题，按需选择即可：

方案1：用数据类存储配置，动态生成组件

先定义数据类封装页面配置参数：

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

创建配置列表：

val presentationConfigs = listOf(
    PresentationConfig(
        backgroundColor = Color(0xff0C0810),
        isObliviateIcon = true,
        color = Color.LightGray,
        imageIcon = null,
        text = Strings.presentation
    ),
    PresentationConfig(
        backgroundColor = Color(0xffEEBA30),
        isObliviateIcon = false,
        imageIcon = R.raw.grifinoria,
        color = Color(0xffA12A32),
        text = Strings.presentation
    )
)

在HorizontalPager中根据配置生成组件：

val pagerState = rememberPagerState(initialPage = 0, pageCount = { presentationConfigs.size })

Scaffold { paddingValues ->
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
    ) {
        HorizontalPager(state = pagerState) { index ->
            val config = presentationConfigs[index]
            BasePresentation(
                backgroundColor = config.backgroundColor,
                isObliviateIcon = config.isObliviateIcon,
                color = config.color,
                imageIcon = config.imageIcon,
                text = config.text
            )
        }
    }
}

方案2：存储返回Composable的Lambda

将每个页面的Composable逻辑封装为Lambda存入列表：

val presentationList = listOf<@Composable () -> Unit>(
    {
        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
        )
    }
)

在Pager中执行Lambda生成组件：

val pagerState = rememberPagerState(initialPage = 0, pageCount = { presentationList.size })

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

原写法无效的原因 #

when语句实现中，每次Pager索引变化时，都会在Compose重组上下文内重新调用BasePresentation()，框架能正确追踪组件的状态与渲染流程。而列表存储组件实例的写法，是在重组上下文之外提前执行了BasePresentation()，生成的结果无法被Compose生命周期管理，自然无法渲染出UI。

内容的提问来源于stack exchange，提问作者joaoAvila