Compose学习（1）-入门篇

前言

常年混迹于各种开发群，现在的Android开发简直卷的不行，到处都是在讨论framework开发，车载相关的内容，作为一个应用层的cv工程师，硬啃系统底层代码还是相当的吃力，只有继续在应用层深耕，刚把kotlin啃掉，应用在项目中，还在体会kotlin的真香，这边Android官方又在推Compose，一种全新的写UI界面的方式,网上一搜,什么响应式布局,什么移动端大趋势,什么跨平台,整个人都懵了,这一天应用层咋这么卷,jetpack才学完,现在又要学Compose，没办法，该卷的要卷，该学的再痛苦也得学

跳过网上一堆的对于响应式布局的介绍，如果用过databinding的MVVM架构的方式，就有过在XML布局中通过通过属性绑定值，实现了当值变化时界面自动响应新的值变化从而实现界面的UI的刷新，省去了诸如findviewbyid以及对该控件的各种set操作，这种能自动感应值的变化进行刷新UI的方式，就是响应式的UI方式。

第一步：新建项目

从0开始，那么就使用AndroidStudio新建一个空白的项目，通过发现目录结构，发现默认项目引入的compose_version还是“1.1.0-beta01”版本，通过查看官网上的的依赖介绍，发现compose跟androidx一样，将不同的宫内组进行了分包，总共分为了7个组

compose依赖组.png

由于独立更新，所以不同的组的版本号可能不一样

compose依赖版本.png

那么开发的时候怎么选择依赖哪些包，看了下新建的默认工程

dependencies {
   implementation "androidx.compose.ui:ui:$compose_version"
   implementation "androidx.compose.material:material:$compose_version"
}

只发现了对于compose.ui以及compose.material组的依赖，并没有发现runtime和foundation的依赖，通过查阅资料发现，不同的分组里面是有相互的依赖关系存在

compose:runtime 最下层的是runtime组，提供了compose运行的相关基础支持，包括有状态的监听通知等

compose:ui 这一层提供了界面绘制的基础能力，包括测量、布局和绘制的实现

compose:animation 在UI的绘制的基础支持上,提供了动画相关的实现和api

compose:foundation 对于控件的基本实现，包括了不同类型组件，比如文字的基础测量规则等

compose:material 在foundation的基础上，提供了符合material的风格的控件支持

compose:material3 跟上面的material类型，就是更新的控件风格

从runtime->ui->animation->上层的风格控件，foundation就依赖了下层的基础支持，如果不使用material的风格，直接依赖foundation就行了，在各自basic的控件上进行自己的自定义样式开发，material3跟material选一个就行，他们两个类似平行的两个分支版本

上面的依赖没有提到compose:compiler，这个是编译期间起作用的，会配合kotlin的语法特性对我们写的各种compose函数进行解析编译

第二步：调整依赖版本

接下就可以把默认的版本调整为最新的版本如下

调整依赖版本.png

根据官网的最新稳定版，将compose的compiler的版本调整为1.4.3，并且将ui组合material组的版本也调整一下

第三步：让项目可以编译跑起来

由于使用了最新的版本，会遇到构建错误，根据错误进行调整

sdk版本不匹配.png

需要将compileSdk的版本调整为33，接下来又遇到了说compose版本跟kotlin版本不匹配的问题

版本不匹配问题.jpeg

通过去官网查看，需要编译的compose版本跟kotlin匹配

compose跟kotlin版本匹配.png

然后在project的build.gradle中将kotlin的编译插件版本改为1.8.10

kotlin版本对应.png

第四步：成功运行默认工程

经过这一番折腾，工程终于跑起来了，看到了熟悉的默认工程

hello.png

第六步：顺带看一下Compose的示例工程

项目跑起来了，回头去看MainActivity的代码，初步了解一下

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           ComposeLearnTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
              ) {
                   Greeting("Android")
              }
          }
      }
  }
}

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   ComposeLearnTheme {
       Greeting("Android")
  }
}

可以看到跟传统的xml方式，相同的都是在Activity的Oncreate()方法中进行操作，不一样的是，调用的方法不一样，之前是通过setContentView(@layoutId)方法传入一个xml的布局id，而compose中使用的是kotlin中的高阶函数进行操作，一层一层的包裹关系

示例代码中，虽然界面只显示了Hello Android！的文字，但是在compose层面，是由多层嵌套关系

ComposeLearnTheme
  |__Surface()
        |__Greeting()
                 |__Text()

我们所说的composeUI控件其实是一个一个的compose函数，而嵌套关系的形成是通过kotlin的高级函数特性，可以把一个函数类型当成参数进行传递

那具体的类似Text()控件该怎么设置参数，除了Text()控件还有哪些其他的控件，在传统模式中由View和ViewGroup的概念，Compose中该怎么提现，这些问题在后面的文章中会进行展开分析，那么从这一篇文章开始，开始进入了compose的学习！！