Jetpack Compose 入门学习

一、前言：

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。

由于 Compose 基于 Kotlin 构建，因此可以与 Java 编程语言完全互操作，并且可以直接访问所有 Android 和 Jetpack API。它与现有的 UI 工具包也是完全兼容的，因此你可以混合原来的 View 和现在新的View。学过Flutter的就会发现，Compose的写法跟Flutter的写法如出一辙。

二、使用：

1、创建Compse项目

2、gradle配置

在app下的build.gradle的Android块中添加，

    buildFeatures {
        compose true
    }

4、并引入Compose的相关引用，compose_version为1.5.0

buildscript {
    ext {
        compose_ui_version = '1.5.0'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.3.1' apply false
    id 'com.android.library' version '7.3.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.9.0' apply false
}

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.example.mycomposedemo'
    compileSdk 34

    defaultConfig {
        applicationId "com.example.mycomposedemo"
        minSdk 21
        targetSdk 34
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        //3、Compose的版本更改为1.5.0
        kotlinCompilerExtensionVersion '1.5.0'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {
    //compose 核心依赖
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation 'androidx.activity:activity-compose:1.3.1'
    implementation 'androidx.compose.material:material:1.1.1'
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"

}

另外 google 提供了非常多的compose 库,具体查看可以到developer.android.google.cn/jetpack/and…查看。

5、Composable 组合函数

• 1.Compose函数不同于普通的函数，它需要使用大写字母开头，和普通函数做区分。
• 2.Compose函数需要使用@Composable注解修饰，表示这是一个可组合函数。
• 3.@Composable 注解。所有与Compose有关的函数都必须添加这个注解，这个注解让Compose编译器把数据转换成UI。

@Composable
fun UIUse() {

}

6、Preview函数

• @Preview表示该函数可以在Android Studio中预览。
• @Preview注解。实现UI的预览功能，甚至可以做简单的交互。例如在预览对象中点击元素、模拟用户输入，甚至还可以播放动画。

@Preview
@Composable
fun UIUse() {

}

注意：@Preview的交互模式目前在AS北极狐版本上默认是关闭状态，所以你需要在设置中打开。

7、初识组件

Compose 内部的组件非常少,但是合理的搭配可以做到比安卓原生更好的开发体验。大体如下:

分类	Compose	原生
文本	Text	TextView
文本	TextField	Edittext
图片	Icon	ImageView
图片	Image	ImageView
Button	Button	Button
Button	IconButton	Button
Button	IconToggleButton	CheckBox,Switch
Button	Switch	Switch
Button	RadioButton	RadioButton
Button	Checkbox	CheckBox
布局	Box	FrameLayout
布局	Column	LinearLayout
布局	Row	LinearLayout
布局	Scaffold	无
布局	Constraintlayout	Constraintlayout
列表	LazyColumn	RecyclerView,ListView
列表	LazyRow	RecyclerView,ListView
间距类	Spacer	Space(估计很多人都没用过)