unity

Jetpack Compose 更新一览 | 2022 Android 开发者峰会

Ne0inhk

— 14 min read
Jetpack Compose 更新一览 | 2022 Android 开发者峰会
www.zeeklog.com - Jetpack Compose 更新一览 | 2022 Android 开发者峰会

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

去年我们发布了 ，此后一直在进行优化。我们已添加了新的功能并创造出功能更强大的工具，帮助您获得更高效、更直观、更有趣的 Android 界面开发体验。如果您正在开发一款新应用，那现在是时候用 Compose 来编写了！这一激动人心的 Compose 版本现可支持 Material Design 3、新的 BOM (Bill Of Materials)、稳定版 Compose for Wear OS 和 Android TV Alpha 版、，以及更多新功能！

Jetpack Compose

https://developer.android.google.cn/jetpack/compose

稳定版 Compose for Wear OS

https://android-developers.googleblog.com/2022/07/compose-for-wear-os-10-stable.html

社区中的 Compose

去年，我们了解到许多公司在大规模使用 Compose 进行开发，实现了新功能并将编译界面从 View 迁移至 Compose。例如，我们在与 Lyft 的工程师交谈后得知，他们超过 90% 的新功能代码是用 Compose 编写而成，并且改用 Compose 能够更加轻松便捷地维护代码。他们还分享道: "我们使用 Compose 在应用中重新编写了按钮组件。在此之前，编写该组件需要在三个文件外加 17 个不同 XML 文件中编写 800 行代码，而现在减少到只需一个 Kotlin 文件和 300 行代码即可完成。单就 Kotlin 代码而言，工作量就减少了 60%"。Zepeto 团队同样已在多个功能中使用 Compose，并从中受益，因为 "Compose 简化了我们的界面层逻辑，有助于我们更轻松地理解同事所编写的代码"。

△ Jetpack Compose 帮助 Lyft 更加轻松便捷地维护代码 | Android 开发故事

大规模使用 Compose 进行开发

https://developer.android.google.cn/jetpack/compose/adopt#what-developers-are-saying

改用 Compose 使 Lyft 团队能够更加轻松便捷地维护代码

https://android-developers.googleblog.com/2022/10/lyft-reduced-their-code-for-ui-components-using-jetpack-compose.html

有助于 Zepeto 团队更轻松地理解同事所编写的代码

https://android-developers.googleblog.com/2022/10/zepeto-plans-to-migrate-80-percent-of-apps-ui-to-jetpack-compose.html

很高兴看到这些团队能够缩短开发周期，编写更加简洁易读的界面代码。他们并不是个例。在今年的 过后，Google Play 上排名前 1,000 的应用中使用 Compose 的数量增加了 50%！为了帮助您的团队追随 Lyft、Zepeto 和其他团队的脚步，我们发布了关于如何在您的团队中采用 Compose 的指南。该指南为您介绍如何以及从何处着手，并展示了 Compose 能够带来巨大附加价值的开发领域。

如何在您的团队中采用 Compose 的指南

https://developer.android.google.cn/jetpack/compose/adopt/for-large-teams

Jetpack Compose 2022 年 10 月版发布

现在，我们发布了全新的稳定版 Compose，并为您介绍一些激动人心的功能和最新资讯。

首先，根据用户反馈，我们了解到追踪不同工件的版本会让人望而生畏，因为这些工件可能出现在不同的发布时间表中。因此我们现将一同发布 Bill of Materials 功能，即 BOM，包含所有 Compose 工件的稳定版本，让您能够更轻松地使用。

首版 BOM 发布的同时，Compose 2022 年 10 月版也带来了交错网格支持、直接在画布中绘制文本，下拉刷新，同时包含性能改进和问题修复。

Compose BOM

BOM 是一个 Maven 模块，用于声明一组内容库及其版本。这将很大程度上简化您在 Gradle 依赖项部分定义 Compose 内容库版本的方式，尤其是在我们对不同的 Jetpack Compose 内容库采用独立版本的情况下。您不用再单独定义每个版本，这一过程往往繁重且容易在内容库版本出现不同时出错，现在您只需定义一个 BOM 版本，就能够从中提取所有 Compose 内容库版本。每当 Compose 工件有新的稳定版本时，我们就会发布新的 BOM 版本，因此可更轻松地从一个稳定版转移到另一个稳定版。

dependencies {
    // 导入 Compose BOM
    implementation platform('androidx.compose:compose-bom:2022.10.00')


    // 为尚未标明版本的目标 Compose 库声明依赖项
    implementation 'androidx.compose.foundation:foundation'
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'


    ...
}

对不同的 Jetpack Compose 内容库采用独立版本

https://android-developers.googleblog.com/2022/06/independent-versioning-of-Jetpack-Compose-libraries.html

我们已在快速入门指南中增加关于如何添加 Compose BOM 的说明。请注意，您仍可以选择使用硬编码版本来定义您的依赖项。添加 BOM 这一实用方式是为了简化依赖项并让升级变得更加容易。

快速入门指南

https://developer.android.google.cn/jetpack/compose/setup

深入了解修饰符

一直以来，我们都在幕后努力优化 Compose 性能。Compose 2022 年 10 月版本包括对修饰符工作原理的重大重构。尽管您可能不会在 API 中注意到任何更改，但此次重构会为修饰符性能的重大改进铺平道路。您可以通过下方视频详细了解更改背后的基本原理，以及在 ADS 演讲 Compose 修饰符深入研究中规划的内容。

△ Compose 修饰符深入研究 | 2022 Android 开发者峰会

Compose 修饰符深入研究

https://developer.android.google.cn/events/dev-summit/technical-talks

弹出式窗口和对话框高度更改

无障碍功能始终是 Compose 中至关重要的存在，此版本包含一个行为变更，有助于修复采用弹出式窗口和对话框的无障碍功能错误: 弹出式窗口和对话框的最大高度由 30dp 下降到 8dp。只有在使用高度超过 8dp 的自定义对话框或弹出式窗口时，您的应用才会受到影响。您可以参阅版本说明，了解有关变更的更多详情，比如为临时解决方案覆盖新行为的方法 (请注意，对于自定义弹出式窗口和对话框，我们始终推荐高度不超过 8dp)。

版本说明

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

新功能

我们在 Compose 中添加了许多新功能。部分重要内容如下:

  • 使用全新 LazyHorizontalStaggeredGrid 和 LazyVerticalStaggeredGrid 实现交错网格；
  • 使用 DrawScope.drawText 直接在画布中绘制文本；
  • 使用 FontVariation 对象在应用中添加可变字体并更改其属性；
  • 在带注释的字符串中添加 UrlAnnotation 以改进与文本互动的无障碍服务；
  • 使用全新 LineBreak API 在您的文本中添加断字功能；
  • 使用全新 pullRefresh 修饰符下拉刷新；
  • 使用 SnapFlingBehavior 在您的惰性列表中添加贴靠行为；
  • LookAheadLayout 是一种新的布局类型，可以提供关于子项的最终测量与放置信息，帮助您决定中间层布局。

LazyHorizontalStaggeredGrid

http://link.gevents.cn/DYyk4w

LazyVerticalStaggeredGrid

http://link.gevents.cn/GviHF9

FontVariation

https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/font/FontVariation

可变字体

https://fonts.google.com/knowledge/topics/variable_fonts

UrlAnnotation

https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/UrlAnnotation

LineBreak

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

pullRefresh

http://link.gevents.cn/TAA2d2

下拉刷新

https://material.io/design/platform-guidance/android-swipe-to-refresh

SnapFlingBehavior

https://developer.android.google.cn/reference/kotlin/androidx/compose/foundation/gestures/snapping/SnapFlingBehavior

LookAheadLayout

http://link.gevents.cn/ETYAtK

Compose Material 3 稳定版

www.zeeklog.com - Jetpack Compose 更新一览 | 2022 Android 开发者峰会

我们还推出了 Compose Material 3 内容库的第一个稳定版本！您可以使用 Compose 构建应用，并根据  的最新版本 Material Design 3 设置主题。使用 Material Design 3 进一步自定义您应用的颜色、排版和外观，帮助您的品牌脱颖而出！内容库包含许多界面组件的全新和更新版本，例如按钮、卡片、复选框、开关、导航栏、抽屉式导航栏等，并支持其他即将推出的更新。您可以前往官方文档，查看受支持的所有组件列表，也可以在我们近期的推文中了解详情。

Compose Material 3 内容库

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

Material Design 3

https://m3.material.io/

官方文档

https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary#overview

您可以查看我们新的迁移指南，帮助您使用 Material 3，我们在指南中清楚地介绍了如何将 Material 2 概念转化成 Material 3。Android Studio Flamingo 中的默认模板现在会使用 Material 3 来指引您即时正常运行。我们还更新了许多示例应用、教程、模板和 Codelab 以助您轻松使用 Material 3，方便您在实践中学习！

迁移指南

https://developer.android.google.cn/jetpack/compose/themes/material2-material3

新工具

使用 Jetpack Compose 中全新的和已优化的工具可简化应用开发。我们在 Android Studio 中添加了大量新功能，帮助您改进工作流程，提高效率:

最新的稳定版  可以为您带来如下功能:

  • 动画协调
  • MultiPreview 注释
  • 布局检查器中的重组计数

Android Studio Dolphin

https://developer.android.google.cn/studio/releases#new_in_compose

Android Studio Electric Eel 内含 Beta 版功能，如:

  • 实时编辑 (实验性)
  • 突出显示组合渲染效果
  • 配置预览版设备
  • 预览版中的 Live Updates

Android Studio Electric Eel

https://developer.android.google.cn/studio/preview/features#2022.1.1

Android Studio Flamingo 内含 Canary 版功能，比如:

  • 新项目模板默认使用 Compose 和 Material 3
  • 默认开启实时编辑
  • 改进后的组合跟踪，助您更好地检查性能问题。

Android Studio Flamingo

https://developer.android.google.cn/studio/preview/features#2022.2.1

Relay

我们还发布了 Relay 的首个 Alpha 版本，作为设计稿转代码的解决方案，可优化设计者与开发者之间的协作。设计者使用 Figma 插件创建界面组件，开发者则使用 Android Studio 插件将这些组件自动应用到他们的应用中。生成的组件是可组合函数，并可直接被集成到您的 Compose 应用中。您可以查看官方文档，详细了解 Relay。

Relay

https://relay.material.io/

Figma 插件

https://www.figma.com/community/plugin/1041056822461507786

Android Studio 插件

https://plugins.jetbrains.com/plugin/19721-relay-for-android-studio/

官方文档

https://developer.android.google.cn/jetpack/compose/tooling/relay

面向 Wear OS、大屏幕设备和电视的 Compose

我们在 7 月发布了首个稳定版 Compose for Wear OS，可随时在生产环境中使用。推荐您使用 Compose for Wear OS 来为 Wear OS 应用构建界面。我们在其中加入了二十余种专为可穿戴设备设计的 Compose 界面组件，如 TimeTextPositionIndicator，以及 ScalingLazyColumn。

Compose for Wear OS

https://android-developers.googleblog.com/2022/07/compose-for-wear-os-10-stable.html

我们将持续改进，使其更易于为可折叠设备、平板电脑等大屏幕设备和 ChromeOS 设计、开发和测试应用。material3-window-size-class 内容库已升级为稳定版，为您提供了一组可供使用的视口划分点。大屏幕设备设计通常包含交错网格，新增的 LazyHorizontalStaggeredGrid 和 LazyVerticalStaggeredGrid 有助于实现这些网格。

material3-window-size-class

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

LazyHorizontalStaggeredGrid

http://link.gevents.cn/DYyk4w

LazyVerticalStaggeredGrid

http://link.gevents.cn/GviHF9

Android 社区的反馈一直推动我们继续向前。我们根据您的反馈更新了路线图，更加侧重于能够帮助您成功使用 Compose 的领域。现在我们正专注于支持更多案例，包括更多 Material 3 组件，改进平台支持、工具和性能。

路线图

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

全新的和更新后的指南

无论您处于学习旅程的哪个阶段，我们都会为您提供帮助！我们新增和优化了有关 Compose 的许多指南:

  • 如果想要体验实践操作，您可以参阅更新后的面向 Android 开发者的 Compose 课程。这一课程涵盖了多种主题，从基础知识到进阶内容，一应俱全。
  • 如果您更喜欢观看视频，可查看 MAD 技巧: Compose 基础知识系列视频，当然，您也可以观看 Android 开发者峰会中有关 Compose 的所有技术分享内容。
  • 您可以阅读有关图像和图形的扩展文档。
  • 想知道使用哪种动画？答案尽在全新的动画备忘单中！
  • 通过全新的调试重组截屏视频和博文，了解如何发现并修复性能问题。
  • 如果考虑在您的现有应用中采用 Compose，您可以参阅扩展版指南: 在应用中采用 Compose。

面向 Android 开发者的 Compose 课程

https://developer.android.google.cn/courses/jetpack-compose/course

MAD 技巧: Compose 基础知识

https://youtube.com/playlist?list=PLWz5rJ2EKKc-CG9riunK996aI6cRhXFDC

Android 开发者峰会

https://developer.android.google.cn/events/dev-summit/technical-talks#modern-android-development

图像和图形

https://developer.android.google.cn/jetpack/compose/graphics

动画备忘单

https://storage.googleapis.com/android-stories/compose/Compose_Animation_Cheat_Sheet.pdf

截屏视频

https://www.youtube.com/watch?v=SWBN0y0lFNY

调试重组博文

https://medium.com/androiddevelopers/jetpack-compose-debugging-recomposition-bfcf4a6f8d37

在应用中采用 Compose

https://developer.android.google.cn/jetpack/compose/interop

Compose Camp

www.zeeklog.com - Jetpack Compose 更新一览 | 2022 Android 开发者峰会

Compose Camp 是一个由社区组织的全球系列活动，该活动将从九月一直持续到十二月！Compose Camp 同时包含初学者路径和资深者路径，所有水平的开发者均可加入一同学习。活动已在如火如荼地进行中，全球各地的 GDG 和 GDSC 发布了多支视频，社区平台也举办了众多活动。

Compose Camp

https://developer.android.google.cn/compose-camp

如火如荼地进行中

https://twitter.com/search?q=%23ComposeCamp&src=typeahead_click

视频

https://space.bilibili.com/64169458/channel/collectiondetail?sid=735148

祝您拥有愉快的 Compose 使用体验！

希望您和我们一样对这些进展感到兴奋！如果您尚未开始，现在就是学习 ，并帮助您的团队和开发流程从中受益的最佳时机。准备好体验更快的开发速度和更高的工作效率吧。祝您拥有愉快的 Compose 使用体验！也欢迎您持续关注我们，及时了解更多开发技术和产品更新等资讯动态。

Jetpack Compose

https://developer.android.google.cn/jetpack/compose

www.zeeklog.com - Jetpack Compose 更新一览 | 2022 Android 开发者峰会

点击屏末 | 阅读原文 | 即刻了解 Jetpack Compose 更多相关内容

www.zeeklog.com - Jetpack Compose 更新一览 | 2022 Android 开发者峰会
www.zeeklog.com - Jetpack Compose 更新一览 | 2022 Android 开发者峰会
www.zeeklog.com - Jetpack Compose 更新一览 | 2022 Android 开发者峰会

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