Jetpack Compose 2023 年 3 月版的最新动态

作者 / Android 开发者关系工程师 Jolanda Verhoef

我们在 Compose 2023 年 3 月物料清单 (BoM) 中发布了 Jetpack Compose 版本 1.4。Jetpack Compose 是 Android 的现代原生界面工具包，被 Booking.com、Pinterest 和 Airbnb 等应用广泛采用。这个版本包含 Pager 和 Flow Layouts 等新功能，还有一些用来设定文本样式的新方式，比如断字和换行行为等。此外，还改进了修饰符的性能并修复了一些问题。

• Compose 2023 年 3 月物料清单 (BoM)
  https://developer.android.google.cn/jetpack/androidx/releases/compose

• Jetpack Compose
  https://developer.android.google.cn/jetpack/compose

• Airbnb
  https://android-developers.googleblog.com/2022/05/airbnb-uses-jetpack-compose.html

• 应用广泛采用
  https://developer.android.google.cn/jetpack/compose#apps-built-with-compose

借助全新的 Pager 可组合项，轻松滑动浏览内容

现在，Compose 开箱即支持对不同内容进行垂直和水平分页。使用 VerticalPager 或  HorizontalPager 可实现与 View 系统中的 ViewPager 类似的功能。不过，与使用 LazyRow 和 LazyColumn 的好处一样，您无需再创建任何适配器或 fragment！只需在 Pager 中嵌入可组合项即可:

// Display 10 items
HorizontalPager(pageCount = 10) { page ->
    // Your specific page content, as a composable:
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}

• VerticalPager
  http://link.gevents.cn/d8BW6z

• HorizontalPager
  http://link.gevents.cn/njZ4qW

这些可组合项可以替代 Accompanist 库中的实现。如果您已在使用 Accompanist 实现，可以查看迁移指南。如需了解详情，您可以参阅 Pager 文档。

• Accompanist 库
  https://google.github.io/accompanist/pager/

• 迁移指南
  https://google.github.io/accompanist/pager/#migration

• Pager 文档
  https://developer.android.google.cn/jetpack/compose/layouts/pager

借助全新的 "Flow Layouts"，让内容流畅呈现

FlowRow 和 FlowColumn 能让项目高效紧凑地排列在容器中，特别适用于当项目或容器大小不明或动态变化时。在这些容器中，当显示空间不足时，项目能够流动至 FlowRow 中的下一行或 FlowColumn 中的下一列。这些流式布局 (Flow layouts)，也允许使用权重动态调整大小，以在容器中分布不同项目。

• FlowRow
  http://link.gevents.cn/8S3M9B

• FlowColumn
  http://link.gevents.cn/9Tt55f

以下示例是针对一款房地产应用实现了一个过滤器列表:

@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
      )
    }
  }
}

修饰符性能提升

我们延续了在 10 月版中开始的主要内部修饰符重构工作，将多个基础修饰符迁移到全新的 Modifier.Node 架构，其中包括 graphicsLayer、级别较低的焦点修饰符、padding、offset 等。此重构应该会为这些 API 带来性能提升，并且您无需为此更改代码。而这方面的工作仍在继续，随着我们将修饰符从界面模块移出，希望在未来版本中能够获得更多成果。您可以通过下方 Android 开发者峰会的视频，详细了解相关更改背后的原理。

△ Compose 修饰符深入研究

• graphicsLayer
  http://link.gevents.cn/mhrEvy

• padding
  https://developer.android.google.cn/jetpack/compose/modifiers-list#Padding

• offset
  https://developer.android.google.cn/jetpack/compose/modifiers-list#Position

Text 和 TextField 的灵活性更高

在改进了各种性能、稳定了 API 和修复了问题之外，compose-text 1.4 版还支持最新的表情符号版本，包括向后兼容旧版 Android 系统 🎉 🙌。您无需对应用进行任何更改即可获享此支持。如果您使用的是自定义表情符号解决方案，请查看 PlatformTextStyle(emojiSupportMatch)。

• 最新的表情符号版本
  https://developer.android.google.cn/develop/ui/views/text-and-emoji/emoji2

• PlatformTextStyle(emojiSupportMatch)
  http://link.gevents.cn/cmUjQU

此外，我们还解决了使用 TextField 的一个主要痛点。在某些情况下，可滚动的 Column 或 LazyColumn 中的文本字段在获得焦点之后会被屏幕键盘遮挡。我们重新调整了滚动和焦点逻辑的核心元素，并添加了多个关键 API (例如 PinnableContainer) 以修复此问题。

• 主要痛点
  https://issuetracker.google.com/192043120

• 重新调整了滚动和焦点逻辑的核心元素
  https://android-review.googlesource.com/c/platform/frameworks/support/+/2304138

• 添加了多个关键 API
  https://android-review.googlesource.com/c/platform/frameworks/support/+/2304138

• PinnableContainer
  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/layout/PinnableContainer

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

• 使用 TextStyle.drawStyle 绘制轮廓文本:

  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/TextStyle#drawStyle()

• 使用 TextStyle.textMotion 改进文本在动画期间的过渡和易读性:

  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/TextStyle#textMotion()

• 使用 TextStyle.lineBreak 配置换行行为。使用 Heading、Paragraph 或 Simple 等内置语义配置，或使用所需的 Strategy、Strictness 和 WordBreak 值构建您自己的 LineBreak 配置。

• TextStyle.lineBreak
  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/TextStyle#lineBreak()

• Heading
  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/style/LineBreak#Heading()

• Paragraph
  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/style/LineBreak#Paragraph()

• Simple
  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/style/LineBreak#Simple()

• Strategy
  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/style/LineBreak.Strategy

• Strictness
  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/style/LineBreak.Strictness

• WordBreak
  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/style/LineBreak.WordBreak

• 使用 TextStyle.hyphens 添加对断字的支持:

  https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/TextStyle#hyphens()

• 使用 Text 和 TextField 可组合项的 minLines 参数定义最少可见行数。

• Text
  http://link.gevents.cn/8D7rNu

• TextField
  http://link.gevents.cn/BKxshC

• 通过应用 basicMarquee 修饰符使文本移动起来。由于这属于修饰符，因此您还可以将其应用于任意可组合项，以便相应的可组合项能够以类似跑马灯的方式移动！

• basicMarquee
  http://link.gevents.cn/TpAKnE

△ 通过使用 drawStyle API 在轮廓文本上加印形状，实现跑马灯式文本效果。

核心功能的改进和修复

根据开发者的反馈，我们在核心库中提供了一些备受期待的功能并修复了相关问题:

• Test waitUntil 现在接受匹配器 (matcher) 了！您可以使用该 API 在您定义的特定条件下轻松地将测试与界面同步。

  https://android-review.googlesource.com/2136682

• animatedContent 现在可以正确支持中断并返回到之前的状态:
  https://android-review.googlesource.com/2239235
• 无障碍服务的焦点顺序已改进: 在常见情况下 (例如带有顶部栏/底部栏)，现在的顺序更合乎逻辑:

  https://android-review.googlesource.com/2290755

• 如果您提供可选的 onReset lambda，AndroidView 现在可以在 LazyList 中重复使用。这项改进使您可以在 LazyList 中使用非基于 Compose 的复杂 View:

  https://cs.android.com/androidx/platform/frameworks/support/+/9da035cec8b5e8e59ad2aa891097d8069554dfd1

• Color.lerp performance 已改进，现在可以执行零分配: 由于在淡入淡出动画期间会极为频繁地调用该方法，因此这应该能够减少垃圾回收暂停次数，尤其是在旧版 Android 系统上:

  https://android-review.googlesource.com/2355966

• 在常规清理中做了许多其他细微的 API 和问题修复。您可以参阅版本说明，了解详情:

  https://developer.android.google.cn/jetpack/androidx/releases/compose-ui

开始使用！

感谢大家在问题跟踪器向我们提交的所有问题报告和功能请求，这些有助于我们改进 Compose 并打造您所需的 API。欢迎您继续分享反馈，帮助我们改进 Compose！

想了解后续还有哪些新功能？您可以查看最新路线图，了解我们目前正在构思和开发中的功能。非常期待看到您的下一款优质应用！

• 问题跟踪器
  https://issuetracker.google.com/issues/new?component=612128

• 最新路线图
  https://developer.android.google.cn/jetpack/androidx/compose-roadmap

祝大家使用 Compose 创作愉快！也欢迎您持续关注 "Android 开发者" 微信公众号，及时了解更多开发技术和产品更新等资讯动态。

推荐阅读

如页面未加载，请刷新重试

 点击屏末 | 阅读原文 | 即刻前往 Jetpack Compose 路线图了解更多新功能

---