Android JetPack ComPose 开发之路 —— 集成到现有项目中
ComePose 是 JetPack 推出的 Android 及其他平台的全新 UI 框架，抛弃 Android XML 的编写方式，以声明式方法开发，下面介绍将 Compose 集成到现有项目中。
Compose 官方地址：https://developer.android.com/jetpack/compose/documentation
集成 ComPose 需要的相关版本配置
IDE：Android Studio Arctic Fox 版本，官方地址： developer.android.com/studio ，下载最新的就是。
Gradle：7.0 +
TargetSdk / CompileSdk：31 +
MinSdk：21 +
Kotlin：1.5.31（目前 Compose 最新稳定版本适配的 Kotlin 版本，后续随着 ComPose 的版本增加，Kotlin 版本也会增加）
Compose：1.0.5（目前最新稳定版本），版本地址：developer.android.com/jetpack/and…
需要引用的库下面详细介绍。
集成到现有项目中
升级对应的 Gradle 版本
打开 Project 下的
build.gradle文件配置插件版本：
buildscript { repositories { google() mavenCentral() } dependencies { // Gradle 版本 7.0 + classpath "com.android.tools.build:gradle:7.0.4" // Kotlin 版本（对应 compose 的版本） classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31" } } 复制代码配置 Module 下的 build.gradle 文件
文件最上方引入 Kotlin 插件：
plugins { id 'com.android.application' id 'kotlin-android' id 'kotlin-android-extensions' id 'kotlin-kapt' } 复制代码增加 Compose 支持:
android { buildFeatures { //开启 Compose 支持 compose true } composeOptions { // Compose 是 Kotlin 开发的，需要配置 Kotlin 对应的编译扩展版本 // 1.0.5 也是对应的 Compose 引用库的版本，可以存成一个常量统一调用 kotlinCompilerExtensionVersion '1.0.5' } kotlinOptions { // 构建指定 jvm 版本 jvmTarget = "1.8" } } 复制代码引入 ComPose 库
首先介绍 Compose 的分包，了解后根据项目需求引入对应的库。
结构从下到上排序，最上边是最底层库：
compile：编译器插件
runtime：底层概念模型
ui：ui 相关的基础支持
animation：基于 rutime 和 ui 两层的动画 API 基础支持
foundation：基于 ui 层封装的更实用的组件库比如 Scroll、Box 等
material/ material3：Material2 / 3 的实现
平时开发直接引用 material 库即可，它将包含上面的所有库。
项目中不需要 material 设计，可引用 foundation 库，它将包含基础的 UI 配置。
精简版：
dependencies { // 将 Compose 支持预览，类似 XML 的预览模式，并支持 点击、滑动等 XML 不支持的交互操作 implementation 'androidx.compose.ui:ui-tooling:1.0.5' // Compose 库的主体包，具体在上面介绍 implementation 'androidx.compose.material:material:1.0.5' // 将 Activity 支持 Compose implementation 'androidx.activity:activity-compose:1.4.0' } 复制代码官方版本：
dependencies { // Compose ui 相关的基础支持 implementation 'androidx.compose.ui:ui:1.0.5' // Compose ui 预览 implementation 'androidx.compose.ui:ui-tooling:1.0.5' // Compose 基于 ui 层封装的更实用的组件库比如 Scroll、Box 等 implementation 'androidx.compose.foundation:foundation:1.0.5' // Compose Material Design implementation 'androidx.compose.material:material:1.0.5' // Compose Material design icons implementation 'androidx.compose.material:material-icons-core:1.0.5' implementation 'androidx.compose.material:material-icons-extended:1.0.5' // 将 Activity 支持 Compose implementation 'androidx.activity:activity-compose:1.3.1' // Compose ViewModels 存储数据 implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07' // Compose 其他集成 implementation 'androidx.compose.runtime:runtime-livedata:1.0.5' implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.5' // Compose UI Tests androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.5' } 复制代码测试 Compose 是否配置成功
新建 Activity 重写 onCreate 方法，将 setContentView(R.layout.activity_main) 替换为 setContent{}，Compose 不再写 XML 了。
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { // 对应 XML 的 TextView Text("Hello Compose!") } } } 复制代码运行下项目看看是否可以顺利展示，遇到问题的小伙伴欢迎留言一起解决问题。
Compose 预览
Compose 支持预览需要引入
implementation 'androidx.compose.ui:ui-tooling:1.0.5'库，上方已经引入过。Compose 预览需要带
@Preview注解的函数来预览 View，在代码中输入prev会有提示直接生成预览代码（Android Studio 自带的代码模版）
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setContent { HelloView() } } // @Composable 注解代表一个 Compose View @Composable fun HelloView() { Text("Hello Compose!") } //预览 @Preview @Composable fun ComposePreView() { HelloView() } } 复制代码目前预览还不支持类似 XML 自动更新的功能，需要更新时点击右侧的刷新按钮。
点击左侧的运行按钮可以讲次预览的界面单独运行在手机上，对于大型项目构建耗时是个很方便的功能。
创建新的 Android Compose 项目
Android Studio -> File -> New -> New Project 选择 Compose Activity
作者：Blue0376
链接：https://juejin.cn/post/7050401051647672350
。