
Jetpack Compose
文章平均质量分 88
fundroid
Android GDE(谷歌开发者专家)| 互联网大厂移动端架构师
展开
-
Compose 中动态修改 Lottie 动画主题颜色
Lottie 非常方便,因为它能嵌入设计师使用创作工具制作的动画。在 Android 官方(https://developer.android.com)给的 Compose 动画选型流程图中,对于由多个元素构成的复杂插画动画,也建议使用像 Lottie 这样的框架。当使用 Lottie 工具制作的动画时,我们有时也希望动态更改其中一部分,比如修改深色/浅色模式,适配夜间主题等。本文将通过示例,介绍如何调整 Lottie 动画内的颜色。原创 2025-04-23 08:30:00 · 990 阅读 · 0 评论 -
了解 Compose 副作用 API 的实现原理
本文带大家详细研究了 Jetpack Compose 里最常用的三个主要副作用处理 API。在声明式 UI 的世界里,状态能影响到执行行为的方方面面,所以把副作用管理好,对保证任务能正确、可预测地执行,是非常关键的。原创 2025-04-22 08:15:00 · 924 阅读 · 0 评论 -
2025 跨平台技术如何选:KMP 与 Flutter 的核心差异
跨平台技术的选择本质是组织能力的映射。KMP 像一位精通多国语言的外交官,在原生生态中游刃有余;Flutter 则像一位才华横溢的画家,用统一的笔触描绘多平台画卷。2025 年的今天,随着 Compose Multiplatform 的成熟和 Flutter 3.0 的性能突破,这场竞赛已不再是零和游戏——聪明的团队正在混合架构中寻找最优解,让每一行代码都在正确的位置发光。原创 2025-04-07 08:15:00 · 1095 阅读 · 0 评论 -
一文看懂 Jetpack Compose 布局流程
本文用通俗易懂的语言介绍 Jetpack Compose 的布局流程,涉及到 MeasurePolicy,Modifier,Constraints, Intrinsic measurement 等概念。原创 2024-12-09 08:00:00 · 1265 阅读 · 0 评论 -
深入浅出 Compose Compiler(2) 编译器前端检查
本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!原创 2024-10-21 08:30:00 · 1607 阅读 · 0 评论 -
一文看懂 Compose 强制跳过模式(Strong Skipping Mode)
强制跳过模式(Strong Skipping Mode)是一个小更新,但是其实影响深远,它有点像从“性本恶”到“性本善”的转变,认为不稳定类型的危害是可忽略的,当然它的开启会引入正确性风险,这也是为什么它经过了长期的实验验证后,才正式引入。经过实验和开发者反馈,证明它的引入是收到欢迎的。只要大家遵循好的编码习惯,不随意滥用不稳定性类型,鼓励打开强跳模式,会让 App 性能得到一个整体提升。原创 2024-10-09 08:30:00 · 1183 阅读 · 0 评论 -
Jetpack Compose 1.5 发布:全新 Modifier 系统助力性能提升
Jetpack Compose 1.5 发布,性能终于得到大幅提升,这得益于全新的 Modifier 实现方式原创 2023-09-11 08:30:00 · 2259 阅读 · 6 评论 -
深入浅出 Compose Compiler(1) Kotlin Compiler & KCP
Compose 的语法简洁、代码效率非常高,这主要得益于 Compose Compiler 的一系列编译期魔法,帮开发者生成了很多样板代码。但编译期插桩也阻碍了我们对于 Compose 运行原理的认知,想要真正读懂 Compose 就必须先了解它的 Compiler。本系列文章将带大家揭开 Compose Compiler 的神秘面纱。Compose 是一个 Kotlin Only 框架,所以 Compose Compiler 的本质是一个 KCP(Kotlin Compiler Plugin)。原创 2023-04-29 12:00:54 · 2082 阅读 · 4 评论 -
Jetpack Compose 中添加 click 事件的几种方法
Compose 中添加 click 有多总方法,本文做一个简单总结,包括 Modifier.clickable, combinedClickable, pointerInput, ViewConfiguration 等原创 2023-04-10 08:30:00 · 6871 阅读 · 1 评论 -
Compose 为什么可以跨平台?
Compose Multiplatform 本质上是一个 Kotlin 跨平台库。在各个平台共享 Compose Compiler 和 Compose Runtime原创 2022-12-26 11:52:37 · 2540 阅读 · 0 评论 -
Compose 横竖屏切换时状态如何保存?rememberSaveable 实现原理分析
rememberSaveable 可以帮助 Composable 在横竖屏切换甚至进程切换后恢复状态,这主要是通过 SaveableStateRegistry 实现的,在 Activity onSaveInstance 时通过 registry 收集我们需要保存的状态并写入 Bundle,待到下次 Activity 重新 onCreate 的时候恢复。原创 2022-10-24 09:00:00 · 2389 阅读 · 0 评论 -
Compose Compiler 与 Kotlin 的版本兼容性
有时 Android Studio 的 build.gradle 中会提示 Compose 有了新版本,但是如果升级不当可能会出现编译错误,比如下面这样的搭配就会出现 build error比如当我试图将 1.2.0-rc02 升级到 1.2.0 时,会发生以下编译错误原因是 Kotlin 与 Compose Compiler 版本不匹配。原创 2022-09-23 09:00:00 · 6602 阅读 · 5 评论 -
深入理解 Compose Navigation 实现原理
Compose 中的 NavHost 本质上是一个 Composable 函数,与中的同名接口没有派生关系,但职责是相似的,主要目的都是构建 NavGraph。NavGraph 创建后会被 NavController 持有并在导航中使用,因此 NavHost 接受一个 NavController 参数,并为其赋值 NavGraph//... //设置 NavGraph navController . graph = graph //... }...原创 2022-09-01 08:30:00 · 3889 阅读 · 4 评论 -
《Jetpack Compose 从入门到实战》带你踏上 Compose 开发之旅~
Jetpack Compose 从入门到实战,新书上架,谷歌开发者社区 & Kotlin中文社区 & Compose中文社区 联合推荐原创 2022-08-02 09:00:00 · 3800 阅读 · 7 评论 -
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
前面基于代码片段进行了一些对比,最后以CounterDemo为例,看一个完整功能下Flutter、Compose和Swift的代码对比,React与其他三者代码风格差异较大,就不参加比较了。FlutterComposeSwiftUI可以感觉到Compose代码最简洁也最直观,SwiftUI通过ViewBuilder机制也可以实现与Compose类似的DSL,表现也非常不错,Flutter由于模板代码较多,在简洁程度上表现最差。httpshttpshttps。...原创 2022-08-01 09:00:00 · 2381 阅读 · 6 评论 -
Compose 类型稳定性注解:@Stable & @Immutable
Compose会针对稳定类型进行编译期优化,通过对输入参数的比较跳过不必要的重组稳定类型包括所有的基本型、String类型、函数类型,以及符合以下条件的非基本类型非interface所有public属性均为final所有public属性均为稳定类型或者MutableState通过添加@Stable或者@Immutable注解可以提升重组性能,注解的使用要慎重跨Module引用数据类型时,需要通过辅助手段提升其稳定性。...原创 2022-07-28 09:00:00 · 4554 阅读 · 6 评论 -
深入理解 Jetpack Compose 内核:SlotTable 系统
Compose 的绘制有三个阶段,组合 > 布局 > 绘制。从组合到上屏的一系列过程中主要是依靠 SlotTable 系统来完成,SlotTable 记录了 Composiiton 的状态,当 SlotTable 的状态发生变化时,会触发 LayoutNode 树的更新,实现 UI 重新渲染。......原创 2022-06-27 15:28:22 · 2747 阅读 · 5 评论 -
Jetpack Compose 动画开发实践:微博长按点赞彩虹
Compose 在动画方面下足了功夫,提供了种类丰富的 API。但也正由于 API 种类繁多,如果想一气儿学下来,最终可能会消化不良,导致似懂非懂。结合例子学习是一个不错的方法,本文就带大家边学边做,通过实现一个微博长按点赞的动画效果,学习和了解 Compose 动画的常见思路和开发技巧。|原版效果高仿效果1. Compose 动画 API 概览Compose 动画 API 在使用场景的维度上大体分为两类:高级别 API 和低级别 API。就像编程语言分为高级语言和低级语言原创 2022-05-30 01:39:09 · 1366 阅读 · 0 评论 -
带你了解 Jetpack Compose 快照系统
Compose 通过名为“快照(Snapshot)”的系统支撑状态管理与重组机制的运行。快照具备对 State 的读写感知和隔离的作用,可以保证并发安全,提升性能原创 2022-05-09 00:43:15 · 1823 阅读 · 0 评论 -
Jetpack Compose 动画 API: AnimatedVisibility & AnimatedContent
Jetpack Compose 的动画相关的 API 数量众多,分为低级别 API 和高级别 API,其中高级别 API 便于使用者针对具体场景开箱即用 ,其中最常用的当属 AnimatedVisibility 和 AnimatedContent 这两个了。1. AnimatedVisibilityAnimatedVisibility 顾名思义是用动画的方式改变 UI 元素的 Visibility,具体来说就是针对让其内部的 Composable 以动画的形式进入或退出屏幕AnimatedVisi原创 2022-01-24 09:00:00 · 1658 阅读 · 2 评论 -
Jetpack Compose 无限加载列表(滚到底部自动加载更多)
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢?两种方法可供选择:基于 paging-compose自定义实现方法一: paging-composeJetpack 的 Paging 组件提供了对 Compose 的支持dependencies { ... // Paging Compose implementation "androidx.pagin原创 2022-01-16 17:26:48 · 6728 阅读 · 6 评论 -
Compose Multiplatform 正式版将于年内发布
近日,JetBrains 公司发布了 Compose Multiplatform 的 Beta 版本,这距离此前 Alpha 版本的发布才过去两个多月。这个版本中包含了许多新的改进,在桌面端与Web端分别增加了新的 API ,并对已有的部分 APIs 进行了稳定。Beta 版的发布意味着距离 1.0 正式版更近了一步,另据官方透漏正式版最早将于年内发布。Jetpack Compose 是 Android 最新推出的声明式 UI 工具包。JetBrains 受到 Jetpack Compose 的启发,原创 2021-11-28 23:11:32 · 2325 阅读 · 0 评论 -
Jetpack Compose 易犯错误之:在 LazyColumn 中访问 LazyListState
我们在使用 LazyColumn 或者 LazyRow 时,应该避免在 LazyListScope 中访问 LazyListState,这可能会造成隐藏的性能问题,看下面的代码:@Composablefun VerticalList(items: List<String>, onReachedBottom: () -> Unit) { val listState = rememberLazyListState() LazyColumn(state = listStat原创 2021-11-27 21:51:01 · 4204 阅读 · 1 评论 -
【Android】实战图像识别:Compose + MLKit + CameraX
MLKit 是 Google 提供的移动端机器学习库,可以在 Andorid 或 iOS 上低成本地实现各种 AI 能力,例如图像、文字、人脸识别等等,而且很多能力可以在手机端离线完成。https://developers.google.com/ml-kit下面通过代码示例展示 MLKit 的以下功能:图像识别(Image Labeling)目标检测(Object Detection)目标追踪(Object Tracking)1. 图像识别(Image Labeling)图像识别是原创 2021-11-25 13:57:35 · 11842 阅读 · 3 评论 -
Jetpack Compose 动态权限申请(Permission Request)
在 Jetpack Compose 动态申请权限可以使用两种方法rememberLancherForActivityResultAccompanist 的 Permissions接下来分贝展示一下两种用法代码环境如下:Kotlin 1.5.2Jetpack Compose 1.0.2Android Studio Chipmunk | 2021.2.1要使用 Accompanist 需要额外引入dependencies { ... implementation "co原创 2021-11-13 20:28:47 · 8624 阅读 · 3 评论 -
ComposeOptions.kotlinCompilerVersion is deprecated
我为我的 Compose 工程升级 AGP 后 (7.0.0 > 7.0.2)重新编译发生下面错误ComposeOptions.kotlinCompilerVersion is deprecated. Compose now uses the kotlin compiler defined in your buildscript.以前需要通过该 composeOptions 指定 Kotlin 版本升级后,直接复用 buildScript 的 Kotlin 版本, composeOptio原创 2021-11-06 20:23:37 · 3405 阅读 · 0 评论 -
展望2022:Android开发技术动向
每年9/10月份 Google 都会举行为期约2天的 Android Dev Summit,在活动上 Google 的技术专家们会分享一些 Android 领域的技术动向以及开发心得。今年 Summit 的 Slogan 是 “Excellent apps,across devices” , 即使用 Jetpack 等 MAD Skill (Moden Android Development) 开发出更优秀的应用,并通过 Android 系统落地到更多种类的智能设备。本次活动围绕这一主旨做了 30 多场原创 2021-11-04 18:37:13 · 2051 阅读 · 0 评论 -
Compose Multiplatform 实战:联机五子棋
1. 认识 Compose MultiplatformJetpack Compose 作为 Android 端的新一代UI开发工具,得益于 Kotlin 优秀的语法特性,代码写起来十分简洁,广受开发者好评。作为 Kotlin 的开发方,JetBrains 在 Compose 的研发过程中也给与了大量帮助,可以说 Compose 是 Google 和 JetBrains 合作的产物。在参与合作的过程中,JetBrains 也看到了 Compose 在跨平台方面的潜力,Compose 良好的分层设计使得原创 2021-10-24 21:32:55 · 9554 阅读 · 0 评论 -
Jetpack Compose 实现波浪加载效果
最近用 Compose 实现了一个波浪效果的进度加载,如上图所示。API 在设计上符合 Compose 的编码风格,使用非常简便。1. 使用方式在 root 的 build.gradle 中引入 jitpack,allprojects { repositories { ... maven { url 'https://jitpack.io' } } }在 module 的 build.gradle 中引入 ComposeWaveLoading 的最新版本dependenc.原创 2021-10-01 09:04:20 · 1695 阅读 · 0 评论 -
Jetpack Compose 中使用 Lottie 动画
从事 Android 开发的 都知道 airbnb 的 Lottie 库,如今它也支持在 Jetpack Compose 中使用了原创 2021-09-27 03:44:26 · 2179 阅读 · 0 评论 -
100行代码写一个Compose版华容道
之前写过几个 Compose 的 demo,但一直没使用到 Gesture, Theme 等特性,于是写了一个华容道的小程序来展示上述这些特性。写完后又一次被 Compose 的生产力所折服,整个程序的完成不足百行代码,这在传统开发方式中是难以想象的。代码地址:https://github.com/vitaviva/compose-huarongdao基本思路游戏逻辑比较简单,所以没有使用 MVI 之类的框架,但是整体仍然遵从数据驱动UI的设计思想:定义游戏的状态基于状态的UI绘制用户.原创 2021-08-27 15:08:30 · 6611 阅读 · 7 评论 -
Compose Multiplatform 正式官宣,与 Flutter 迟早必有一战?
7月底 Compose for Android 1.0 刚刚发布,紧接着 8月4日 JetBrains 就宣布了 **Compose Multiplatform** 的最新进展,目前已进入 alpha 阶段。原创 2021-08-10 10:39:59 · 9404 阅读 · 10 评论 -
Jetpack Compose Runtime 与 NodeTree 管理
Jetpack Compose 不只是一个 UI 框架,更是一个通用的 NodeTree 管理引擎。本文介绍 compose.runtime 如何通过 NodeTree 为compose.ui 提供支持。大家知道 Jetpack Compose 不仅限于在 Android 中使用 ,Compose For Desktop、 Compose For Web 等项目也已相继发布,未来也许还会出现 Compose For iOS 。Compose 能够在不同平台上实现相似的声明式UI开发体验,这得益于其分..原创 2021-06-22 00:30:05 · 1632 阅读 · 2 评论 -
Jetpack All In Compose ?看各种Jetpack库在Compose中的使用
Jeptack Compose 主要目的是提高 UI 层的开发效率,但一个完整项目还少不了逻辑层、数据层的配合。幸好 Jetpack 中不少组件库已经与 Compose 进行了适配,开发者可以使用这些 Jetpack 库完成UI以外的功能。Bloom 是一个 Compose 最佳实践的 Demo App,主要用来展示各种植物列表以及详细信息。接下来以 Bloom 为例,看一下如何在 Compose 中使用 Jetpack 进行开发1. 整体架构:App Architecture在架构上,Blo原创 2021-06-15 12:47:46 · 14376 阅读 · 34 评论 -
Jetpack Compose 架构比较:MVP & MVVM & MVI
本次 I/O 大会上曝出了 Compose 1.0 即将发布的消息,虽然 API 层面已趋于稳定,但真正要在项目中落地还少不了一套合理的应用架构。传统 Android 开发中的 MVP、MVVM 等架构在声明式UI这一新物种中是否还依旧可用呢?本文以一个简单的业务场景为例,试图找出一种与 Compose 最契合的架构模式Sample : Wanandroid SearchApp基本功能:用户输入关键字,在 wanandroid 网站中搜索出相关内容并展示功能虽然简单,但是集合了数据请求、U.原创 2021-06-01 00:55:46 · 4777 阅读 · 38 评论 -
Compose 1.0 将于7月正式发布,还不了解一下?
前几天结束的 Google I/O 大会上释放了 Compose 1.0 即将于7月发布的消息。其实从年初 Beta 版的一系列造势活动就能看出 Google 在 Compose 推广上的决心之大。如今随着稳定版的到来,现在正是学习 Compose 的好时机,本文将带大家了解一下 Compose 将为 Android 开发带来哪些变化。1. 为什么要用 Compose ?Jetpack Compose is Android’s modern toolkit for building native.原创 2021-05-26 03:21:33 · 777 阅读 · 11 评论 -
Jetpack Compose: java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from DecorView
问题升级了一下Compose版本(1.0.0-beta01 -> 1.0.0-beta05),当打开Activity或者Fragment时报出如下错误: java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from DecorView@58d6ed7[MainActivity] at androidx.compose.ui.platform.WindowRecomposer_androidKt.c原创 2021-05-23 20:56:19 · 2670 阅读 · 7 评论 -
用Jetpack Compose做一个俄罗斯方块游戏机
本文介绍如何使用Jetpack Compose打造一个经典版的俄罗斯方块游戏。玩过上面这种游戏机的朋友应该会对本文内容感到亲切,废话不多说,先看东西:1. 为什么Compose适合做游戏?通常一个游戏程序的执行流程如下所示:简单说就是一个不断等待输入、渲染界面的过程。这种模型非常符合当下前端的开发思想:数据驱动UI。 因此基于各种前端框架的小游戏层出不穷。相比之下,用客户端开发同类应用成本则会高出不少。如今有了Compose,客户端终于在开发范式上追上了前端的步伐,像前端那样开发小游戏成原创 2021-04-20 10:00:22 · 2556 阅读 · 19 评论 -
Jetpack Compose:理解composable的重组范围(Recomposition Scope)
不少初学Compose的同学都会对Composable的Recomposition(重组or重绘)机制心生顾虑,担心大范围的Recomposition是否会影响性能。其实Compose的Compiler在编译期做了大量工作,保证了Recomposition的范围尽可能的小,从而避免无效开销。那么Recomposition的范围究竟是怎样的呢?我们通过一个例子来了解一下@Composablefun Foo() { var text by remember { mutableStateOf("")原创 2021-04-12 21:08:20 · 2501 阅读 · 2 评论 -
告别GIF,使用Jetpack Compose打造可爱的天气动画
1. 项目背景最近,为了参加Jetpack Compose挑战赛的终极挑战,使用Compose完成了一个天气app。之前几轮挑战也都有参与,每次都能学到不少新东西。如今迎来最终挑战,希望能将这段时间的积累活学活用,做出更加成熟和出色的作品。项目中的挑战因为没有美工协助,所以我考虑基于代码实现app中的所有UI元素例如各种icon等,这样的UI在任何分辨率下都不会失真,更灵活地实现各种动画效果。为了降低实现成本,我将app的UI元素定义成偏卡通的风格,这样可以更容易通过代码绘制,如文章顶部展示的那些.原创 2021-03-28 21:08:42 · 2832 阅读 · 17 评论