- [compose.animation]
在其Jetpack Compose应用程序中制作动画,以丰富用户体验。
- [compose.compiler]
转换@Composable函数并使用Kotlin编译器插件启用优化。
- [compose.foundation]
编写具有可立即使用的构建基块的Jetpack Compose应用程序,并扩展基础以构建您自己的设计系统。
- [compose.material]
使用可立即使用的Material Design组件构建Jetpack Compose UI。 这是Compose的更高级别的入口点,旨在提供与www.material.io中描述的组件匹配的组件。
- [compose.runtime]
Compose编程模型和状态管理的基本构建模块,以及Compose Compiler插件所针对的核心运行时。
- [compose.ui]
与设备进行交互所需的撰写用户界面的基本组件,包括布局,图形和输入。
Composable functions
用Android Studio创建Compose工程,选择Empty Compose Activity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyDemoTheme {
// 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 = false)
@Composable
fun DefaultPreview() {
MyDemoTheme {
Greeting("Android")
}
}
material a text element
都是基于函数的编程,所以Text对应Text() function.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text("Hello world!")
}
}
}
定义 composable function
可组合函数只能在其他可组合函数的范围内调用。 要使函数可组合,请添加@Composable批注。
Preview your function in Android Studio
添加@Preview标签在@Composable 之前
之前开发使用xml编辑布局类似,我们习惯编写边预览,可以有效率的提高我们编写简单UI的速度。而且在这里可以达到UI 单元测试的目的。目前还不算稳定,个人认为是未来的一个趋势。用过Flutter的UI编程,可感觉到风格十分接近,而且很适合Kotlin的使用和Jetpack混合。不然就没有意义了,所以从各个方面和官网描述看,值得上手。
上面是Preview预览,其实和我们正常写没简单到哪里,但是业务逻辑多,就能看出来封装和测试的遍历和方便,第一个HelloWorld 跑起来就是这样。继续更新,保持前进。
留下几个问题,之后解答
- 为什么不给Text直接设置背景色,而是包在Surface里面
因为Surface是Material Design里面的东西,Surface是一个平面,并赋予了很多性质,比如设置了高度,Surface就会有阴影出现
如果不想用Material Design自己写,如何做?
Compose如何设置点击监听器
Jetpack前面部分基础知识分享:
Jetpack(一)Lifecycle和LiveData
JetPacks之Lifecycles原理
JetPack之 LifeCycle LiveData
Jetpack(三) 之 Room 与 ViewModel
Jetpack 之 ViewModel 原理