截屏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 跑起来就是这样。继续更新，保持前进。

留下几个问题，之后解答

1. 为什么不给Text直接设置背景色，而是包在Surface里面

因为Surface是Material Design里面的东西，Surface是一个平面，并赋予了很多性质，比如设置了高度，Surface就会有阴影出现

2. 如果不想用Material Design自己写，如何做？

3. Compose如何设置点击监听器

Jetpack前面部分基础知识分享：

Jetpack(一)Lifecycle和LiveData
JetPacks之Lifecycles原理
JetPack之 LifeCycle LiveData

Jetpack(二)之DataBinding

Jetpack(三) 之 Room 与 ViewModel
Jetpack 之 ViewModel 原理

Jetpack (四) 之 Navigation
Jetpack Navigation 原理浅析

JetPack （五）之 Paging 分页库

Jetpack(六) 之 WorkManager
Jetpack WorkManager 原理