声明式UI：

声明式UI：也就是一次声明即可，后续不需要再“手动”对UI组件、布局等进行重新的处理的编写UI过程

传统UI编写方式：

  • 传统的XML编写UI方式，我们一般要先在XML中编写布局
  • 随后通过findViewById()、butterKnife等方式，找到绑定布局，进行setText(),setBackground()等

Compose声明UI编写方式：

  • 正如下述代码，我们声明了一个name的String变量，初始化给一个Text()组件以后，Text()不仅可以在初始运行的时候，将name的value设置并显示到UI界面，还能自动根据name的变化，自动更新UI。这就是所谓的不需要“手动”处理。
    val name:String ...(省略部分code)
    Text(name)
  • 更具体的，Compose体现声明式UI和传统UI的区别。通常传统UI，声明一个组件如TextView()，我们都能拿到一个返回值，获取到这个组件的实例对象。随意对实例对象进行属性、UI控制
  • 但是，Compose中所有的Text()、Image()等组件，都不提供返回值，或者就是提供返回值也是无关的。因为，声明式UI，就不会提供任何途径让你在编写完之后，对组件进行UI相关的修改
  • 我们需要通过：状态变更-->映射布局树帮助我们自动动态刷新UI。

##层级拆分：

  • Compose中，dependencies的分层关系和Android原生View体系也大不相同。Google在为了解决View层级的扩展性和整体框架的分层，确实重新设计了dependencies的分层。
  • androidx.compose.compiler:
    • Kotlin编译器插件，用于支撑Compose的编译过程，通常是被plugin所依赖进来的
composeOptions {
    kotlinCompilerVersion "1.5.10"
    kotlinCompilerExtensionVersion "1.0.0"
}
  • androidx.compose.runtime:
    • compose运行底层支持：数据结构、状态转换机制等：State()、mutableStateOf()、remember{}
  • androidx.compose.ui:
    • 提供Compose层所有的UI组件相关支持功能，其实所有类似Text()、Image()也好，最终都是走到一个名为：Layout{}的组件进行UI的渲染。这一层并不是具体的最靠近上层实现的ui控件层，相反依旧指的还是底层实现。比如：Modifier等相关的基础属性支持，其实是ui层去提供的。
  • androidx.compose.animation:
    • 动画层，在UI基础层上支持动画相关的支持
  • androidx.compose.foundation:
    • 基础支撑层，提供的是基础的组件，如：Column()、Row()等组件，其实可以理解为，具体提供靠近实现的基础UI支撑
  • androidx.compose.material:
    • 提供具体的如：Text()、Button()这些实现。处于foundation更上层。
    • 至于为什么将这些组件置于更上层，有其中一个原因就是如果你不想用Material Design，Compose支持你从这一层去进行替换。打个比方：可以在foundation基础上，我们自己定义一个Compose的monalisa理想UI库。

 评论