Jetpack Compose 的简单用法_kotlin 如何使用 compose

Jetpack Compose  是什么

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

在开发中，你可以使用声明性的函数构建界面组件。无需修改任何 XML 布局，也不需要使用布局编辑器。相反，只需调用可组合函数来定义所需的元素，Compose 编译器即会完成后面的所有工作。

简单来说就是一种不同于以前 xml 写布局的方法，Jetpack Compose 直接用 代码 写布局，完全换了一种写法，布局思路上没什么变化，但是布局控件的名称和用法上变化挺大。

优势

1. 更少的代码量。只需要使用kotlin而不必再分开编写kotlin与XML，跟踪变得跟容易。
2. 更直观的代码。声明式UI，只需要构筑界面。
3. 加速开发过程。传统View与Compose可以互调用，开发过程可以实时预览布局

劣势

1. Compose与原生View体系混合开发时，包体积增大
2. 性能与传统XML布局相比并没有优势，经过多次迭代，目前与XML性能持平

用 android studio 创建 kotlin 项目，默认使用的就是 Jetpack Compose。

先来简单认识下吧

可组合函数

Jetpack Compose 是围绕可组合函数构建的。这些函数可让您以程序化方式定义应用的界面，只需描述应用界面的外观并提供数据依赖项，而不必关注界面的构建过程（初始化元素、将其附加到父项等）。

如需创建可组合函数，只需将 @Composable 注解添加到函数名称中即可。

setContent 块定义了 activity 的布局，我们会在其中调用可组合函数。可组合函数只能从其他可组合函数调用。Jetpack Compose 使用 Kotlin 编译器插件将这些可组合函数转换为应用的界面元素。

借助 @Preview 注解，可以在 Android Studio 中预览可组合函数，而无需构建应用并将其安装到 Android 设备或模拟器中。该注解必须用于不接受参数的可组合函数。所以这里为了预览 Greeting 函数又另外创建了 GreetingPreview 函数，由该函数使用适当的参数调用 Greeting。如需更新预览，可以点击预览窗口顶部的刷新按钮。

布局

类似 xml 中的 TextView、ImageView 还有 LinearLayout、RelativeLayout 等 view 和 viewGroup，Jetpack Compose 也有一套与之相似的布局

1、文本。

在 xml 中是使用 TextView 来显示，

在 Jetpack Compose 中则是使用 Text 来显示，

 

• xml 中必选设置每个控件的宽高逻辑，哪怕是自动大小，Jetpack Compose 中默认设置的是自动大小，所以这里不用另设置宽高
• xml 如果想要设置一个 textview 一般的用法是在最外层包一个默认的 viewgroup，因为宽高的方法需要从 xmlns 中取，Jetpack Compose 不需要设置最外层，如果你不需要的话，默认最外层类似与xml 的 帧布局 FrameLayout 以布局的左上角开始绘制，多个的话会默认覆盖。

2、排列方式 

重叠显示肯定是不行的，所以就需要去改变排列方式，简单一点的比如：垂直排列和水平排列。

xml 中的垂直排列和水平排列：

 

 Jetpack Compose 中的垂直排列和水平排列：

如果想要实现 xml 中约束布局的效果，需要另外引入依赖包，xml也需要，只不过它现在默认就给你写好了

xml

implementation 'androidx.constraintlayout:constraintlayout:2.1.3'

 Jetpack Compose

implementation('androidx.constraintlayout:constraintlayout-compose:1.0.1')

 同理，适配器、滑动布局、加载刷新框架等等都要换新。。。

3、图片

在 xml 中是使用 ImageView 来显示，

 

 在 Jetpack Compose 中则是使用 Image 来显示，

• Jetpack Compose 的图片支持 jpg、png格式，不支持 studio 自带的那个 webp 格式的图片
• Jetpack Compose 的图片必选设置 contentDescription，这个是无障碍模式的配置，手机开启无障碍模式后点击图片，会播放 contentDescription 设置的内容。xml 中也有，但是不强制配置。

4、间距

在 xml 中是使用 view 来显示，

 在 Jetpack Compose 中则是使用 Spacer 来显示，

Material Design

材料设计：一种由谷歌开发的设计语言，旨在为用户界面提供一致、现代化的外观和感觉。它强调使用纸张和墨水的视觉效果，以及动画和过渡效果，以提高用户体验。

Jetpack Compose 原生提供 Material Design 及其界面元素的实现。您将使用 Material Design 样式改进 MessageCard 可组合项的外观。首先，使用在您的项目中创建的 Material 主题 Theme 和 Surface 来封装 MessageCard 函数。 在 @Preview 和 setContent 函数中都需要执行此操作。这样一来，可组合项即可沿用应用主题中定义的样式，从而在整个应用中确保一致性。

1、使用 Material Design

kotlin项目创建时已经自动生成了默认主题和颜色还有字体配置，可以修改为自己想要的效果。

2、如果想要设置指定宽高或者充满等其他特殊属性，可以通过配置 Modifier 来设置，比如配置布局宽高为充满屏幕，以达到 xml 中的这种效果：

 还有一些需要单独配置，这里就不一一列举了

 

 3、深色主题

Jetpack Compose 默认提供了两种主题，支持自动切换。

可以在预览函数处添加 uiMode = Configuration.UI_MODE_NIGHT_YES 预览夜间模式 

列表

xml 中的列表需要使用 recyclerview 来显示，Jetpack Compose中则需要用 LazyColumn 和 LazyRow 来分别显示垂直列表和水平列表。

LazyColumn 包含一个 items 子项。它接受 List 作为参数。简而言之，系统会针对提供的 List 的每个项调用此 lambda。

其实剩下的还有很多，滑动布局、刷新加载布局、多布局、瀑布流、动画、一系列属性配置等等，内容太多，这里不能一一列举了，总之学习成本目前来看太高，全部学完不是一天两天的事情，所以我就没有再继续深入，这篇文章只是帮助了解这种写法的大概框架，遇到时能简单了解，知道是干什么的，仅此而已，更加详细的还需要另外搜索补充。