Jetpack Compose 设置开发环境(3)

Jetpack Compose 设置开发环境(3)

引用

CSDN

1.

https://blog.csdn.net/qq_36154755/article/details/142292194

导读大纲

• 1.1 创建 Android Studio 项目
• 1.2 添加 Jetpack Compose 依赖项
• 1.2.1 如何添加依赖项
• 1.3 在项目中启用Compose

1.1 创建 Android Studio 项目

在 Android Studio 中创建一个专门用于 Jetpack Compose 开发的新项目：

1. 打开 Android Studio

• 如果看到欢迎界面,点击"Start a new Android Studio project"
• 如果已经打开一个项目,请转到 “File”->“New”->“New Project”

2. 选择一个项目模板

• 在 "New Project"对话框中,将看到一个项目模板列表
• 选择"Empty Activity"模板
• 该模板为 Jetpack Compose 项目提供一个基本结构
• 包括必要的依赖关系和一个简单的可组合函数,供您开始使用

3. 配置项目设置

• 名称: 给项目起一个有意义的名称(如 “MyComposeApp”).
• 软件包名称: 为应用程序选择一个唯一的软件包名称
• 例如,“com.yourcompany.mycomposeapp”
• 保存位置: 选择保存项目文件的目录
• 语言
• 推荐使用Kotlin DSLJetpack Compose 基于 Kotlin 构建
• 使用 Kotlin 可以让您充分利用其功能和集成优势
• 最低 SDK: 选择 API 21: Android 5.0 (Lollipop)或更高版本
• 这是使用 Jetpack Compose 所需的最低安卓版本

4. 单击"Finish"

• Android Studio 将为您创建新项目并设置基本结构
• "Empty Compose Activity"模板是Jetpack Compose 项目的绝佳起点
• 基本依赖项
• 自动添加必要的 Jetpack Compose 依赖项到项目的build.gradle文件
• MainActivity
• 提供一个基本的 MainActivity 类,作为应用程序的入口点
• 它包含 setContent 块,您将在该块中定义可组合函数以构建UI
• 默认可组合函数
• 有一个简单的"Hello World"可组合函数作为示例,帮助你开始学习

1.2 添加 Jetpack Compose 依赖项

要在 Android Studio 项目中利用 Jetpack Compose 的强大功能,需要包含必要的依赖项。这些依赖项为构建声明式UI提供核心Compose库、工具和基础组件。

仅仅是出于演示目的才这么管理依赖版本, 实际项目会使用Gradle版本目录来管理依赖版本

• <1> androidx.compose.ui:ui
• 核心 Compose 库, 提供基本的可合成元素、布局和修改器
• <2> androidx.compose.ui:ui-tooling-preview
• 为 Android Studio 中的 Compose 预览提供工具支持
• <3> androidx.compose.ui:ui-tooling
• 为调试和检查 Compose UIs 提供工具支持
• <4> androidx.compose.foundation:foundation
• 为常用用户界面元素提供额外的可组合元素和构建块
• <5> androidx.compose.material:material
• 在 Compose 中实现 Material Design 组件和样式设计
• <6> androidx.compose.material:material-icons-core[extended]
• 在 Compose UI 中使用 Material Design 图标
• <7> androidx.activity:activity-compose
• 整合 Compose 和传统 Android 活动
• <8> androidx.lifecycle:lifecycle-viewmodel-compose
• 整合 Compose 和来自Android Architecture Components的ViewModel组件
• <9> androidx.compose.runtime:runtime-livedata[rxjava2]
• 整合 Compose 和用于数据流的 LiveData 和 RxJava2 可观测库

// Jetpack Compose UI                                             // <1>
implementation("androidx.compose.ui:ui:1.5.4")                   
// Tooling support (Previews, etc.)                               // <2>
implementation("androidx.compose.ui:ui-tooling-preview:1.5.4")   
debugImplementation("androidx.compose.ui:ui-tooling:1.5.4")       // <3>
// Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
implementation("androidx.compose.foundation:foundation:1.5.4")   // <4>
// Material Design                              
implementation("androidx.compose.material:material:1.5.4")       // <5> 
// Material design icons                                         // <6>
implementation("androidx.compose.material:material-icons-core:1.5.4")
implementation("androidx.compose.material:material-icons-extended:1.5.4")
// Integration with activities                                  // <7>
implementation("androidx.activity:activity-compose:1.8.2")
// Integration with ViewModels                                  // <8>
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2")
// Integration with observables                                 // <9>
implementation("androidx.compose.runtime:runtime-livedata:1.5.4")
implementation("androidx.compose.runtime:runtime-rxjava2:1.5.4")

1.2.1 如何添加依赖项

这里使用的是 Gradle 版本目录的方式来维护依赖和插件

1. 打开 build.gradle(Module :app)

• 在 Android Studio 项目中导航到 build.gradle.kts 文件.

2. 添加依赖项

• 在build.gradle.kts文件的dependencies块中,添加上面列出的 Compose 依赖项

3. 同步项目

• 点击工具栏上的"Sync Project with Gradle Files"按钮(大象图标)
• 下载并将依赖项整合到项目中

1.3 在项目中启用Compose

添加 Jetpack Compose 依赖项后,需要在项目的Gradle配置中明确启用Compose。这一步会激活 Compose compiler 插件,它负责将 Composable 函数转换为高效的 UI 代码。

在 Android Studio 中导航到项目的 build.gradle.kts(Module :app) 文件

在 build.gradle 文件的 android 块中,找到 buildFeatures 块（如果还没有,请添加）

<1> 在 buildFeatures 块中,将 compose 选项设置为 true

android {
    namespace = "ricky.wbj.mycomposeapp"
    compileSdk = 34
    // ...
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
    buildFeatures {
        compose = true                                    // <1>
    }
    // ...
}