Android • Jetpack Compose - PhoenixNest's Blog

引言

本篇将介绍我最近在对 Android 项目进行开发时，使用 Jetpack Compose Ui 组件库 的一些笔记分享。

Google Android Developer 中对 Jetpack Compose 的介绍：

Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI
development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

引入 Jetpack Compose Ui 库

本章节参考链接：Quick start

为项目开启 Compose Feature

在 app 目录下的 build.gradle 文件中添加：

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = kotlin_compiler_version
    }
}

主流的引入 Jetpack Compose 有两种方式，分别是：

修改 build.gradle 并引入特定版本的 Groovy 脚本或 ktx 脚本
使用 BoM 动态引入统一版本的 Compose 库

通过 Groovy 引入 ( ktx 同理 )

在 app 目录下的 build.gradle 文件中添加：

implementation "androidxcomposeui:ui:$compose_ui_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
implementation "androidx.activity:activity-compose:$compose_activity_version"

androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"

通过 BoM 引入

Google Android Delevoper 中对于 BoM 的定义：

The Compose Bill of Materials (BOM) lets you manage all of your Compose library versions by specifying only the BOM’s version. The BOM itself has links to the stable versions of the different Compose libraries, in such a way that they work well together. When using the BOM in your app, you don’t need to add any version to the Compose library dependencies themselves. When you update the BOM version, all the libraries that you’re using are automatically updated to their new versions.

在 app 目录下的 build.gradle 文件中添加：

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2022.12.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.5.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'

}

使用 Compose

对于从 Flutter 开发转到 Compose 的开发者来说，Compose 的写法与 Flutter 如出一辙。

即：使用不断组合的 Widget 组成 Page，将每一个页面拆分成若干个小组件，通过类似搭积木的方式，组装成一个完整的页面。

在 Compose 中，我们还是通过 Activity 的 onCreate 方法加载 App 的入口页面，只需将原本的 setContentView() 方法改为用于加载 Compose 的 setContent() 即可。

setContent {
    MyApplicationTheme {
        Scaffold(
          bottomBar = { MyBottomNavigationBar() }
        ) { padding ->
            // A surface container using the 'background' color from the theme
            Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                HomePage()
            }
        }
    }
}