Android JetPack Compose 入门

JetPack Compose 是一个适用于Android的新式声明性界面工具包。
过去几年中，整个行业已开始转向声明性界面模型，该模型大大简化了与构建和更新界面关联的工程设计。
JetPack Compose也会在今年发布正式版，所以对于Android 开发来说，是必须要学的知识点了。

Compose 框架中已经废弃原有的 View 体系中的控件，而是使用 AndroidComposeView （继承 ViewGroup ）、 ViewLayerContainer （继承 ViewGroup ）和 ViewLayer （继承 View ） 控件实现。
所以，这几天进一步了解了下JetPack Compose相关的知识点，在这里做下记录。

创建 JetPack Compose项目

首先，我们要先下载Android Studio Canary版本

然后，新建项目中，选择Empty Compose Activity，就会创建JetPack Compose项目了

创建项目后，我们可以看到MainActivity中的代码是这样的

class MainActivity : ComponentActivity() {
     
    override fun onCreate(savedInstanceState: Bundle?) {
     
        super.onCreate(savedInstanceState)
        setContent {
     
            ComposeTestTheme {
     
                // 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 = true)
@Composable
fun DefaultPreview() {
     
    ComposeTestTheme {
     
        Greeting("Android")
    }
}

其中，@Composable注释，所有组合函数都必须带有此注释，此注释可告知Compose编译器，此函数旨在将数据转化为界面
@Preview为当前要预览的界面
接着，我们运行下程序，效果如下

然后我们使用Material Design风格，添加一个Toolbar

override fun onCreate(savedInstanceState: Bundle?) {
     
    super.onCreate(savedInstanceState)
    setContent {
     
        MaterialTheme() {
     
            TopAppBar(
                title = {
      Text(text = "ComposeTest") },
                backgroundColor = MaterialTheme.colors.primarySurface
            )
        }
    }
}

运行项目，效果如下

接着，我们添加几个Text，这里，需要使用到Column用来使布局竖向排列

常用布局
Column ：使元素按照竖直方向排列
Row ：使元素按照水平方向排列
Stack ：将一个元素放在另一个元素上
使用 ScrollableRow 或 ScrollableColumn 可使 Row 或 Column 内的元素滚动

Column() {
     
    TopAppBar(
        title = {
      Text(text = "ComposeTest") },
        backgroundColor = MaterialTheme.colors.primarySurface
    )
    Text("Hello World!")
    Text("这是一个文本文本文本")
    Text("2021年3月19号")
}  

可以看到显示效果

再添加一个Image图片

Column() {
     
    TopAppBar(
        title = {
      Text(text = "ComposeTest") },
        backgroundColor = MaterialTheme.colors.primarySurface
    )
    Text("Hello World!")
    Text("这是一个文本文本文本")
    Text("2021年3月25号")
    Spacer(Modifier.height(16.dp))
    Image(
        painter = painterResource(id = R.mipmap.pugongy),
        contentDescription = null,
        modifier = Modifier
            .height(180.dp)
            .fillMaxWidth()
            .clip(shape = RoundedCornerShape(4.dp)),
        contentScale = ContentScale.Crop
    )
    Spacer(Modifier.height(16.dp))
}

可以看到效果

我们再添加一个Button，并使用mutableStateOf进行双向绑定

var count by mutableStateOf(0)
 Button(onClick = {
     
     count++
 }) {
     
     Text(text = "Click Me! $count")
 }

运行项目，点击按钮，可以看到，随着count值的变化，按钮文案也在变化