共计 5509 个字符，预计需要花费 14 分钟才能阅读完成。
前言
又有好久没更新原创文章了，因为换工作的起因，年后这 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 的申明式的形式，如何实现？很简略，一步到位：
@Composable
fun 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")
}
}
}
}
@Composable
fun Greeting(name: String) {Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {Greeting("Android")
}其中，setContent()不再是以前的传递一个 View 或者是 layout，而是一个 组合函数 也就是一个 Compose 组件，带有 @Composable 的 Kotlin 函数就是就是一个 Compose 组件，个别为了跟一般函数辨别，首字母大写，因而下面的 Greeting 和 DefaultPreview 都是一个 Compose 组件。
预览工具
咱们以前写 xml 界面时，左边都有可预览的界面，那么在 Compose 中，如何预览 Compose 界面 (组件)? 只须要在 Compose 组件上增加@Preview 注解即可预览，而后面板左边会呈现预览区域：
预览面板中可增加多个预览，同一个文件的多个预览都会显示在预览面板中，比方咱们再减少一个：
@Preview(showBackground = true)
@Composable
fun OtherPreview() {Text("大家好！我是西哥！")
}成果如下，预览面板中呈现两个预览：
此外，Preview 注解还能增加一些配置参数，比方，预览的大小、色彩、是否显示背景等等。如下所示：
@Preview(
showBackground = true,
widthDp = 200,
heightDp = 420,
backgroundColor = 0x1e7d73
)
@Composable
fun DefaultPreview() {Greeting("Android")
}
}预览成果如下：
@Preview 还有其余一些参数可配置，比方 分组预览 ， 更改预览名字 等等，有趣味的能够试试其余几个参数:
@Repeatable
annotation 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」，干货文章第一工夫送阅！