Jetpack Compose 初体验

4,216 阅读3分钟

一、缘起

还记得第一次听说Jetpack Compose是在今年9月初在上海举办的Google开发者大会上,当时还拍照想着回家之后查下这是什么新技术,看起来感觉很厉害的样子。

WechatIMG19.jpeg

因为之前我很关注Jetpack的所有组件,当时心想为什么从来没有听过这个组件?

5_46ab5fa76c014987625e58e97e4ea0c7.png

后面查阅资源也确实Google并没有发布出来,甚至那个时候官网都查不到任何资料,更别说有alpha版本了。

就在前几天官网上线了Jetpack Compose的最新动态。没错,我们终于可以当第一批吃螃蟹的人了,冲鸭!!!

二、Jetpack Compose 介绍

在开始使用之前我们先简单看下官网对Jetpack Compose的简单介绍。

Jetpack Compose是一个现代工具包,旨在简化UI开发。它结合了响应式编程模型和Kotlin编程语言的简洁性和易用性。它是完全声明性的,它允许通过调用可组合函数来描述UI。然后,框架在后台进行UI优化,当基础状态发生变化时,该框架会自动为您更新视图层次结构。

Google推出Jetpack Compose其主要还是为了简化开发者的UI开发。Jetpack Compose提供了一系列的函数可以实现以往我们通过layout布局实现的页面。简单看下官网的代码示例:

@Composable
fun NewsStory() {
    val image = +imageResource(R.drawable.header)

    Column(
        crossAxisSize = LayoutSize.Expand,
        modifier=Spacing(16.dp)
        ) {
        Container(expanded = true, height = 180.dp) {
            DrawImage(image)
        }

        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}

运行效果:

WX20191030-111104@2x.png

可以看出实现的代码还是挺简洁的。而且这个写法和函数控件名跟Flutter都及其相似,Column纵向布局命名和属性crossAxisSize都一模一样,果然是一个爹生的🤣。

三、如何体验Jetpack Compose

目前Jetpack Compose只在Android Studio 4.0预览版提供,猜测是因为Jetpack Compose需要编译器生成一些代码配合使用。Android Studio 4.0预览版可以通过官网预览版下载。但是有一个坑需要注意,不知道什么原因网站语音为中文环境,点击下载按钮无响应,尝试了很多次之后都无果。最后偶然发现通过网页的右上角语言切换成English就可以正常下载了,不懂Google这是什么操作。

WX20191030-112435@2x.png

下载完成之后正常打开Android Studio 4.0即可,点击Start a New Android Studio Project,到下图这个页面。默认是选择Empty Activity的,我们需要手动选择Empty Compose Activity,然后就是无脑下一步下一步了,有一点需要注意由于Jetpack Compose不适用于较低的SDK版本,因此请确保minimumSdkVersion至少为21。

WX20191030-113051@2x.png

项目新建完成之后进入需要下载最新的gradle-wrapper,有些老哥可能通过AS下载gradle很慢,可以通过去Gradle下载手动下载到本地,然后参考Android Studio中手动下载gradle配置下就ok了,之后就可以愉快的体验Jetpack Compose了。

45_849e351157ebed0b62df2fd1565f03a1.png

溜了溜了,我继续去探索Jetpack Compose了,老哥们也可以上车了。后续会出一些Demo讲解实际运用。

参考

Jetpack Compose Basics