如何优化存在卡顿问题的JetPack Compose HorizontalPager布局

1. 修复冗余资源加载问题 #

你当前代码存在严重的重复资源加载问题：

• SetsAndRepsTrackingControls 中已经加载了加减图标Painter，传入TrackingInput后没有被使用，反而在TrackingInput内部再次调用painterResource重复加载，单张卡片就会产生4次冗余的资源加载操作，直接删除重复加载逻辑，使用传入的Painter参数即可。
• 所有Painter资源加载逻辑如果必须在组件内部完成，需用remember包裹缓存，避免每次重组都重新加载。

2. 开启Compose编译优化 #

在模块级build.gradle中添加以下配置，开启Compose强跳模式和稳定性优化：

android {
    composeOptions {
        kotlinCompilerExtensionVersion = "匹配你的Kotlin版本对应的Compose编译器版本"
        enableStrongSkippingMode = true
    }
    kotlinOptions {
        freeCompilerArgs += listOf(
            "-P",
            "plugin:androidx.compose.compiler.plugins.kotlin:enableStrongSkipping=true"
        )
    }
}

Release构建时务必开启R8混淆，可大幅降低Compose组件重组开销。

3. 优化列表重组性能 #

• 给LazyColumn的items添加固定key，避免列表项变化时全量重组：

  items(6, key = { it }) { item ->
      SetsAndRepsTrackingControls(modifier = Modifier)
  }
  

• 给所有无状态自定义Composable添加@Stable注解，告知Compose编译器该组件参数稳定不会意外重组，比如SetsAndRepsTrackingControls、TrackingInput、ControlsHeader这些纯展示组件都可以添加。

4. 调整HorizontalPager预加载策略 #

给HorizontalPager添加offscreenLimit = 1配置，提前预加载相邻1页的内容，切换页面时就不需要当场完成全页渲染：

HorizontalPager(
    count = 10,
    state = pagerState,
    itemSpacing = 16.dp,
    offscreenLimit = 1
) {
    // 原有逻辑
}

同时删除Pager item内的Log.e打印逻辑，频繁打印日志会严重拖慢渲染性能，即使是Debug版本也建议仅在调试时临时开启。

5. 缓存重复创建的实例 #

所有在重组中频繁创建的实例都用remember缓存，比如：

• RoundedCornerShape、TextStyle、颜色实例等不要每次重组都新建
• 固定的Modifier可以用remember缓存，避免每次重组生成新的Modifier实例

完成以上优化后，单页渲染耗时基本可以控制在16ms以内，切换Pager时的丢帧问题会完全消失。

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