Jetpack Compose 基础环境安装和应用

环境搭建

开发工具

由于 Jetpack Compose 目前还没有出正式版，所以要想开发体验，需要下载 最新 Canary 版的 Android Studio 预览版。

创建新项目

打开最新 Canary 版的 Android studio 预览版，创建一个新项目，你会发现创建新项目模板有一个 Empty Compose Activity 的模板，选择它创建一个项目就可以体验 Jetpack Compose 了。

在创建 Jetpack Compose 你会发现 _minimumSdkVersion _最小只能选择 API level 21 ，也就是 Jetpack Compose 支持的最小版本。

项目创建好了，先不着急开发，先看看配置，是如何让项目支持 Jetpack Compose 开发的，以便以后我们把 Jetpack Compose 添加到以前的项目中去。

1. Jetpack Compose 是基于kotlin语言开发的框架，那么你的项目至少要确保支持 kotlin，如果你的项目还不支持，请查看官网教程 将 Kotlin 添加到现有应用 自行配置。( ???? 啥，都2021年了 项目还不支持 kotlin ???? )。
2. 打开项目的 app/build.gradle 文件，关于 Jetpack Compose 的相关配置如下

android {
    defaultConfig {
        ...
        // Jetpack Compose 最小支持版本 21 
        minSdkVersion 21
    }

    buildFeatures {
        // 此 module 启动 Jetpack Compose
        compose true
    }
    ...

    //kotlin 相关参数配置
    kotlinOptions {
        jvmTarget = "1.8"
        // 0️⃣ 启用新的 jvm IR 
        useIR = true
    }

    // Jetpack compose 相关参数配置
    composeOptions {
        //kotlin 额外编译版本 和Jetpack Compose 版本一致
        kotlinCompilerExtensionVersion compose_version
        //kotlin编译版本，要1.4及以上
        kotlinCompilerVersion kotlin_version
    }
}


dependencies {
   	...
    // Jetpack compose 相关依赖
    // 基础组件
    implementation "androidx.compose.ui:ui:$compose_version"
    // Material Design 组件相关实现
    implementation "androidx.compose.material:material:$compose_version"
    // ui相关工具，比如视图预览
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
}

关于 0️⃣ 配置处参考 kotlin 1.4 新特性 | 新的 JVM IR backend 。
本文 Jetpack compose 版本compose_version = ‘1.0.0-alpha09’ , kotlin 版本 kotlin_version=‘1.4.21’
⚠️ 由于 Jetpack compose 没有推出正式版，api 可能会有变化，本文后期尽量跟进最新api，如果没有来得及更新，发现下文中部分 api 不可以用了请多多包涵，或留言告知本人多谢 ???? 。

看看 Jetpack Compose 长啥样

打开 MainActivity.kt 文件，如果编译顺利的话，你应该看到类似下面的样子

① 刷新视图，当代码发生变化是，点击它可以刷新视图
②进行交互模式，比如视图上有个按钮，就可以不用运行直接点击并作出对应的响应。
③ 和 ④可以把当前视图直接部署到设备上看效果，这个还是挺方便的。
更多关于布局预览工具的使用，可以查看官网上关于此内容的介绍 https://developer.android.google.cn/jetpack/compose/preview

仔细看上图，你会发现 Text() 是过时的，此处建议替换成 androidx.compose.material.Text 。在没有稳定版本，经常 api用着用着过时、改名、或者直接被删掉都是很正常的 ???? 。

在 Jetpack Compose 作为构建原生界面的工具包，我们还是用 Activity/Fragment 来加载视图，在以前 XML 布局模式下，Activity 关联视图使用 setContentView() 函数。在 Jetpack Compose 中加载关联视图使用 setContent 函数，如下所示

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //添加一个 Jetpack Compose 视图
             Greeting("Android")
        }
   }

可组合 (Composable) 函数

在以前 View 视图模式下，我们编写视图都是在 XML 文件中去书写，在 Jetpack Compose 中我们都用被加上 @Composable 注解的 kotlin 函数来构建界面，如下代码所示

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

1. 可组合函数的函数名一般首字母大写，以便和普通函数区分。
2. 可组合函数只能在其他可组合函数中调用，这一点有点类似协程 suspend 函数。
3. 虽然函数用 @Composable 注解，但 Jetpack Compose 并不是一个注入处理器。Compose 在 Kotlin 编译器的类型检测与代码生成阶段依赖 Kotlin 编译器插件工作。此说法来自 深入详解 Jetpack Compose | 实现原理 这篇文章中，感兴趣可以去看一看。

学习第一个组件Text

上面创建的 Jetpack Compose 项目实例中就用到 Text 这个组件，在 Jetpack Compose 所有的组件都是 可以组合函数，所以Text 也不例外，源码如下

@Composable
fun Text(
    text: String,//显示的内容
    modifier: Modifier = Modifier, // 关于布局的设置
    color: Color = Color.Unspecified,// 文字颜色
    fontSize: TextUnit = TextUnit.Unspecified,//文字大小
    fontStyle: FontStyle? = null, //文字风格
    fontWeight: FontWeight? = null,//文字粗细
    fontFamily: FontFamily? = null, //字体风格
    letterSpacing: TextUnit = TextUnit.Unspecified,//字间距
    textDecoration: TextDecoration? = null,//文字装饰、比如下划线
    textAlign: TextAlign? = null,//对齐方式
    lineHeight: TextUnit = TextUnit.Unspecified,//行高
    overflow: TextOverflow = TextOverflow.Clip,// 文字显示不完的处理方式
    softWrap: Boolean = true,// 文本是否应在换行符处中断,对中文没啥用
    maxLines: Int = Int.MAX_VALUE,//最大行数
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = AmbientTextStyle.current
) {
	……
}

我们需要设置个性化 Text 组件，只要传入对应的参数就行了，和 XML 添加对应属性差不多。

比如把文字改成蓝色

@Composable
fun TestText(){
    Text(text = "Hello Android",color= Color.Blue)
}

想看效果 就在setContent调用此函数，或者在预览函数中调用

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //将视图添加到Acitivity
            TestText()
        }
    }   
}


  @Preview(showBackground = true)
  @Composable
  fun DefaultPreview() {
     TestText()
  } 

预览效果

再学一个 Button 组件

@Composable
fun Button(
    onClick: () -> Unit,// 按钮的点击事件
    modifier: Modifier = Modifier,
    enabled: Boolean = true, //是否启用
    interactionState: InteractionState = remember { InteractionState() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),//海拔
    shape: Shape = MaterialTheme.shapes.small,//形状
    border: BorderStroke? = null,//边框
    colors: ButtonColors = ButtonDefaults.buttonColors(),//颜色
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,//内边距
    content: @Composable RowScope.() -> Unit //内容
) { …… }

这个 Button 组件点击事件 onClick 和内容 content 是必填参数外，好像没有设置 Button 文字的参数。这和我们以前在 XML 构建视图不太一样。那么我们怎么让 Button 显示文字呢？ 我们在content 添加一个Text组件就可以了。

@Composable
fun TestButton() {
    Button(onClick = { }) {
        Text(text = "button")
    }
}

最后一个参数 content 是函数类型，为了让这个函数体里面能调用可组合函数 所以在这个参数还加个 @Composable 表示是一个可以组合函数类型，所以 Button 的 content 的函数体中可以调用其它可组合函数。

如果我们让Button显示图片，那么我们就把 Text 换成 Image 就行了。Jetpack Compose 给我提供了简单Button、Text、Image 组件(组合函数) 通过我们不同的组合方式就创造了一些新的组件。

动态改变Text的文本内容

@Composable
fun TestButton() {
    //声明一个可变状态值
    val  text =mutableStateOf("button")
    Button(onClick = { text.value = "我被点击了" /*改变值*/}) {
        Text(text = text.value/*使用值*/)
    }
}

我们声明一个声明一个可变状态值text，让 Text 的内容设置为 text.value 当我们点击按钮的时候，text.value 的值被改变 Jetpack Compose 就会帮我们重新渲染用到 text.value 的地方。

Jetpack Compose 的灵活性

Jetpack Compose 都是用 kotlin 函数，那么就可以用 kotlin 语法来构建界面了

@Composable
fun TestForView() {
    val names = listOf("knight", "Tom", "Jack","kk")
    Column {
        names.forEach { Text(text = it) }
    }
}

Column 是一种布局方式，让子级垂直顺序排列，这些子级我们现在直接用循环语法就可以了

预览效果

当然，如果条目多的话这样写就不合适了，我们可以把 Column 替换成 LazyColumn , LazyColumn 只会加载当前显示的条目和 RecyclerView 类似。它的用法也很简单，如下

    val names = listOf("knight", "Tom", "Jack", "kk")
    LazyColumn {
        items(names) { Text(text = it) }
    }

总结

本文叙述了如何搭建 Jetpack Compose 环境及工程，简单了解了一下 Jetpack Compose 是什么样子，学习了两个组件 Text 和 Button 。也看到了 Jetpack Compose 在 kotlin 的加持下 如此的灵活。Jetpack Compose 作为 Android 新的界面工具包，功能还是挺丰富的。本文只能说和 Jetpack Compose 的初探，混个脸熟，关于什么是声明式？、布局如何构建、界面状态和数据如何处理等等，等以后我们在慢慢探讨。

相关资料

本文配套的 Codelabs

Android 官方 Codelabs | Jetpack Compose basics

Android 官方网站 | Jetpack Compose 相关文档

本文地址：https://blog.csdn.net/knight1996/article/details/112594481