Android Jetpack Compose TV：如何实现TvLazyColumn内组件重叠

要实现item2向上重叠在item1之上，核心是给item2添加负的垂直偏移，同时确保item2的层级高于item1。TvLazyColumn的每个item默认按顺序排列，单纯用spaceBy只会调整间距无法重叠，而zIndex需要作用在item的根布局上才生效，之前的尝试大概率是没找对正确的应用位置。

具体实现步骤： #

• 给item1的根布局设置固定高度（比如视频Banner的高度），方便计算偏移量
• 给item2的根布局添加Modifier.offset(y = -XX.dp)，XX为你想要的重叠高度
• 给item2的根布局添加Modifier.zIndex(1f)，确保它在item1之上（默认zIndex为0，值越大层级越高）
• 给item2的顶部预留足够内边距，避免内容被自身偏移遮挡

代码示例： #

TvLazyColumn {
    item {
        // item1: Banner视频容器，设置固定高度
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(240.dp)
        ) {
            // 放置视频播放组件
        }
    }
    item {
        // item2: 要重叠的Row数据容器
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .zIndex(1f) // 确保层级高于item1
                .offset(y = -60.dp) // 向上偏移60dp，重叠在item1底部
                .padding(top = 60.dp) // 预留顶部内边距，避免内容被遮挡
        ) {
            // 放置Row数据组件，比如TvLazyRow
            TvLazyRow {
                // 子项内容
            }
        }
    }
    item {
        // item3: 后续Row数据，正常排列即可
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp) // 可选：调整和item2的间距
        ) {
            TvLazyRow {
                // 子项内容
            }
        }
    }
}

注意事项： #

• 如果item1高度是动态的（比如视频自适应），可通过onSizeChanged获取实际高度，再动态计算偏移量
• 避免偏移量过大导致item1核心内容被完全遮挡，影响用户体验
• TV端开发中要确保焦点导航不受重叠影响，可通过Modifier.focusable()和焦点管理逻辑调整焦点顺序

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