Jetpack Compose与声明式UI(1)

沐少
236 阅读7分钟

1.1 什么是声明式UI?

  1. 在用户界面开发领域,声明式UI是对传统命令式方法的一种范式转换
    • 就其核心而言,声明式UI编程围绕以下关键原则展开

1.1.1 描述所需状态:

  1. 声明式UI的精髓在于关注用户界面在任何特定时刻应该是什么样子
    • 而不是纠缠于如何实现它的琐碎细节
  2. 不需要编写操作视图的步骤说明, 例如,找到这个按钮,更改文字,然后隐藏图片
    • 而只需声明你希望用户界面处于的最终状态

1.1.2 UI就是一个带有状态的函数

  1. 在声明式范例中,UI就是维护其底层状态的直接函数

    • 状态代表影响用户界面外观和行为的数据和变量

  2. 只要状态发生变化(例如,由于用户输入、数据获取或内部逻辑)

    • 用户界面就会自动重新渲染,以准确反映新的状态

1.1.3 UI自动更新

  1. 声明式UI(declarative UIs)最强大的功能之一

    • 就是能够在状态发生变化时自动更新

  2. 底层框架(这里是Jetpack Compose)会找出最有效的方法

    • 将用户界面从当前状态过渡到新的预期状态

  3. 这样,您就无需手动跟踪和更新各个UI元素

    • 从而大大降低出错和不一致的风险.

1.1.4 主要优势

  1. 声明式UI有很多好处

    • 提高可读性和可维护性
      1. 声明式UI代码通常更简洁、更易理解、更不易出错.
    • 减少模板
      1. 由于无需关注低级用户界面操作,因此代码编写量更少.
    • 增强用户界面一致性
      1. 由于用户界面始终反映当前状态,因此不容易脱节
    • 更简单的状态管理
      1. 框架可处理复杂的状态更新,让你更轻松地管理App的数据和逻辑
    • 提高性能
      1. 该框架可优化用户界面更新,从而带来更流畅、响应更迅速的用户体验

  2. 让我们用一个简单的例子来说明（使用伪代码）

    • <1> Imperative Approach (Traditional)
    • <2> Declarative Approach (Jetpack Compose)
      1. MyUI 函数根据 buttonText 和 showImage 变量描述UI所需的状态
      2. 如果这些变量发生变化,Jetpack Compose会自动重新渲染UI
        • 使其与新的状态相匹配
================================================= <1>
// Find the button
Button myButton = findViewById(R.id.myButton);
// Change the button's text
myButton.setText("New Text");
// Hide an image view
ImageView myImage = findViewById(R.id.myImage);
myImage.setVisibility(View.GONE);
================================================ <2>
@Composable
fun MyUI(buttonText: String, showImage: Boolean) {
    Button(onClick = { /* ... */ }) {
        Text(text = buttonText)
    }
    if (showImage) {
        Image(painter = painterResource(id = R.drawable.my_image), contentDescription = "My Image")
    }
}

1.2 声明式UI的优势

  1. 以 Jetpack Compose 为代表的声明式UI与传统的命令式用户界面开发方法相比

    • 提高代码的可读性和可维护性
      1. 声明式UI代码往往更简洁,也更容易理解
      2. 通过专注于描述所需的UI状态,而不是实现该状态的程序步骤
        • 开发人员可以编写出与UI视觉结构密切相关的代码
      3. 这使得原作者和其他开发人员更容易掌握代码的意图
        • 并放心地进行修改
    • 减少模板代码
      1. 命令式用户界面代码通常包含大量模板
        • 用于查找视图、设置属性和处理更新的重复代码
      2. 声明式UI抽象掉大部分模板
        • 使开发人员能够更简洁地表达他们的UI逻辑
      3. 代码量的减少可以加快开发周期,减少错误发生的机会
    • 增强用户界面的一致性和可预测性
      1. 在声明式UI中,用户界面总是反映应用程序的当前状态
      2. 状态和UI之间的这种紧密耦合确保用户界面的一致性和可预测性
        • 无论用户界面的状态如何变化
      3. 这对于复杂的用户界面尤为重要,因为在命令式方法中
        • 管理状态和UI元素之间的同步是一项挑战
    • 更便捷的状态管理
      1. 声明式UI通常具有内置的状态管理机制
      2. Jetpack Compose 等框架提供的工具和模式
        • 可以帮助开发人员高效地管理UI组件的状态
      3. 这就简化UI与底层数据保持同步的过程,减轻开发人员的认知负担
        • 从而开发出更强大的应用程序.
    • 通过优化UI更新提高性能
      1. 声明式UI框架通常采用智能算法来优化用户界面更新
      2. 当状态发生变化时,框架会分析新旧状态之间的差异
        • 并只更新UI的必要部分
      3. 这可以显著提高性能,尤其是在复杂和动态的用户界面中
        • 不必要的重绘可能会导致高昂的成本

  2. 现实世界的影响

    • 声明式UI的优势在实际开发场景中转化为实实在在的优势
    • 由于声明式代码固有的清晰度和结构,采用声明式框架的团队
      1. 往往能加快开发周期、减少错误数量并改善协作
    • 此外,这些框架提供的性能优化还带来更流畅、响应更灵敏的用户体验

1.3 Jetpack Compose 简介

  1. Jetpack Compose 是谷歌推出的一款革命性UI工具包

    • 有望重塑 Android UI开发的格局

  2. Jetpack Compose 采用现代原则设计,建立在 Kotlin 的坚实基础之上

    • 为制作原生 Android UI提供一种全新而高效的方法

1.3.1 主要功能和亮点

  1. 声明式UI范例

    • Jetpack Compose 全心全意地接受声明式UI范例
      1. 这是对传统命令式方法的根本性转变
    • 在这种范例中,开发人员描述用户界面所需的状态
      1. 而不是明确指示如何实现它
    • 这种声明性使代码更简洁、更易于推理、更不易出错

  2. 基于 Kotlin 构建

    • Jetpack Compose 与 Kotlin 实现无缝集成
      1. Kotlin 是谷歌针对安卓开发推出的现代且极具表现力的编程语言
    • 这种集成使开发人员能够利用 Kotlin 的强大功能
      1. 如 coroutines、扩展函数和 lambda 表达式

  3. 无缝集成

    • 虽然 Jetpack Compose 代表一种全新的UI构建方式
      1. 但其设计旨在与现有的 Android 代码库无缝集成
    • 开发人员可以在他们的项目中逐步采用 Compose
      1. 逐渐用composable函数取代传统的UI元素
    • 这种灵活性使团队能够按照自己的节奏过渡到 Compose
      1. 而不会中断正在进行的开发工作

  4. Material Design集成

    • Jetpack Compose 与 Material Design 深度集成
    • Material Design 是谷歌的综合设计系统
      1. 用于创建具有视觉吸引力且用户友好的界面
    • Jetpack Compose提供丰富的预建 Material Design 组件和样式选项
      1. 使开发人员能够快速创建美观、一致的遵循现代设计原则的用户界面

1.3.2 为什么选择 Jetpack Compose?

  1. Jetpack Compose 提供一系列引人注目的优势,使其成为安卓UI开发的不二之选

    • 提高生产力
      1. Compose 的声明性与其直观的 Kotlin API 相结合
        • 大大提高开发人员的工作效率
      2. 由于减少模板代码,并专注于用户界面状态的描述
        • 开发人员可以快速迭代,更高效地实现他们的想法
    • 增强可维护性
      1. 由于其声明式结构和复杂性的降低
        • Compose代码本身就具有更高的可维护性
      2. UI描述与底层实现细节的分离
        • 使得与UI相关的代码更容易理解、修改和调试.
    • 现代 UI 开发
      1. Jetpack Compose 代表着 Android UI 开发的未来
      2. 通过采用 Compose,开发人员可以将自己置于 Android 技术的最前沿
        • 并获得创建尖端UI的最新工具和最佳实践

  2. Jetpack Compose 不仅仅是一个新的UI工具包,它还是一种模式的转变

    • 使开发人员能够以前所未有的轻松、表现力和效率创建 Android UI

  3. 无论是开始一个新项目,还是增强现有项目

    • Jetpack Compose 都将为创建卓越的 Android 应用程序提供无限可能
avatar
文章
阅读
粉丝