Jetpack Compose 上新：Pager、跑马灯、FlowLayout-灵析社区

江江说技术

2023年3月底，Google 正式发布 Jetpack Compose 的 1.4 版本，它是 Android 的现代原生 UI 工具包。此版本包括新功能，如 Pager 和 Flow Layouts，以及文本样式的新方式，例如连字号和换行行为。它还提高了修饰符的性能并修复了许多错误。

Pager 支持

在 1.4 版本之前，使用 Pager 需要借助 accompanis 库。如今，Pager 终于被纳入了 Jetpack Compose 基础库中中。它可实现与 View 中的 ViewPager 类似的功能。在 API 设计上，Pager 类似于 LazyColumn，使用起来非常简洁

 // 显示 10 个项目
 HorizontalPager(pageCount = 10) { page ->
     // 每一页的内容，比如显示个文本
     Text(
         text = "Page: $page",
         modifier = Modifier.fillMaxWidth()
     )
 }

总的来说，新的 Pager 基本继承了原先 Accompanist 的 API，只是个别参数有点改变（比如 count -> pageCount）。而对于 Indicator（指示器），仍然可以直接用 accompanist/pager-indicators，最新版已经对 Jetpack Compose 1.4 的 Pager 做了适配。

比如下面这个简易的带 Tab 指示器的横向 Pager 例子：

 @Composable
 fun HorizontalPagerWithIndicator() {
     val pagerState = rememberPagerState()
 ​
     TabRow(
         // Our selected tab is our current page
         selectedTabIndex = pagerState.currentPage,
         // Override the indicator, using the provided pagerTabIndicatorOffset modifier
         indicator = { tabPositions ->
             TabRowDefaults.Indicator(
                 Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
             )
         }
     ) {
         // Add tabs for all of our pages
         pages.forEachIndexed { index, title ->
             Tab(
                 text = { Text(title) },
                 selected = pagerState.currentPage == index,
                 onClick = { /* TODO */ },
             )
         }
     }
 ​
     HorizontalPager(
         pageCount = pages.size,
         state = pagerState,
     ) { page ->
         Text(
             text = "Page $page",
             style = MaterialTheme.typography.h5,
             modifier = Modifier
                 .fillMaxSize()
                 .wrapContentSize(Alignment.Center),
             textAlign = TextAlign.Center,
         )
     }
 }

效果如下：


要查看更多的 Pager 例子，或者想把 Accompanist 实现迁移到新版，请查看迁移指南。更多内容，请参阅Pager 的文档。

Flow Layout

Flow Layout 包括 FlowRow 和 FlowColumn ，当一行（或一列）放不下里面的内容时，会自动换行。这些流式布局还允许使用权重进行动态调整大小，以将项目分配到容器中。

以下是一个实现房地产应用程序过滤器列表的示例：


 @Composable
 fun Filters() {
   val filters = listOf(
     "Washer/Dryer", "Ramp access", "Garden", "Cats OK", "Dogs OK", "Smoke-free"
   )
   FlowRow(
     horizontalArrangement = Arrangement.spacedBy(8.dp)
   ) {
     filters.forEach { title ->
       var selected by remember { mutableStateOf(false) }
       val leadingIcon: @Composable () -> Unit = { Icon(Icons.Default.Check, null) }
       FilterChip(
         selected,
         onClick = { selected = !selected },
         label = { Text(title) },
         leadingIcon = if (selected) leadingIcon else null
       )
     }
   }
 }

FlowRow 的 content 有 RowScope 接收器，这意味着 RowScope 的一些特有 Modifier 也可以在这里使用，比如 weight

修复 Modifier 中的性能问题

我们在 10 月份版本中开始了一个重大的内部 Modifier 重构工作，将多个基础 Modifier 迁移到新的 Modifier.Node 架构中。这包括 graphicsLayer、更低层级的焦点修改器、padding、offset 等等。这个重构应该会带来这些 API 的性能改进，并且您不需要更改代码即可获得这些好处。这项工作仍在继续，我们预计在未来的发布中将 Modifiers 迁移到 ui 模块之外，从而获得更多收益。了解更多关于该变化背后原理的信息，请观看ADS演讲 “深入 Compose Modifiers”。

增强 Text 和 TextField 的灵活性

除了各种性能改进、API稳定性和 bug 修复之外，compose-text 1.4 发布还支持最新的emoji版本，包括向后兼容旧版 Android 🎉🙌。支持此功能无需更改应用程序。如果您正在使用自定义emoji解决方案，请查看 PlatformTextStyle(emojiSupportMatch)

另外，我们还解决了使用 TextField 时的主要痛点之一。在某些情况下，在可滚动的 Column 或 LazyColumn 中的文本字段在被聚焦后可能会被屏幕键盘遮挡。我们重新设计了滚动和聚焦逻辑的核心部分，并添加了一些关键 API，如 PinnableContainer 来解决这个问题。

最后，我们为 Text 及其 TextStyle 添加了许多新的自定义选项：

使用轮廓的选框文本，并使用 drawStyle API 在其上标记形状。 |

这张图 webp 压缩的有点问题，可以去文末的代码仓库真实跑一下

核心功能的改进和修复

为了响应开发人员的反馈，我们在核心库中提供了一些特别受欢迎的功能和错误修复：

  • Test waitUntil 现在接受 Matcher！可以使用此 API 轻松地在特定条件下将测试与 UI 同步
  • animatedContent 现在正确支持中断并返回到其以前的状态。
  • 无障碍服务焦点顺序已得到改进：在常见情况下，例如顶部/底部栏，顺序现在更合乎逻辑。
  • 如果你提供了一个可选的 onReset lambda，则 AndroidView 可以在 LazyList 中被重用。此改进允许您在 LazyList 中使用复杂的非 Composable 的 View。（！！！）
  • Color.lerp 性能已得到改进，现在执行零分配：由于此方法在淡入淡出动画期间以高频率调用，因此这应该可以减少垃圾回收暂停的数量，尤其是在较旧的 Android 版本上。
  • 许多其他次要 API 和错误修复作为常规清理的一部分。有关详细信息，请参阅发行说明。

阅读量：854

点赞量：0

收藏量:0