Jetpack Compose入门详解

Jetpack Compose入门详解

• 前言（Compose是什么）
• 一、优势与缺点
• 二、前四课
• 三、标准布局组件
• • 1.Column
  • 2.Row
  • 3.Box
• 总结

---

前言（Compose是什么）

提示：需要对原生xml布局有一定了解，另外它最好是配合Kotlin 使用更佳

借用官方的解释：Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。

---

一、优势与缺点

它和安卓传统xml布局相比，又拥有以下几点优势

• 更少的代码

  编写更少的代码会影响到所有开发阶段：作为代码撰写者，需要测试和调试的代码会更少，出现 bug 的可能性也更小，您就可以专注于解决手头的问题；作为审核人员或维护人员，您需要阅读、理解、审核和维护的代码就更少。
  与使用 Android View 系统（按钮、列表或动画）相比，Compose 可让您使用更少的代码实现更多的功能。无论您需要构建什么内容，现在需要编写的代码都更少了。

• 直观
  Compose 使用声明性 API，这意味着您只需描述界面，Compose 会负责完成其余工作。这类 API 十分直观 - 易于探索和使用：“我们的主题层更加直观，也更加清晰。我们能够在单个 Kotlin 文件中完成之前需要在多个 XML 文件中完成的任务，这些 XML 文件负责通过多个分层主题叠加层定义和分配属性。”(Twitter)

• 加速开发
  Compose 与您所有的现有代码兼容：您可以从 View 调用 Compose 代码，也可以从 Compose 调用 View。大多数常用库（如 Navigation、ViewModel 和 Kotlin 协程）都适用于 Compose，因此您可以随时随地开始采用。“我们集成 Compose 的初衷是实现互 *** 作性，我们发现这件事情已经‘水到渠成’。我们不必考虑浅色模式和深色模式等问题，整个体验无比顺畅。”

• 功能强大
  利用 Compose，您可以凭借对 Android 平台 API 的直接访问和对于 Material Design、深色主题、动画等的内置支持，创建精美的应用：“Compose 不仅解决了声明性界面的问题，还改进了无障碍功能 API、布局等各种内容。将设想变为现实所需的步骤更少了”；您可以轻松快速地通过动画让应用变得生动有趣：“在 Compose 中添加动画效果非常简单，没有理由不去为颜色/大小/高度变化添加动画效果”(Monzo)，“不需要任何特殊的工具就能制作动画，这与显示静态屏幕没有什么不同”(Square)。

上面都是官方文档的官话，下面是我自己的归纳，上面提到的优点我就不赘述

优点

他是一套全新的声明式UI，完全不同于传统所有组件继承于臃肿庞大的view，而是基于更底层的canvas，简单来说，就是它的性能要比安卓原生的xml布局要好，比如xml的多重布局嵌套导致的一些问题，相信安卓开发对复杂页面嵌套优化都头疼过，只要你使用Compose，就不会遇到这样的问题

缺点

目前还是一个新的东西，大部分公司都还没有将Compose 纳入到项目当中，一些将Compose 融入到项目中的细节还没有敲定，例如：如何优雅的将viewmodel与Compose 绑定用于显示UI；一些技术点还待开发人员熟悉

说的好听支持java，但是大家也就图一乐，现在安卓官方主推的是什么语言大家心里都有数

二、前四课

安卓官方文档推出了Jetpack Compose的四课内容，带我们从开始到构建一个简单的聊天屏幕，如果你拥有安卓xml布局和Kotlin 的基础，那么这将非常的简单
安卓官方Jetpack Compose 教程

成果类似下图：

该屏幕显示包含图片和文字的可展开的动画消息列表，使用 Material Design 原则设计，添加了深色主题，具有预览功能，所有内容只需不到 100 行代码！

以下是您目前为止所学的内容：

• 定义可组合函数
• 在可组合项中添加不同的元素
• 使用布局可组合项构建界面组件
• 使用修饰符扩展可组合项
• 创建高效列表
• 跟踪状态以及修改状态
• 在可组合项上添加用户互动
• 在展开消息时显示动画效果

三、标准布局组件

在许多情况下，我们只需使用 Compose 的标准布局元素即可。

1.Column

使用 Column 可将多个项垂直地放置在屏幕上。

@Composable
fun ArtistCard() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

我们会得到如下布局

2.Row

同样，使用 Row 可将多个项水平地放置在屏幕上。Column 和 Row 都支持配置它们所含元素的对齐方式。

@Composable
fun ArtistCard(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(/*这里是你的图片*/)
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}

得到如下布局

3.Box

使用 Box 可将元素放在其他元素上。Box 还支持为其包含的元素配置特定的对齐方式。

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(/*这里是头像*/)
        Icon(/*这里是角标*/)
    }
}

得到如下布局

通常，您只需要这些构建块。您可以自行编写可组合函数，将这些布局组合成更精美的布局，让其适合您的应用。

---

总结

本篇文章只介绍了Compose最基础的使用，这只是它的冰山一角，后续博主自己学习后会更新Compose的其他相关文章。

参考资料
安卓Compose官方文档