Jetpack Compose中Horizontal Pager显示空白的问题求助

以下是针对你代码的几个排查方向和修复建议：

1. 给Pager指定明确尺寸 #

你的AutomaticSliderWithIndicator和内部的HorizontalPager没有设置固定高度，在可滚动的Column中，这类可组合项会被压缩到最小高度（0），导致看不到内容。

修改AutomaticSliderWithIndicator：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AutomaticSliderWithIndicator(
    pagerState: PagerState,
    listBanner: List<Banner>,
    modifier: Modifier = Modifier
) {
    Box(modifier = modifier.height(200.dp)) { // 添加固定高度，可根据需求调整
        HorizontalPager(
            pageCount = listBanner.size,
            state = pagerState,
            modifier = Modifier.fillMaxSize() // 让Pager填满Box空间
        ) { page ->
            AutomaticBannerItem(
                item = listBanner[page] // 直接传原对象，无需重复创建Banner实例
            )
        }
    }
}

调用时也可显式指定尺寸：

state.dashboard?.let { 
    AutomaticSliderWithIndicator(
        pagerState = pagerstate, 
        listBanner = it.banners,
        modifier = Modifier.fillMaxWidth().height(200.dp)
    ) 
}

2. 确认AutomaticBannerItem的渲染逻辑 #

检查AutomaticBannerItem是否正确展示内容：

• 确保内部包含可见的UI元素（如Text、Image）
• 给它设置明确的尺寸，比如Modifier.fillMaxSize()
• 验证传入的Banner对象的text、icon等属性是否非空有效

3. 修正PagerState初始化 #

rememberPagerState建议指定初始页面，避免潜在的状态异常：

val pagerstate = rememberPagerState(initialPage = 0)

4. 验证数据传递的完整性 #

在AutomaticSliderWithIndicator中添加调试代码，确认listBanner的数量和元素内容：

// 在HorizontalPager上方添加
LaunchedEffect(listBanner) {
    Log.d("PagerDebug", "Banner总数: ${listBanner.size}")
    listBanner.forEachIndexed { index, banner ->
        Log.d("PagerDebug", "Banner $index: 文本=${banner.text}, 数量=${banner.qty}")
    }
}

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