Jetpack Compose中等距图片网格的自由滚动实现与优化问询

问题背景 #

现有Jetpack Compose实现的等距图片网格支持二维滚动，代码如下：

val scrollStateHorizontal = rememberScrollState()
val scrollStateVertical = rememberScrollState()

Box(
    modifier = Modifier
        .horizontalScroll(scrollStateHorizontal)
        .verticalScroll(scrollStateVertical)
) {
    for (i in 0..8) {
        for (j in 0..7) {
            val start = (j % 2 * 0.5 + j) * width
            val top = i * height * 0.5
            Image(modifier = Modifier.padding(start = start.dp, top = top.dp), painter = ...)                
        }
    }
}

存在两个疑问：

1. 是否可以实现对角线方向的自由滚动？
2. 如何优化该实现的内存消耗等性能问题？是否应使用LazyHorizontalGrid、LazyVerticalGrid、LazyColumn或LazyRow？

当前观察：LazyHorizontalGrid无法直接添加Modifier.verticalScroll实现滚动，且初始滚动前几秒存在卡顿（疑似缓存项导致），而Box嵌套滚动从一开始就很流畅。

问题解答 #

1. 对角线自由滚动实现 #

可以实现对角线方向的自由滚动，核心是通过自定义滚动逻辑关联水平和垂直偏移量，让触摸滑动同步驱动两个方向的位移。

具体实现思路：

• 用scrollable修饰符结合自定义状态，统一管理x、y轴的滚动偏移
• 根据触摸方向计算对角线偏移比例（比如固定1:1或自定义角度），将触摸位移转换为双向偏移
• 基于计算出的偏移量动态调整网格中图片的位置

简化示例代码：

val offset = remember { mutableStateOf(Offset.Zero) }
val scrollState = rememberScrollableState { delta ->
    // 这里设置1:1的对角线偏移比例，可根据需求调整
    offset.value += Offset(delta, delta)
    delta
}

Box(modifier = Modifier.scrollable(scrollState, Orientation.Vertical)) {
    for (i in 0..8) {
        for (j in 0..7) {
            val start = (j % 2 * 0.5 + j) * width + offset.value.x
            val top = i * height * 0.5 + offset.value.y
            Image(
                modifier = Modifier.padding(start = start.dp, top = top.dp),
                painter = ...,
                contentDescription = null
            )                
        }
    }
}

2. 性能优化与懒加载组件选择 #

两种方案的本质差异

• Box嵌套滚动：一次性渲染所有网格元素，初始流畅但大规模数据下内存占用极高，所有Image会常驻内存
• Lazy系列组件：仅渲染可见区域内的元素，内存占用低，但初始需要计算可见项、创建缓存项，存在短暂开销

优化方案选择

• 小规模网格（如当前9*8=72个元素）：保留Box方案即可，内存压力小且流畅性更优
• 大规模网格：必须用懒加载组件，但不能直接嵌套滚动修饰符（懒加载组件自身已实现滚动逻辑），推荐两种实现方式：
  1. LazyColumn+水平滚动：将每一行作为LazyColumn的一个item，行内渲染所有图片并保留水平滚动逻辑，兼顾懒加载和实现复杂度：

     val scrollStateHorizontal = rememberScrollState()
     val scrollStateVertical = rememberLazyListState()
     
     LazyColumn(
         state = scrollStateVertical,
         modifier = Modifier.horizontalScroll(scrollStateHorizontal)
     ) {
         items(9) { i ->
             Row {
                 repeat(8) { j ->
                     val start = (j % 2 * 0.5 + j) * width
                     val top = i * height * 0.5
                     Image(
                         modifier = Modifier.padding(start = start.dp, top = top.dp),
                         painter = ...,
                         contentDescription = null
                     )
                 }
             }
         }
     }
     

  2. 自定义LazyLayout：通过LazyLayout实现完全自定义的等距网格懒加载，灵活性最高但实现复杂度大，适合对布局有极致定制需求的场景

额外性能优化点

• 用rememberPainter缓存图片加载器，避免重复创建
• 压缩图片尺寸，使用适配当前布局的分辨率加载
• 使用Coil/Glide的Compose异步图片组件（如AsyncImage），避免图片加载阻塞UI线程

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