截屏2021-02-17 17.28.05.png
- [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混合。不然就没有意义了，所以从各个方面和官网描述看，值得上手。
截屏2021-02-17 17.56.35.png
上面是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 原理
网友评论