Android Compose无限轮播异常：visibleItemsInfo始终为空

在纯Compose Demo中正常运行的无限滚动轮播，嵌入XML布局的ComposeView后出现lazyListState.layoutInfo.visibleItemsInfo.isEmpty()始终为true的问题，导致轮播仅执行一次无法循环。核心原因是XML布局体系下ComposeView的初始化与布局时机和纯Compose项目存在差异：LazyRow尚未完成测量布局时，相关LaunchedEffect和snapshotFlow逻辑已提前执行，此时无可见项数据；此外原代码中viewportDimension的计算逻辑存在错误，也会导致轮播逻辑异常。

解决方案1：等待布局完成后执行核心逻辑 #

通过监听LazyRow的布局状态，确保存在可见项后再启动数据更新与自动滚动逻辑，避免提前执行空布局逻辑。

修改后的核心代码：

@Composable
fun MainUi(modifier: Modifier) {
    val lazyListState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    var source by remember { mutableStateOf(autoScrollingList) }
    // 标记是否已完成初始布局
    var isLayoutCompleted by remember { mutableStateOf(false) }

    // 监听布局完成状态，等待第一次出现可见项
    LaunchedEffect(lazyListState) {
        snapshotFlow { lazyListState.layoutInfo.visibleItemsInfo.isNotEmpty() }
            .filter { it }
            .first()
            .run { isLayoutCompleted = true }
    }

    // 仅在布局完成后执行数据补全逻辑
    LaunchedEffect(lazyListState, isLayoutCompleted) {
        if (!isLayoutCompleted) return@LaunchedEffect
        val visibleItemsInfo = lazyListState.layoutInfo.visibleItemsInfo
        val lastVisibleItem = visibleItemsInfo.last()
        // 修正视口尺寸计算：用结束偏移减开始偏移
        val viewportDimension = lazyListState.layoutInfo.viewportEndOffset - lazyListState.layoutInfo.viewportStartOffset

        if (source.size == (viewportDimension / lastVisibleItem.size) + 1) {
            val transitional = (source + source[0].copy(key = UUID.randomUUID(), isFabricated = true))
            source = ArrayList(transitional)
        }
    }

    // 确保父容器传递正确尺寸约束给LazyRow
    Box(modifier = modifier.fillMaxWidth()) {
        LazyRow(
            state = lazyListState,
            modifier = Modifier.fillMaxWidth() // 关键：让LazyRow获取父布局的宽度约束
        ) {
            itemsIndexed(source, key = { _, item -> item.key }) { index, item ->
                AutoScrollingName(autoScrollingModel = source[index])
                Spacer(modifier = Modifier.width(5.dp))
            }
        }
    }

    // 布局完成后启动数据更新流
    LaunchedEffect(isLayoutCompleted) {
        if (!isLayoutCompleted) return@LaunchedEffect
        snapshotFlow { lazyListState.layoutInfo }
            .distinctUntilChangedBy { it.firstVisibleItemIndex }
            .collectLatest { layoutInfo ->
                if (layoutInfo.firstVisibleItemIndex == 0) {
                    source = ArrayList(source)
                } else {
                    val historicList = ArrayList(source.subList(1, source.size))
                    source = if (source.last().isFabricated) {
                        ArrayList(historicList.onEach { it.isFabricated = false } + historicList.first().copy(key = UUID.randomUUID(), isFabricated = true))
                    } else {
                        ArrayList(historicList + source.first())
                    }
                }
            }
    }

    // 布局完成后启动自动滚动
    LaunchedEffect(isLayoutCompleted) {
        if (!isLayoutCompleted) return@LaunchedEffect
        coroutineScope.launch {
            while (true) {
                lazyListState.autoScroll()
            }
        }
    }
}

解决方案2：确保ComposeView与LazyRow的布局约束正确 #

在XML布局中给ComposeView设置明确的尺寸约束，避免因无约束导致LazyRow无法布局出可见项：

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/carousel_compose_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

关键注意点 #

• 禁止在LaunchedEffect(Unit)中直接依赖未完成布局的lazyListState，必须通过snapshotFlow监听布局状态变化，确保有可见项后再执行逻辑。
• 自动滚动逻辑需延迟到布局完成后启动，否则会因LazyRow未布局而无法滚动到正确位置。
• 原代码中viewportEndOffset + viewportStartOffset的计算逻辑错误，正确应为viewportEndOffset - viewportStartOffset，这会直接导致数据源尺寸计算偏差，引发轮播异常。

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