前言
又有好久没更新原创文章了，因为换工作的起因，年后这2个月，很少有工夫来写文章，都在温习和筹备面试，也拿到了几个不错的offer。当初新工作尘埃落定，趁这几天的闲暇工夫，把拖更的文章补起来。去年年终总结的时候，给本人往年定的几个学习和写文章的方向是Kotlin、Jetpack、和Compose。因为3月Jetpack Compose beta版的正式公布，加上Google官网的4周挑战游戏，为Compose带来了不少热度。我也是始终十分看好Jetpack Compose的，当初的确也是学习Jetpack Compose 的一个好时机，因而，明天就率先开启-Jetpack Compose系列。
Jetpack Compose 是什么?
Jetpack Compose是Google推出的一个新的UI工具包，旨在帮忙开发者更快、更轻松地在Android 平台上构建Native利用。Jetpack compose是一个申明式的UI框架，它提供了现代化的申明式Kotlin API（取代Android 传统的xml布局），可帮忙开发者用更少的代码构建好看、响应迅速的应用程序。
这段官网的形容不是很好了解，其中有一个词：申明式 ，那么什么是申明式？
要搞懂什么是申明式，咱们先看看另一个概念：命令式。这也是咱们Android Native 开发始终应用的形式。如果有这样一个场景：咱们要在界面上显示一个文本，用 **命令式**和申明式实现有和区别？
命令式形式：
- 1、首先须要一个xml文件，外面有一个TextView
... <TextView android:id="@+id/my_text" android:layout_width="wrap_content" android:layout_height="wrap_content"/>- 2、通过
findViewById获取到TextView控件
TextView textView = findViewById<TextView>(R.id.my_text);- 3、通过
setText()更新数据，显示到界面
textView.setText(content)申明式形式：
而如果用Compose的申明式的形式，如何实现？很简略，一步到位：
@Composablefun ShowText(content: String){ Text(text = content)}为什么第一种形式是命令式，第二种形式是申明式？次要体现在界面更新上，命令式下：数据更新时，Java代码手动调用xml组件援用来更新界面，也就是Java代码命令xml界面更新，这就是命令形式。而申明式呢？只形容界面，当数据状态更新时，自动更新界面，这就是申明式。
简短总结：
- 命令式是操作界面
- 申明式是形容界面
除了Jetpack Compose ，Flutter，React-Native，Swift-UI 都是申明式的，这也是当初的一种趋势。
Jetpack Compose 开发环境筹备
工欲善其事，必先利其器，Android Studio对Jetpack Compose 有很好的反对，为了更好的体验，咱们下载最新的Android Studio 预览版 Canary版本，最新版为Arctic Fox(2020.3.1) Canary 14，下载地址为：https://developer.android.com...
下载之后，间接装置即可，如果是Mac版本的话，下载完，解压就能够间接应用。个别的话，倡议小伙伴们装2个版本的Android Studio，一个是预览版，用来摸索和尝试一些新技术和新性能，一个稳定版，用来日常的开发。反正我是这样的。
Android Studio 筹备好之后，咱们就能够开始Jetpack Compose 我的项目创立了。
首先点击 Projects -> New Project 导航到模板抉择界面，这个界面多了一个Empty Compose Activity 模板，就抉择这个，它会默认帮咱们配置好Jetpack Compose 须要的一些配置和库。
点击Next，配置项目名称、报名、保留门路等配置，
点击Finish 就好了。一个最简略Jetpack Compose Hello World利用就进去了。
这种创立新我的项目的形式最简略，因为只须要抉择Jetpack Compose 模板，其余的已帮咱们主动配置。Jetpack Compose 是反对和已有的老我的项目混合的，你只有增加对Jetpack Compose的反对，就能2种混合开发。次要是在两个build.gradle中增加配置：
根目录build.gralde中：
确保 Kotlin 的版本是 1.4.30 或更高版本：
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.32" app目录下的gradle 配置：
有如下几项须要配置：
android { // 1、确保最低sdk版本为21或者更高 defaultConfig { ... minSdkVersion 21 } buildFeatures { // 2、开启 jetpack compose 反对 compose true } ... // 3、设置java 和 kotlin 编译器版本为java8 compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget = "1.8" } // 4、增加kotlin编译器扩大版本 composeOptions { kotlinCompilerExtensionVersion '1.0.0-beta01' }}而后还要增加jetpack Compose 开发相干的一些依赖库：
dependencies { implementation 'androidx.compose.ui:ui:1.0.0-beta01' // 工具反对库 implementation 'androidx.compose.ui:ui-tooling:1.0.0-beta01' // Compose根底库，蕴含各种compose组件 (Border, Background, Box, Image, Scroll, shapes, animations, etc.) implementation 'androidx.compose.foundation:foundation:1.0.0-beta01' // Material Design 库 implementation 'androidx.compose.material:material:1.0.0-beta01' // Material design 图标库 implementation 'androidx.compose.material:material-icons-core:1.0.0-beta01' implementation 'androidx.compose.material:material-icons-extended:1.0.0-beta01' // activities 整合库 implementation 'androidx.activity:activity-compose:1.3.0-alpha03' // ViewModels整合库 implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha02' // observables 整合库 implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-beta01' implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-beta01' // UI 测试 androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-beta01'}这些都是可能用到的库，能够选择性增加，那个几个整合库是配合Jetpack中对应的那几个库，如activitys、viewmodel等。
以上就能增加对Jetpack Compose 的反对。
Compose代码及工具介绍
先来看看代码：
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Surface(color = MaterialTheme.colors.background) { Greeting("Android") } } }}@Composablefun Greeting(name: String) { Text(text = "Hello $name!")}@Preview(showBackground = true)@Composablefun DefaultPreview() { Greeting("Android")}其中，setContent()不再是以前的传递一个View或者是layout，而是一个组合函数也就是一个Compose组件，带有@Composable的Kotlin函数就是就是一个Compose组件，个别为了跟一般函数辨别，首字母大写，因而下面的Greeting和DefaultPreview 都是一个Compose组件。
预览工具
咱们以前写xml界面时，左边都有可预览的界面，那么在Compose中，如何预览Compose界面(组件)?只须要在Compose组件上增加@Preview注解即可预览，而后面板左边会呈现预览区域：
预览面板中可增加多个预览，同一个文件的多个预览都会显示在预览面板中，比方咱们再减少一个：
@Preview(showBackground = true)@Composablefun OtherPreview() { Text("大家好！我是西哥！")}成果如下，预览面板中呈现两个预览：
此外，Preview 注解还能增加一些配置参数，比方，预览的大小、色彩、是否显示背景等等。如下所示：
@Preview( showBackground = true, widthDp = 200, heightDp = 420, backgroundColor = 0x1e7d73 ) @Composable fun DefaultPreview() { Greeting("Android") }}预览成果如下：
@Preview 还有其余一些参数可配置，比方分组预览，更改预览名字等等，有趣味的能够试试其余几个参数:
@Repeatableannotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, // TODO(mount): Make this Dp when they are inline classes val widthDp: Int = -1, // TODO(mount): Make this Dp when they are inline classes val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT) 每一个预览视图右上角有2个小按钮：
右边为开启交互模式按钮，左边为公布预览按钮。
交互模式：开启交互模式后，能够像在设施上操作对象一样操作，比方按钮点击，列表滑动，动画执行，输入框输出等。
比方，如下代码，增加一个按钮、一个输入框、一个switch按钮：
@Preview(showBackground = true) @Composable fun DefaultPreview() { var text by remember { mutableStateOf("西哥") } var isChecked by remember { mutableStateOf(false) } Column { Button( onClick = { } ) { Text("点击我") } TextField( value = text, onValueChange = { text = it }, label = { Text("Label") } ) Switch( checked = isChecked, onCheckedChange = { isChecked = it } ) } }预览成果：
交互模式成果：
试了一下，在交互模式中，如同输入框不能输出和分明，不晓得是bug还是没弄对。
公布预览：
公布预览能够将组建公布到设施上查看成果，留神是只公布以后预览的组件，不是整个界面。
总结
以上就是本文的全部内容，本文介绍了Jetpack Compose开发的环境集成和一些工具的应用，当初咱们就能够开始Jetpack Compose之旅了！下一篇文章将从Compose 组件 Text 开始！敬请期待！
我是西哥，欢送关注我的公众号： 「技术最TOP」，干货文章第一工夫送阅！