Jetpack Compose与声明式UI(2)

导读大纲

1.1 Compose思维

1. 过渡到 Jetpack Compose 需要采用一种新的 UI 开发思维方式- 这种转变包括接受声明式 UI 范式的几个关键概念:

1.1.1 从可组合函数（Composable Functions）的角度思考问题

1. 在 Jetpack Compose 中,用户界面的构件是可组合函数- 这些用 @Composable 注解的函数描述用户界面的结构和内容
2. 可组合函数则不同,它是不可变的、纯功能性(纯函数)的- 而传统的安卓视图是可变对象, 必须对其进行操作- 这意味着UI是函数参数的直接输出1. 从而更容易推理和预测 UI 的行为.

1.1.2 拥抱单向数据流

1. Jetpack Compose 鼓励使用单向数据流模型- 在该模型中,数据从顶层可组合构件向下流动到其子可组合构件1. 而事件则从子可组合件向上流动到其父可组合件- 这种单向数据流简化状态管理,有助于防止意外的副作用1. 从而使 UI 更具可预测性和可维护性

1.1.3 了解重组

1. 重新组合（Recomposition）是 Jetpack Compose 更新用户界面的核心- 每当可组合函数所依赖的状态发生变化时 1. Compose 就会重新执行该函数,以确定新的用户界面状态- 这个过程既智能又高效1. 因为 Compose 只对 UI 中受状态变化影响的部分进行重新组合
2. 了解重新组合对于优化Compose UI,避免不必要的重新渲染至关重要

1.1.4 强调状态管理

1. 状态管理是构建Jetpack Compose UI的一个重要方面- 状态代表着驱动用户界面的数据
2. 正确地管理状态可以确保用户界面保持一致,并准确地反映最新数据
3. Jetpack Compose 为状态管理提供各种工具和模式- 如 remember , mutableStateOf 和 ViewModel

1.1.5 重要启示

1. Composables as Building Blocks- 将可组合函数视为用户界面的基本单元
2. 单向数据流- 确保数据向下流动,事件向上流动,以实现可预测的用户界面行为
3. 重新组合作为更新机制- 了解 Compose 如何根据状态变化有效地更新用户界面
4. 状态管理是关键- 掌握状态管理技术,让UI与数据保持同步
5. 采用 Compose 的思维方式,就可以充分利用 Jetpack Compose 的强大功能- 创建美观、可维护且性能良好的 Android UI
6. 这种模式的转变可能需要一些调整- 但在代码质量、开发效率和用户体验方面所带来的好处是非常值得的

1.2 基本构件: Composables

1. 在 Jetpack Compose 中,可组合元素是构建UI的基本构件- 它们本质上是使用 @Composable 注解的函数
2. 使用 @Composable 注解向 Compose 编译器发出信号- 表示该函数负责描述用户界面的一部分
3. Composables 的核心特征- 函数 1. 可组合元素被定义为 Kotlin 函数,与 Kotlin 语言天然契合 - 并允许充分利用 Kotlin 的所有表达能力- 使用 @Composable 注解 1. @Composable 注释是一种特殊标记 - 用于告知 Compose 编译器此函数将用于 UI 构建.- 描述 UI 结构和内容 1. 可组合元素声明UI元素的排列及其内容 - 比如, 在 Text 可组合元素中显示的文本- 自动重新组合 1. 可组合函数最强大的功能之一是其自动重新组合的能力2. 当可组合函数的输入发生变化时,比如文本发生变化或按钮被点击时 - Compose 会智能地重新执行函数,以相应地更新用户界面
4. Composables示例- <1> 可组合函数 Greeting 接收一个name参数 1. 并使用 Text 可组合函数渲染"Hello,[name]!"信息- <2> MyImage 可组合元素会从项目资源加载图片(R.drawable.my_image)1. 并使用Image可组合元素来显示它- <3> contentDescription 是一个重要的无障碍性(accessibility)功能 1. 它为依赖屏幕阅读器的用户提供图像的文字描述

@ComposablefunGreeting(name: String){Text(text ="Hello, $name!")// <1>}@ComposablefunMyImage(){Image(// <2>
        painter =painterResource(id = R.drawable.my_image),
        contentDescription ="My Image"// <3>)}

1. 组合你的用户界面 - Composables 旨在可组合,可以像搭积木一样将它们组合起来1. 来创建复杂的交互式用户界面- <1> MyScreen可组合元素 1. 使用 Column 可组合元素来垂直排列 Greeting 和 MyImage

@ComposablefunMyScreen(){
    Column {// <1>Greeting(name ="Alice")MyImage()}}

1. 关键点- Composables 是 Jetpack Compose UI 的核心构件- 它们是使用 @Composable 进行注解的 Kotlin 函数- 它们描述用户界面的结构和内容- 当输入发生变化时,它们会自动重新组合
2. 了解可组合元素是使用 Jetpack Compose 的基础- 在本系列教程中,你将学习如何使用这种强大的声明式方法1. 创建自定义可组合元素,使用布局,管理状态和构建复杂的UI

1.3 声明式UI与命令式用户界面(比较)

1. 要了解 Jetpack Compose 的独特优势- 了解声明式和命令式UI范式之间的差异至关重要
2. 并列分析这两种方法- 如何描述用户界面 1. 命令式UI范式: 重点关注如何逐步更改用户界面元素2. 声明式UI范式: 关注用户界面的最终状态- 代码风格 1. 命令式UI范式: 使用编程方式来操作视图2. 声明式UI范式: 使用函数和表达式来描述用户界面- 状态管理 1. 命令式UI范式: 通常需要手动跟踪和更新用户界面元素状态2. 声明式UI范式: 状态由框架隐式管理,从而实现 UI 的自动更新- UI更新 1. 命令式UI范式: 用户界面更新由开发人员的代码明确触发2. 声明式UI范式: 当状态发生变化时,会自动触发用户界面更新- 灵活性 1. 命令式UI范式: 直接操作用户界面元素的高度灵活性2. 声明式UI范式: 根据数据描述不同的 UI 状态,从而实现灵活性- 出错率 1. 命令式UI范式: 手动操作用户界面更容易出错2. 声明式UI范式: 由于声明性和框架控制,不易出错
3. 代码示例–更新一个Text视图- <1> Imperative (Traditional Android - Java) 1. 显式地找到TextView,设置文本,然后有条件地改变其颜色- 这涉及多个步骤和对视图的直接操作- <2> Declarative (Jetpack Compose - Kotlin) 1. 只是根据 text 和 isHighlighted参数描述 TextView 的外观2. 只要这些参数发生变化,Jetpack Compose就会自动更新用户界面

=========================================<1>
TextView myTextView =findViewById(R.id.myTextView);    
myTextView.setText("New Text");if(someCondition){
    myTextView.setTextColor(Color.RED);}else{
    myTextView.setTextColor(Color.BLACK);}==========================================<2>@ComposablefunMyTextView(text: String, isHighlighted: Boolean){Text(
        text = text,
        color =if(isHighlighted) Color.Red else Color.Black
    )}

1. 声明式方法的优势:- 简洁 1. 声明式代码明显更短、更具表现力.- 可维护性 1. 代码更易于理解和修改,因为它侧重于描述 UI 的状态- 减少错误 1. 声明式方法消除与手动UI更新相关的常见错误- 例如, 在数据发生变化时忘记更新视图- 可预测性 1. 用户界面始终反映当前状态,使其更具可预测性,更易于推理.
2. 通过采用 Jetpack Compose 的声明式方法- 可以简化用户界面开发流程,编写更易于维护的代码- 最终创建更强大和用户友好的 Android 应用程序