DeepCoder_Mx-CSDN博客

原创 Compose 是如何将数据转换成 UI 的？

Compose 是一个声明式的 UI 框架，提供了很多开箱即用的组件，比如 Text()、Button、Image() 等等，Compose 会经过几个不同的阶段，最终渲染出 UI 界面。

2023-11-28 21:40:41 2146 1

原创深度解析 Compose 的 Modifier 原理 -- ParentDataModifier

📑《深入解析 Compose 的 Modifier 原理 - - Modifier、CombinedModifier 》📑《深度解析 Compose 的 Modifier 原理 - - Modifier.composed()、ComposedModifier 》📑《深入解析 Compose 的 Modifier 原理 - - Modifier.layout()、LayoutModifier 》📑。

2024-01-24 11:18:57 956 1

原创深度解析 Compose 的 Modifier 原理 -- PointerInputModifier

其实原理性分析的文章，真的很难讲的通俗易懂，讲的简单了就没必要写了，讲的繁琐难懂往往大家也不乐意看，所以只能尽量想办法，找个好的角度（比如从 Demo 代码示例出发）慢慢带着大家去钻源码，如果确实能帮助到大家完全理解了文章所讲述到的源码理论，那就值了。这篇文章，毕竟它是作为 Modifier 原理解析的第一篇文章，对你了解整个 Modifier 架构还是很有帮助的，或者说它是最基础的一篇文章，如果不熟悉，后面的系列 Modifier 你可能会看的比较费劲…

2024-01-22 10:48:59 1010

原创【Update】深度解析 Compose 的 Modifier 原理 -- DrawModifier

其实原理性分析的文章，真的很难讲的通俗易懂，讲的简单了就没必要写了，讲的繁琐难懂往往大家也不乐意看，所以只能尽量想办法，找个好的角度（比如从 Demo 代码示例出发）慢慢带着大家去钻源码，如果确实能帮助到大家完全理解了文章所讲述到的源码理论，那就值了。

2024-01-20 15:07:23 989

原创【Update】深度解析 Compose 的 Modifier 原理 -- Modifier.layout()、LayoutModifier

在正式开始分析 LayoutModifier 相关原理之前，建议你先看看【 Compose 是如何将数据转换成 UI 的？】这篇文章，当你了解了 Compose 的“组合”、“布局”、“绘制”的思维模型后，有助于你更透彻的了解 Modifier 的底层设计原理。

2024-01-19 10:50:00 1049

原创深度解析 Compose 的 Modifier 原理 -- Modifier.composed()、ComposedModifier

可以发现 ComposedModifier 是个私有函数，你是没有办法直接创建的。) {这样，Modifier.composed() 扩展函数会帮我们创建出一个 ComposedModifier。ComposedModifier 是个啥？为什么要创建一个 ComposedModifier？什么时候又该创建一个 ComposedModifier？带着这三个疑问，我们开始继续探讨 Modifier 的精髓…

2024-01-19 10:46:28 667

原创深度解析 Compose 的 Modifier 原理 -- Modifier、CombinedModifier

当你想深入了解 Modifier 的时候，你应该已经在实际代码中用起来了，随处可见各种ModifierModifier.size() // 尺寸Modifier.width() // 宽度Modifier.height() // 高度Modifier.padding() // 间距Modifier.background() // 背景Modifier.clip() // 裁切Modifier.clickable() // 点击... ...

2024-01-19 10:44:58 1055

原创手把手教你写 Compose 动画 -- 状态转移型动画 API：animate*AsState()

Jetpack Compose 提供了一系列功能强大且可扩展的 API，可用于在应用界面中轻松实现各种动画效果。这一系列文章会逐个介绍所有的动画 API，通过最直观的 Demo 示例，手把手教你怎么写动画以及带你了解动画背后的原理。📑手把手教你写 Compose 动画 - - 状态转移型动画 API：animate*AsState()📑手把手教你写 Compose 动画 - - 流程定制型动画 API：Animatable()📑。

2024-01-18 09:17:27 813

原创聊聊 Jetpack Compose 的 “自定义布局” -- Layout()

在之前的【聊聊 Jetpack Compose 原理 – LayoutModifier 和 Modifier.layout】文章中，我们了解了 Modifier.layout() 修饰符的用法，并且探讨了它背后那个 LayoutModifier 的原理。除了修饰符，Compose 还提供了一个叫的 Composable 组件，可以直接在 Composable 函数中调用，方便自定义布局。两者都是自定义布局，有什么区别？

2024-01-17 09:35:10 477

原创聊聊 Jetpack Compose 的 “自定义布局” -- SubcomposeLayout()

其中布局阶段包含：测量和放置子阶段，思维模型如下：这种思维模型适用于绝大多数的 Layout 可组合项，但却有一个打破规则的布局不遵循此架构 - -。

2024-01-16 10:17:10 529

原创一文彻底解析 Compose 的穿透刺客 -- CompositionLocal

是通过组合隐式向下传递数据的工具。这段代码中局部变量name以参数的方式被暴露出来了，这就是 Compose 中的（状态提升）。很明显是不行的！因为name这个局部变量的是限定在范围内的。这样写行吗？肯定是不行的！但我就想这么写，并且希望它可以运行，那么这种行为就意味着name这个局部变量要拥有可以穿出它的，并且穿透进函数的能力！实现，它提供了这种「穿透能力」。

2024-01-15 14:57:00 465

原创手把手教你写 Compose 动画 -- 组件大小变化 API：animateContentSize

animateContentSize 修饰符可为 Compose 组件大小变化时添加动画效果。还是那句话：探索新技术的最佳方式是尝试它们，我们先构建一个简单场景：

2023-12-15 17:29:32 765

原创手把手教你写 Compose 动画 -- 更强大的多组件切换动画 API：AnimatedContent

AnimatedContent 用来控制多个组件的入场和出场，同时还能对入场和出场效果做定制，相当于是 AnimatedVisibility 和Crossfade 的结合，AnimatedContent 出入场动画效果的尺寸是渐变的，这个是区别于 Crossfade 的一个点。

2023-12-15 14:59:24 900

原创手把手教你写 Compose 动画 -- 简单页面切换动画 API：Crossfade

这段代码非常简单，button 控制 shown 变量值，从而显示不同的 Image。对于两个 Image 组件我们就可以看出是两个布局界面，现在切换是没有任何动画效果的。

2023-12-13 14:20:16 785

原创手把手教你写 Compose 动画 -- 显示与消失 API：AnimatedVisibility

老样子，先来一段简单代码示例，然后再慢慢引入 AnimatedVisibility 的用法。这段代码极其简单，一个图片，一个按钮，一个 shown 状态变量控制图片显示与否。从动画效果看确实不行，显示与消失都很粗糙。

2023-12-13 11:57:58 827

原创手把手教你写 Compose 动画 -- 过渡动画 API：Transition

updateTransiton 是 Compose 中实现过渡动画的关键 API 。所谓过渡动画，即当依赖的某个状态发生改变时连锁发生的一系列动画效果。updateTransition 允许开发者将多个属性数值绑定到一个状态，当这个状态发生改变时，多个属性同时进行变换。

2023-12-12 16:53:18 1188

原创手把手教你写 Compose 动画 -- 讲的不能再细的 AnimationSpec 动画规范

千呼万唤始出来！前面我们讲解【 animate*AsState 】和【 Animatable 】两种动画 API 的用法时，都提到了它们的函数内部有一个共同的核心参数：AnimationSpec。

2023-12-08 14:01:24 1319

原创手把手教你写 Compose 动画 -- 流程定制型动画 API：Animatable()

Jetpack Compose 提供了一系列功能强大且可扩展的 API，可用于在应用界面中轻松实现各种动画效果。从这篇文章开始，会逐个介绍所有的动画 API，通过最直观的 Demo 示例，手把手教你怎么写动画以及带你了解动画背后的原理。

2023-12-07 14:43:02 840

原创一文彻底吃透 Compose 中的副作用（附带效应）

Jetpack Compose 提供了多个可组合函数，例如 SideEffect、LaunchedEffect 和 DisposableEffect，这些函数使开发人员能够有效地管理副作用，方法是将它们与界面渲染逻辑分离并在单独的协程范围内执行它们。

2023-12-06 10:23:32 462 2

原创聊聊 Jetpack Compose 的 “状态订阅&自动刷新” -- 你真的了解重组吗？

通过之前的几篇文章，你应该对这三行代码不陌生，当用 mutableState*Of 申明一个变量的时候，在可组合项中，如果变量变化了，就会触发重组。

2023-12-05 11:55:59 219

原创聊聊 Jetpack Compose 的 “状态订阅&自动刷新” -- mutableStateListOf

对于 String、Int 这些类型，Compose 提供了 mutableStateOf，难道对于 List 这种这么常用的类型，就没有一个 mutable*** 的函数给我们用？

2023-12-04 19:49:19 441

原创聊聊 Jetpack Compose 的 “状态订阅&自动刷新” -- 有状态、无状态、状态提升？

使用 remember 存储对象的可组合项包含内部状态，这会使该可组合项有状态。在调用方不需要控制状态，并且不必自行管理状态便可使用状态的情况下，“有状态”会非常有用。

2023-12-04 17:15:01 171

原创聊聊 Jetpack Compose 的 “状态订阅&自动刷新” -- remember 和重组作用域

在讲本篇文章主题之前，建议先看看【聊聊 Jetpack Compose 原理 -- 状态订阅&自动刷新机制】一文，因为两篇文章是上下篇的关系，看完上篇，可以更好的串联知识点。话不多说，还是老样子，从 Demo 一步步引出我们的核心知识点。

2023-12-01 10:19:44 887 1

原创解析 mutableStateOf 源码 -- 扒皮 Compose 的状态订阅&自动刷新机制

其实原理性分析的文章，真的很难讲的通俗易懂，讲的简单了就没必要写了，讲的繁琐难懂往往大家也不乐意看，所以只能尽量想办法，找个好的角度（比如从 Demo 代码示例出发）慢慢带着大家去钻源码，如果确实能帮助到大家完全理解了文章所讲述到的源码理论，那就值了。

2023-11-30 15:54:21 518 2

原创写给初学者的 HarmonyOS 教程 -- 状态管理（@State/@Prop/@Link 装饰器）

@State 装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI 会发生对应的渲染改变（类似 Compose 的@Prop 装饰的变量可以和父组件建立单向的同步关系。@Prop 装饰的变量是可变的，但是变化不会同步回其父组件。

2023-11-28 15:03:23 2002 2

原创写给初学者的 HarmonyOS 教程 -- 页面路由（router）

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面（类似 Activity 跳转）。。HarmonyOS 提供了Router 模块，通过不同的url 地址，可以方便地进行页面路由，轻松地访问不同的页面。

2023-11-27 23:13:21 1135

原创写给初学者的 HarmonyOS 教程 -- 循环渲染（ForEach）

ForEach 接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在 ForEach 父容器组件中的子组件。例如，ListItem 组件要求 ForEach 的父容器组件必须为 List 组件。

2023-11-27 18:32:42 1387

原创写给初学者的 HarmonyOS 教程 -- 自定义组件的生命周期

自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。

2023-11-27 15:37:36 363

原创写给初学者的 HarmonyOS 教程 -- ArkTS 容器组件（List）

使用列表可以轻松高效地显示结构化、可滚动的信息。通过在 List 组件中按垂直或者水平方向线性排列子组件 ListItemGroup 或 ListItem，为列表中的行或列提供单个视图，或使用ForEach 迭代一组行或列，或混合任意数量的单个视图和 ForEach 结构，构建一个列表。

2023-11-27 10:19:49 3119 1

原创写给初学者的 HarmonyOS 教程 -- 什么是 ArkTS ？

Harmony 应用开发所使用的语言为：ArkTs。它在 TypeScript 的基础上拓展了声明式 UI、状态管理等相应能力，让开发者已更简洁自然的方式开发高性能应用。ArkTs 是 TypeScript 的拓展，提供了一套声明式 UI 描述规范，帮助你以更接近自然语义的方式直接的描述 UI 界面。

2023-11-25 14:41:47 855

原创写给初学者的 HarmonyOS 教程 -- 熟悉 DevEco Studio

要进行 HarmonyOS 开发，必须要切换开发工具了，菊花厂基于 IntelliJ IDEA Community 开源版本打造新打造了一个面向华为终端全场景多设备的一站式集成开发环境（IDE）：DevEco Studio。

2023-11-25 10:02:48 1379

原创写给初学者的 HarmonyOS 教程 -- TypeScript 快速入门

ArkTS 是 HarmonyOS 优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，匹配 ArkUI 框架，扩展了声明式 UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。

2023-11-24 23:58:53 963

Thinking in Android & Compose & HarmonyOS