一起看 I/O | Jetpack Compose 中的新特性

一起看 I/O | Jetpack Compose 中的新特性
www.zeeklog.com  - 一起看 I/O | Jetpack Compose 中的新特性

正式版已经发布快一年的时间了,我们看到社区正以极大的热情采纳和使用 Compose: Kotlin 语法的简洁性以及使开发界面变得更快速、更简单的声明式开发方式得到了广大开发者们的赞赏。

Compose 在社区中的反响

我们看到  为其应用开发最新、最具创造性的功能。例如,与我们密切合作的 Play 商店团队,通过他们我们了解到,使用 Compose 不仅更有趣,且对他们团队生产力的提高也大有助益。Play 商店团队还告诉我们 “Play 商店的所有新功能都建立在该框架之上,Compose 有助于为应用解锁更快的速度以及更顺畅地发布”。与此同时, 也已经在应用的不同部分使用了 Jetpack Compose 并从中受益,因为 "Compose 让我们更容易定义自己的组件,并使它们的 API 更明确、灵活和直观。"Airbnb 团队同样也采用了 Compose: “Jetpack Compose 是我们技术战略的重要组成部分,生产力因此获得了大幅提高。”

我们很高兴地看到这些团队在大规模和复杂的生产环境中仔细地评估并使用了 Compose,所带来的结果也不仅是让界面开发更清晰有趣,也带来了更多工程上的收益。这只是其中几个案例,因为 Play 商店排名前 1,000 的应用中有超过 100 个正在使用 Compose。

我们在开发过程中始终保持着与这些团队的密切合作,并不断听取广大 Android 社区的反馈,这也是我们推进  的关键。如今,我们专注于提供新的 API 和特性改进以支持您实现更高级的需求,这些改进将和新的工具一起助力您更轻松地使用 Compose 构建应用。Compose 从根本上改变了界面的构建方式,为了帮助您实现必要的思维转变,我们将发布更多关于高级主题的指南、演讲和 Codelab,以及更具深度的视频,以便您编写外观和性能同样出色的应用。以下是 Compose 1.2 Beta 版本的新特性:

Compose 1.2 Beta

我们在今年的 Google I/O 大会上发布了 ,其中包含了许多特性和改进:

文本改进

字体边距

我们在问题跟踪器中定位到了 ,并通过将 includeFontPadding 设置为自定义参数来解决它。我们推荐您将该值设为 false,因为这会使布局中的文本更精确地对齐。我们计划在未来的版本中将 false 设为默认值。如果将值设为 false 导致您的应用出现问题,请在上述错误报告中告知我们。此外,当 includeFontPadding 被设置为 false 时,您可通过设置 lineHeightStyle 参数来调整 Text 可组合项的行高。两个参数结合使用的效果如下:

www.zeeklog.com  - 一起看 I/O | Jetpack Compose 中的新特性

△ 以多行的 Text 可组合项为例:左图为设置 includeFontPadding 为 true (当前默认值) 的效果,右图为设置 includeFontPadding 为 false 且设置了 lineHeightStyle 的效果

Text(
 text = myText,
 style = TextStyle(
   lineHeight = 2.5.em,
   platformStyle = PlatformTextStyle(
     includeFontPadding = false
   ),
   lineHeightStyle = LineHeightStyle(
     alignment = Alignment.Center,
     trim = Trim.None
   )
 )
)

可下载字体

Compose 1.2 还加入了 。您可以使用 Compose 的新 API 来异步访问 Google Fonts,甚至还可以定义备用字体,这些操作无需任何复杂的配置。通过可下载字体,您可以保持较小的 APK 文件体积并改善用户的系统运行状况,因为多个应用可通过提供程序共享相同字体。

文本放大镜

Android 文本提供了放大镜组件,通过放大镜可以更轻松地选择文本。Compose 现已支持文本放大镜。

www.zeeklog.com  - 一起看 I/O | Jetpack Compose 中的新特性

拖动选择图标时会显示放大镜,以便于您查看指尖下方的内容。Compose 1.1.0 已支持在所选择的文本字段中使用放大镜,Compose 1.2.0 在文本字段和  中都支持放大镜。Compose 放大镜也得到了增强以匹配 View 中放大镜的精确行为。

布局功能和改进

惰性布局

惰性布局在不断发展,随着网格 API  和  顺利通过实验性使用阶段,我们新增了一个实验性 API——,它允许开发者实现自定义惰性布局。想要了解这些 API 的更多信息,请观看I/O 大会演讲: 。

与 CoordinatorLayout 互操作

从现在起,当您在 View 系统的 CoordinatorLayout 中嵌套了一个支持滚动的可组合项时,您可以确保它们的滚动行为是可互操作的。这让可折叠工具栏的配置变得更加简单。您可以调用新的实验性 API rememberNestedScrollInteropConnection,并将其调用结果传入 nestedScroll 修饰符来启用该行为,可以查看这个 示例代码了解更多:

窗口边衬区

现已升级到 Compose Foundation 库中,请改为使用  类。如需了解更多,请查阅  技术文档。

窗口大小类

为了更简单地设计、开发以及测试可调整尺寸布局,我们发布了窗口大小类——一组主观的视窗断点。它们现在作为 Material 3 系列库的一部分,在新库  的 alpha 版本中可用。如需了解更多有关窗口大小类的信息,请查阅支持不同屏幕尺寸以及 。

专注于性能

为帮助您了解和提升应用的性能,我们花费了大量精力为您提供新的性能工具和指南。这些内容可以帮助您更轻松地理解应用可能出现卡顿的原因和位置。

从 Android Studio Dolphin 开始,您可以使用 Layout Inspector 检查可组合项发生重组的频率。预期外的大量重组可以为您指明可优化的可组合项。此外,Android Studio Electric Eel 现已包含一个重组高亮指示器,它是一个视觉辅助工具,可以查看哪些可组合项在何时发生重组。更多关于该新工具的信息请查阅博客 。

www.zeeklog.com  - 一起看 I/O | Jetpack Compose 中的新特性

△ Layout Inspector 显示重组计数和重组高亮指示器

Compose 从根本上改变了您编写界面的方式,您可以遵循我们发布的最佳实践来确保应用的高性能。例如,您可以通过该  了解关于如何编写和配置您的 Compose 应用以实现最佳性能的建议。在 I/O 演讲  中,Compose 团队介绍了常见的性能错误以及这些错误的解决方法。

性能是一个需要持续关注的领域,我们正在努力改进并扩展相关工具和指南。同时,我们非常感谢您对我们迄今为止所有工作的反馈。您可以在  中提出您开发中遇到的问题,也可以在  群组中提问。

新工具

除了完善 Compose 之外,我们还增加了新工具来帮助您更高效地使用 Compose。 目前已处于 Beta 阶段,为 Compose 开发带来了非常激动人心的特性。除了重组计数,新工具还包含了能帮助您一次查看和浏览所有动画的 Animation Coordination,以及能帮助您为多个屏幕尺寸构建应用的 MultiPreview 注解。此外为了帮助您快速迭代,Android Studio Electric Eel (Canary 版) 还带来了 LiveEdit 这个新特性。

www.zeeklog.com  - 一起看 I/O | Jetpack Compose 中的新特性

请查阅 I/O 演讲:  以了解所有详细信息,同时我们希望能得到您的反馈,从而塑造更符合您需求的 Compose 工具。

Compose for Wear OS Beta 版发布

如果有什么比 Compose 更出色,那就是更多更全面的 Compose。因此,我们很高兴见证  进入 Beta 阶段。遵循与其他 Jetpack 库相同的原则,Beta 意味着它的功能完整且 API 稳定,您可以开始准备为生产环境构建应用。如需了解更多信息,请查阅 。

更完善的指南

我们增加并修订了关于 Compose 的一系列指南供您参考和学习:

  • 关于在 Compose 中使用状态的  和改版的
  • 关于 Compose 中基础布局的  和改版的
  • 全新的
  • 更新的
  • I/O 演讲视频:  以及
  • 对于新手开发者,可查阅

Happy Composing!

我们期待您能像我们一样为这些新特性感到兴奋,如果您尚未开始,那么现在正是学习  的好时机,了解它如何适配您的团队和开发过程,这样您便能体验到提高效率和开发者生产力所带来的好处。Happy Composing!

欢迎您  向我们提交反馈,或分享您喜欢的内容、发现的问题。您的反馈对我们非常重要,感谢您的支持!

Read more

深入理解 Proxy 和 Object.defineProperty

在JavaScript中,对象是一种核心的数据结构,而对对象的操作也是开发中经常遇到的任务。在这个过程中,我们经常会使用到两个重要的特性:Proxy和Object.defineProperty。这两者都允许我们在对象上进行拦截和自定义操作,但它们在实现方式、应用场景和灵活性等方面存在一些显著的区别。本文将深入比较Proxy和Object.defineProperty,包括它们的基本概念、使用示例以及适用场景,以帮助读者更好地理解和运用这两个特性。 1. Object.defineProperty 1.1 基本概念 Object.defineProperty 是 ECMAScript 5 引入的一个方法,用于直接在对象上定义新属性或修改已有属性。它的基本语法如下: javascript 代码解读复制代码Object.defineProperty(obj, prop, descriptor); 其中,obj是目标对象,prop是要定义或修改的属性名,descriptor是一个描述符对象,用于定义属性的特性。 1.2 使用示例 javascript 代码解读复制代码//

By Ne0inhk

Proxy 和 Object.defineProperty 的区别

Proxy 和 Object.defineProperty 是 JavaScript 中两个不同的特性,它们的作用也不完全相同。 Object.defineProperty 允许你在一个对象上定义一个新属性或者修改一个已有属性。通过这个方法你可以精确地定义属性的特征,比如它是否可写、可枚举、可配置等。该方法的使用场景通常是需要在一个对象上创建一个属性,然后控制这个属性的行为。 Proxy 也可以用来代理一个对象,但是相比于 Object.defineProperty,它提供了更加强大的功能。使用 Proxy 可以截获并重定义对象的基本操作,比如访问属性、赋值、函数调用等等。在这些操作被执行之前,可以通过拦截器函数对这些操作进行拦截和修改。因此,通过 Proxy,你可以完全重写一个对象的默认行为。该方法的使用场景通常是需要对一个对象的行为进行定制化,或者需要在对象上添加额外的功能。 对比 以下是 Proxy 和 Object.defineProperty 的一些区别对比: 方面ProxyObject.defineProperty语法使用 new Proxy(target,

By Ne0inhk