一、Compose 的优势

Compose 的优势：

Compose 绘制的 UI 与数据有更紧密的绑定关系，通过数据绑定，减少了页面的刷新代码，通常只需要描述界面即可。
Compose 提供了实时预览功能，虽然这个功能目前绘制时间还较长，不过是一个很好的开头，随着以后的优化会越来越好用，未来可期。
Compose 提供了方便的动画库。
Compose 可以很好地支持 Material Design 原则，可以说它的诞生目的之一就是推广 Material Design。Material Design 围绕三大元素构建：Color、Typography、Shape。即：颜色、字体、形状。通过给 Compose 控件设置主题，就可以应用 Material 设计样式。通过设置不同的主题，还可以很容易实现换肤的效果。

二、添加文本元素

最简单的 Compose 页面：

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello world!")
        }
    }
}

运行效果是添加一个文本到页面中：

可以看到，不再是使用以前的 setContentView 函数，而是使用 setContent 函数描述页面。Text() 函数表示一个文本控件，对应以前的 TextView。

三、定义可组合函数

可组合函数表示添加了 @Composable 注解的函数。它表示这个函数代表一个控件。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard("Android") 
        }
    }
}

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

在此例中，我们定义了一个 MessageCard 控件，将显示的内容通过参数的形式传递到控件中。

四、预览控件

通过添加 @Preview 注解，可以直接预览可组合函数，不用安装到设备上。

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}

预览效果如下：

preview

五、布局

Compose 中的控件布局方式是堆叠，也就是后面的控件会与之前的控件重合。类似以前的 FrameLayout 效果。

通过 Column 函数可以使控件纵向布局，通过 Row 函数可以使控件横向布局。类似以前的 LinearLayout 效果。

@Composable
fun MessageCard() {
    Column {
        Text(text = "Hello")
        Text(text = "World")
    }
}

六、添加图片元素

通过 Image 函数添加图片元素，通过 Modifier 为图片添加配置：

@Composable
fun MessageCard() {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.ic_launcher_background),
            contentDescription = "study picture",
            modifier = Modifier
                // Set image size to 40 dp
                .size(40.dp)
                // Clip image to be shaped as a circle
                .clip(CircleShape)
        )

        // Add a horizontal space between the image and the column
        Spacer(modifier = Modifier.width(8.dp))

        Column {
            Text("Hello")
            // Add a vertical space between the author and message texts
            Spacer(modifier = Modifier.height(4.dp))
            Text("World")
        }
    }
}

常见的配置有 padding、size、width、height 等。图片元素可以用 clip 函数配置其裁剪方式，通过 clip(CircleShape) 函数可以将图片裁剪为圆形。

预览如下：

image preview

七、列表

Compose 可以轻松实现列表功能，只需要使用 LazyColumn 或者 LazyRow，就能实现以前 RecyclerView 的效果。

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val messages = mutableListOf<String>().apply {
            repeat(10) {
                add("Hello")
            }
        }
        setContent {
            LazyColumn {
                items(messages) { message ->
                    Text(text = message)
                }
            }
        }
    }
}

LazyColumn 只会显示屏幕上显示的元素，它包含一个 items 子项，接受 List 作为参数，第二个参数是一个 lambda 表达式，系统会为列表中的每个元素执行此 lambda 表达式。运行效果如下：

LazyColumn

列表功能可以说是 Compose 中我最喜欢的功能之一，不需要定义单独的 Adapter，就能轻松实现列表效果。

在我实战 Compose 的过程中，发现 Compose 在代码提示功能上还不够完善，导致写起来较为棘手。希望未来能够把这块优化好，对于初学者，我并不推荐现在就上手 Compose，可以等以后更完善了再学。我现在对 Compose 的学习也仅供写 Demo 娱乐。

Jetpack Compose （一） ——— Compose 简介