Jetpack Compose基础

---

前言

开发工具不断迭代更新，我们也必须与日俱进。以往我们通常是使用xml布局文件进行ui的编写，但这样做的缺陷很多，例如说某一个数据需要在多个视图中呈现，很容易会忘记更新其中的某个视图。如今android开发推荐的UI开发方式是Jetpack Compose，因此本文将compose的相关内容进行了总结。

一、声明式UI VS 命令式UI

本章节参考

1. 命令式UI（Imperative UI）
   命令式更注重于详细的指令和操作，更加复杂、冗长。假如将搭建ui比作设计建筑，命令式UI需要亲自决定每一个家具的尺寸、颜色、位置，并一步一步手动进行建造以及添加家具、装饰等直到完成建造。

2. 声明式UI（Declarative UI）
   声明式注重于ui的最终展现，更加抽象化、简洁、易于理解。假如将搭建ui比作设计建筑，声明式UI使用一套现成的室内设计规范和家具目录，根据这些来选择适当的家具与装饰，只需描述客厅布局、颜色、位置，系统会自动创建完整的客厅。当需要改变布局时，只需修改描述，系统会自动更新。

3. 常见声明式UI
   React: React 是一个用于构建用户界面的 JavaScript 库，它使用 JSX 语法来声明 UI 组件。
   Vue.js: Vue.js 是一个渐进式 JavaScript 框架，它采用声明式的模板语法来构建用户界面。
   Angular: Angular 是一个完整的 JavaScript 框架，它使用模板和指令来声明 UI。
   Flutter: Flutter 是一个跨平台的移动应用，桌面应用以及网页应用的开发框架，使用 Dart 语言来声明 UI，通过自有的渲染引擎绘制用户界面。
   SwiftUI: SwiftUI 是苹果公司推出的用于构建 iOS、iPadOS、watchOS 和 macOS 应用程序的声明式 UI 框架，使用 Swift 语言进行开发。
   Jetpack Compose: Jetpack Compose 是 Android 官方推出的一种用于构建 Android 应用程序的声明式 UI 工具包，使用 Kotlin 语言编写。

二、使用步骤

本章节参考

1. build.gradle中添加：

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion "1.4.2"
    }
}

需要注意：
kotlinCompilerExtensionVersion 与 Kotlin 版本控制相关联。请参阅兼容性对应图，选择与项目的 Kotlin 版本匹配的库版本。

2. 依赖添加：

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2023.01.00')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.6.1'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

三、基础

1. 编程思想转变：

原先每个widget是以对象的形式提供的，这导致每个widget都需要实例化，因此xml布局文件会比较冗长。
在Compose声明式ui中，widget不以对象形式提供，而是调用不同参数的可组合函数来更新界面。

Compose以函数的的形式设计组件，我们可以以任何的顺序对它们进行排序，并且这些函数是可以并行运行的，因此我们需要注意线程安全问题，附带效应需要在主线程（界面线程）中进行。

2. 预览与测试

Compose可以实现实时预览，但是每次都需要build才能预览。

需要在函数的上方加上以下注解才可实现预览。

@Preview

此外，还可以模拟点击效果以及动画的预览，还可以在设备上单独运行这个布局。
Preview还可以设置一些参数，具体如何做请看：Compose中的预览