【保姆级教学】Jetpack Compose 开篇 之 HelloWorld（现在还有不懂Jetpack的移动开发吗？） 进阶学习 Jetpack Compose从入门到精通 最后

Jetpack 是一套库、工具和指南，可帮助开发者更轻松地编写优质应用，接下来我将持续分享 Jetpack 系列文章。和大家一起共同探讨Jetpack的学习。
原文地址：https://blog.csdn.net/huangliniqng/article/details/109959466

前言

现在无论走到哪儿，如果Android开发者说自己不了解Jetpack，怕是会被人”鄙视“的看一眼。此前我更新过Jetpack Architecture系列的文章，如果你还不了解Jetpack，可以移步至我的主页。

从即日起，我将开始持续更新Jetpack Compose系列的文章，Compose将会是原生开发的下一个重大改变！

Jetpack Compose是什么

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它基于声明性编程模型，因此您只需描述界面的外观，Compose 会负责完成其余工作，界面会随着应用状态的变化而自动更新。

上述是官方的描述，简单的说，在此之前，我们如何实现一个功能？我们是在Activity中编写Java/Kotlin的代码，在xml中编写布局代码，这种方式是我们已经使用了很久的方式，而Jetpack Compose完全抛弃了之前的方式，新创造了一种“使用代码”编写页面的方式，而这种方式，有一个好听的名字，叫做声明式UI。

Flutter VS Jetpack Compose

说到声明式UI，你肯定想到了最近“热火朝天”的 Flutter技术，号称跨各种平台，和Android比优势****，很多人不仅喜欢将Flutter和Jetpack Compose相比，更喜欢和Android相比，并得出了一些结论，那些结论我不去评判对错，我也没有资格去评判，但是如果你问我，一个Android开发者 Flutter、Jetpack Compose或者Android 我该怎么选，我觉得这两种东西根本没有任何可比较性，因为根本就不是一个东西，对于个人选择可以分下面两种情况考虑：

1、公司无跨平台业务需求

如果你的公司无跨平台业务需求，除了跳槽到有Flutter需求的公司，学习Flutter的意义并不大，你可能会反驳说，技多不压身，我不赞同但我也不反驳，但你要知道的是公司是以业务为导向的，你会的再多，所谓一身才华无处施展便也无济于事。

2、公司新增跨平台业务需求

如果你的公司新增了跨平台的业务需求，需要你不得不去学习Flutter，这个时候你要知道的是，从Android转到了Flutter相当于转行，如果你看好公司的发展并打算长久战斗，你就可以去学习并且用在公司业务中，如果你不看好公司的发展或者不想转行，那么只有删库跑路了~

而Compose是Google近两年的大动作之一，如果你想坚持在Android开发的道路上，那么学习或了解Compose定是必不可少的，只是或早或晚的问题。

Jetpack Compose HelloWorld

新建项目

使用Compose我们需要下载Android studio4.2的最新预览版本，我们可以直接新建一个Compose项目，也可以在已有项目中添加配置，这里我们来直接新建一个项目

我们选择新建一个空的Compose Activity项目，依次输入项目位置、填写包名即可。

我们先来运行一下生成项目的默认效果，效果如下图所示：

项目配置

新建成功后，我们首先来看一下build.gradle中几个比较特殊的配置，这也是我们在已经项目中添加Compose所需要配置的

defaultConfig {
        minSdkVersion 21
    }
 
    buildFeatures {
        // 开启compose
        compose true
    }
    
   //设置编译版本为1.8
   compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
 
    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }
 
    composeOptions {
        kotlinCompilerVersion '1.4.0'
        kotlinCompilerExtensionVersion '1.0.0-alpha05'
    }
}
 
//compose 工具包
dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-alpha05'
    implementation 'androidx.ui:ui-tooling:1.0.0-alpha05'
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha05'
    implementation 'androidx.compose.material:material:1.0.0-alpha05'
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha05'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha05'
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha05'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha05'
    androidTestImplementation 'androidx.ui:ui-test:1.0.0-alpha05'
}

这里我们使用的compose版本为05版本，compose支持的最低版本是Api 21，所以我们设置最低版本为21.

MainActivity代码

接下来我们来看MainActivity默认生成的代码

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ConposeSimpleTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}
 
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
 
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ConposeSimpleTheme {
        Greeting("Android")
    }
}

在compose中，所有的组合函数 都要使用@Composable注解 ，conposable注释可告知 Compose 编译器，此函数需要转化为页面显示，并且和协程中suspend函数一样，只能在compose注解函数中调用另外一个compose注解函数，@Preview注解是方便开发者在不运行的前提下可预览效果，也就是说DefaultPreview这个函数是开发者自己用的，onCreate中setContent包含的是页面的内容，主题这里我们先忽略，后面再讲解。

Greeting这个函数中，接收一个string类型的name参数，并显示在Text上，这里要注意的是 这里的Text组件和原生的TextView并没有关系，同样的方法我们自定来定义一个HelloWorld，代码如下所示：

setContent {
    Greeting("Android")
    HelloWorld()
}

@Composable
fun HelloWorld() {
    Text(text = "Hello World!")
}

运行结果如下所示：

这里两个Text重叠了，显然不是我们想要的结果，那么如果我们想让文字垂直或者水平排列改如何去做呢。

垂直或水平布局

垂直排列 我们可以使用Column布局将组合函数包裹起来，修改setContent的代码如下所示：

setContent {
    Column {
        Greeting("Android")
        HelloWorld()
    }
}

运行结果如下图所示：

水平排列，我们只需要将Column修改为Row即可，代码如下所示：

setContent {
    Row {
        Greeting("Android")
        HelloWorld()
    }
}

运行结果如下所示：

由此我们的Compose HelloWorld就完成了~

进阶学习

Jetpack Compose从入门到精通

接下来，我将会给大家介绍一份2021年最新整理出来的《Jetpack Compose 完全开发手册》，手把手教大家Jetpack Compose从入门到精通。

这份资料旨在给希望了解、学习、应用Android Jetpack Compose的小伙伴一个参考资料。

有需要的朋友可以看下方代码块，找我免费领取。

//wechat number:
study5233

资料详情

第一章 初识 Jetpack Compose
1.1 为什么我们需要一个新的UI 工具？
1.2 Jetpack Compose的着重点
1.3 API 设计
1.4 Compose API 的原则
1.5 深入了解Compose
1.6 插槽API

第二章 Jetpack Compose构建Android UI
2.1Android Jetpack Compose 最全上手指南
2.2 深入详解 Jetpack Compose | 优化 UI 构建
2.3 深入详解 Jetpack Compose | 实现原理

第三章 Jetpack Compose 项目实战演练（附Demo）
3.1 Jetpack Compose应用1
3.2 Jetpack Compose应用2
3.3 Jetpack Compose应用做一个倒计时器
3.4 用Jetpack Compose写一个玩安卓App
3.5 用Compose Android 写一个天气应用
3.6 用Compose快速打造一个“电影App”

有需要的朋友可以【点击此处】或者通过下方代码块找我免费领取。

//wechat number:
study5233

最后

希望这份资料给想要了解、学习、应用Android Jetpack Compose的小伙伴一个参考资料。