Android开发实战班 - 现代 UI 开发之 Jetpack Compose 基础

Jetpack Compose 是 Android 官方推出的现代声明式 UI 工具包，旨在简化 Android UI 的开发过程。与传统的基于 XML 的 UI 开发方式不同，Jetpack Compose 使用 Kotlin 编写 UI 组件，代码更简洁、可读性更高，并且更易于维护和测试。本章节将介绍 Jetpack Compose 的基础知识、基本组件、布局、状态管理以及常见 UI 组件的使用，帮助学员快速上手 Jetpack Compose 并应用于实际开发中。

6.1 Jetpack Compose 简介

• Jetpack Compose 的历史与发展：

  • Jetpack Compose 由 Google 于 2019 年发布，旨在为 Android 开发提供现代化的声明式 UI 框架。
  • Jetpack Compose 1.0 于 2021 年正式发布，目前已成为 Android UI 开发的推荐方式。

• Jetpack Compose 的优势：

  • 声明式编程: 使用声明式编程范式，代码更简洁、可读性更高。
  • Kotlin 原生支持: 完全使用 Kotlin 编写，与 Kotlin 语言特性无缝集成。
  • 简化 UI 开发: 减少了样板代码，开发者可以更专注于 UI 逻辑。
  • 实时预览: 支持实时预览功能，开发者可以即时查看 UI 效果。
  • 强大的社区支持: Jetpack Compose 拥有丰富的文档、教程和社区资源。

6.2 Jetpack Compose 环境搭建

• 添加 Jetpack Compose 依赖：

  • 在 build.gradle 文件中添加 Jetpack Compose 依赖。

    android {
           
           
        ...
        buildFeatures {
           
           
            compose true
        }
        composeOptions {
           
           
            kotlinCompilerExtensionVersion '1.4.3'
        }
    }
    
    dependencies {
           
           
        implementation "androidx.compose.ui:ui:1.4.3"
        implementation "androidx.compose.material:material:1.4.3"
        implementation "androidx.compose.ui:ui-tooling-preview:1.4.3"
        implementation "androidx.compose.ui:ui-tooling:1.4.3"
        implementation "androidx.compose.ui:ui-test-junit4:1.4.3"
        debugImplementation "androidx.compose.ui:ui-tooling-preview:1.4.3"
    }
    

• 启用 Jetpack Compose：

  • 在 build.gradle 文件中启用 Jetpack Compose 插件。

    plugins {
           
           
        id 'com.android.application'
        id 'kotlin-android'
        id 'kotlin-android-extensions'
    }
    

• 配置主题：

  • Jetpack Compose 使用 Material Design 主题，可以在 Theme.kt 文件中配置主题。

    import androidx.compose.material.MaterialTheme
    import androidx.compose.material.lightColors
    import androidx.compose.runtime.Composable
    
    val LightThemeColors = lightColors(
        primary = Color(0xFF6200EE),
        onPrimary = Color.White,
        secondary = Color(0xFF03DAC5),
        onSecondary =