Jetpack Compose简易入坑

前言

Jetpack compose即将推出正式版了，作为声明式UI，将会摈弃传统的xml布局的方式，从而避免反射创建View，将会极大提高View的加载效率，这就是趋势，不可对抗，所以学起来吧。

基础

我们先来看个小demo，体验一下Compose声明式UI的写法，下面demo是一个简单的TextView，打印一个Hello World:

@Composable
fun TextViewDemo() {
   Text(
        text = "Hello, world",
        color = Color.White,
        modifier = Modifier
            .background(Color.Red, RoundedCornerShape(8.dp)) // 添加圆角背景
            .padding(8.dp)
            .clickable { // 点击事件
                Log.e(TAG,"click me")
            }
    )
}
复制代码

效果如下:

代码很简单，但是这是一个函数，用Composable修饰，就表示一个UI状态，只需要在MainActivity的onCreate()里面调用setContent()就可以:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { TextViewDemo() }
    }
}
复制代码

这就完事了。

到这里，我们可以了解到:

• 1 Compose是声明式UI，不是传统的命令式UI，不是拿着View去setXXX()，而是用函数去描述一种UI状态。

• 2 Compose采用的是属性细化和行为隔离的思想，比如demo里面，text就是Text直接的属性，而background是modifier的一个属性，因为像图片Image就没有text