首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

掌握 Jetpack Compose 中的 State,看这篇就够了

Jetpack Compose 是响应式 UI 框架。当我们更新 UI 状态时,Compose 会自动刷新 UI,将状态的变化同步到界面上。...有状态的可组合项一般会持有ViewModel的引用,由ViewModel负责计算整个 UI 界面的状态。当界面状态发生了改变,新状态会 UI 界面级别的可组合项一路传递到消费这个状态的子可组合项。...使用mutableStateOf()在ViewModel中创建表示状态的MutableState实例,在ViewModel更新 UI 状态,UI 界面能通过这个暴露出来的状态进行 UI 刷新。...使可组合项保持无状态的方法:状态提升顾名思义,状态提升意味着把任何和状态存储相关的状态可组合项函数中删除,然后通过函数参数将状态的值传进可组合项函数内。...通过修改状态更新可组合项目随着我们越多地使用 Compose 自带的可组合项(如Scaffolds、BottomSheet、Drawer等),我们会意识到在 Jetpack Compose 中状态是无处不在的

7.4K111

【建议收藏】Jetpack Compose编程知识全汇总 (含详细实例讲解)

一、简述 Jetpack Compose是Google I/O 2019 发布的Andorid UI框架,它不同于Andorid常见的Xml+命令式Coding的UI开发范式,而是基于Kotlin的DSL...伴随React Native、Flutter等大前端框架的兴起以及Jetpack Compose、SwiftUI等native框架的出现,声明式UI正逐渐成为客户端UI开发的新趋势。...源码可看出,viewmodel函数底层也是通过ViewModelProvider进行获取的 @Composable fun viewModel( modelClass...如果你是因为缺少学习资料,而我正好薅到这本谷歌内部大佬根据实战编写的《Jetpack Compose最全上手指南》,入门到精通,教程通俗易懂,实例丰富,既有基础知识,也有进阶技能,能够帮助读者快速入门...第一章 初识 Jetpack Compose 1. 为什么我们需要一个新的UI 工具? 2.

6.3K60
您找到你想要的搜索结果了吗?
是的
没有找到

谷歌大佬强势分享《Jetpack Compose 权威指南》,带你参透声明式UI的终极奥义!

目前,能够直接在 Compose 上使用的 Jetpack 库有:Navigation、Paging、ViewModel、LiveData、hilt 、lifecycle 理论上来讲,Android Jetpack...上跟 UI 不相关的库 Compose 应该都是支持的,在我写的Hoo中,就使用了Paging、Navigation、ViewModel和LiveData等 Android Jetpack 库,再有协程和...Preview Compose支持代码的Preview,如图: Compose 代码写完后,可以直接在右边预览,但是更新速度差点意思,不如 Flutter 的热重载方便。...二 如何快速学习Compose 接下来,我将给大家介绍一份谷歌大佬强势分享《Jetpack Compose 权威指南》,手把手教大家Jetpack Compose入门到精通。...深入详解 Jetpack Compose | 优化 UI 构建 Compose 所解决的问题 Composable 函数剖析 声明式 UI 组合 vs 继承 封装 重组 …… 3.

4.1K30

Google推荐在Compose中使用collectAsStateWithLifecycle替代collectAsState

如果您使用 Jetpack Compose 构建 Android 应用程序,请使用 collectAsStateWithLifecycle API 您的UI以生命周期感知的方式收集流。...此类资源可能包括 Firebase 查询、位置或网络更新以及数据库连接。...UI 不应该知道 ViewModel 如何产生 UI 状态。 如果 UI 在屏幕上不可见,则应停止流收集以释放应用程序资源(如果合适)。...UI 可以通过使用 collectAsStateWithLifecycle 收集 UI 状态来帮助释放资源。 ViewModel 可以通过以收集器感知的方式生成 UI 状态来执行相同的操作。...如果您使用 Jetpack Compose 构建 Android 应用程序,请使用 collectAsStateWithLifecycle 可组合函数来执行此操作。

3.1K20

Android Compose开发

声明式 UI通过对比可以看到 Kotin DSL 有诸多好处: 有着近似 XML 的结构化表现力 较少的字符串,更多的强类型,更安全 可提取 linearLayoutParams 这样的对象方便复用...此外,当两项更新以出人意料的方式发生冲突时,也很容易造成异常状态。例如,某项更新可能会尝试设置刚刚从界面中移除的节点的值。一般来说,软件维护的复杂性会随着需要更新的视图数量而增长。...Compose 编程思想 | Jetpack Compose | Android Developers Compose 布局基础知识 | Jetpack Compose | Android...Developers 原创:写给初学者的Jetpack Compose教程,基础控件和布局 原创:写给初学者的Jetpack Compose教程,Modifier 原创:写给初学者的Jetpack Compose...布局 Compose 通过只测量一次子项来实现高性能。单遍测量对性能有利,使 Compose 能够高效地处理较深的界面树。

27410

Jetpack Compose 1.0 正式发布!打造原生 UI 的 Android 现代工具包

例如,Square 告诉我们,通过使用 Compose,他们可以 "专注于 Square 所特有的东西以及 UI 基础设施,而不用解决建立声明性 UI 框架这样宽泛的问题"。...通过完全的声明式方法,您只需描述您的用户界面,剩下的就交给 Compose 来处理。随着应用状态的变化,您的 UI 会自动更新,这使得快速构建 UI 变得更加简单。...通过与 Navigation、Paging、LiveData (或 Flow/RxJava)、ViewModel 和 Hilt 的整合,Compose 可以与您现有的架构完美共存。...通过对字词的实时编辑,您可以实时看到更新,而无需重新编译项目。...文档 - "Compose 编程思想" 、"状态和 Jetpack Compose" 以及 "架构式层级" 这样的基础话题,到核心 API 的使用指南,包括 布局、导航 和 测试,以及针对 开发者工效

1.8K20

Android Dev Summit 21 精彩内容盘点

本次活动围绕这一主旨做了 30 多场技术分享(视频),涉及多个方向: Android 12 12L Building across screens Kotlin Jetpack Jetpack Compose...Jetpack Compose 能更好地以响应式的方式处理 OnConfigurationChanged 时的 UI 变化,非常适合配合在 12L 的设备上使用。...,这也反映出 Android 将 Compose 作为首选的 UI 解决方案的决心。...Jetpack Compose ---- Compose 新增 androidx.compose.material3 库,支持开发 Material You 主题风格的 UI。...Compose @review 最近的 Andorid Studio 版本中对 Compose 的预览功能进行了多项强化:像原生视图那样,支持对 Compose UI 进行 3D 布局预览;对于一些字面值变量的修改无需重新编译即可实现预览的实时更新

1.7K20

回顾 | Android Jetpack 重要更新

在今年的谷歌开发者大会上,我们也为大家介绍了 Jetpack 的重要更新,您也可以 点击此处 到大会官网观看相关视频。...AppCompat 库 AppCompat 库提供了大量向前兼容的 UI 组件和系统功能, Material 主题到 Toolbar 等组件,再到深色主题。...Jetpack Compose — 全新的 Android UI 开发框架 Jetpack Compose 是全新的现代 Android UI 开发框架,目前发布了开发者预览第二版。...您可以查阅我们的 Alpha 版本发布文章、深入详解 Jetpack Compose 之 优化 UI 构建 和 实现原理 等文章了解更多。...获取更多的更新内容,请观看视频: Jetpack Compose 更新速递,欢迎大家尝鲜这些新的更新并积极 向我们反馈。 本文概括了 Jetpack 过去几个月的更新

24040

写给初学者的Jetpack Compose教程,使用State让界面动起来

本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注,每个工作日都有文章更新。 大家好,写给初学者的Jetpack Compose教程第4篇更新了。...UI显示部分很好理解,这里的关键就是如何允许用户通过点击Button来让计数器加1。...这里我又要再次引用 写给初学者的Jetpack Compose教程,为什么要学习Compose? 这篇文章中提到的知识点:声明式UI的工作流程有点像是刷新网页一样。...然后当有任何状态需要发生改变时,只需要像刷新网页一样,让界面上的元素刷新一遍,那么自然状态就能得到更新了。 所以Compose更新UI界面的核心逻辑在于刷新界面,这个概念在Compose中被称为重组。...运行一下程序,效果如下图所示: 通过这样一个实例的演示,相信你已经明白状态提升的好处在哪里了。 但其实这并不是Compose自己独创的编程模式,基本上每一个声明式UI框架都有类似的编程理念。

79420

Jetpack-Compose 学习笔记(五)—— State 状态是个啥?又是新概念?

2.1 ViewModel ViewModel 也是 Jetpack 工具库的成员之一,主要用来存储 UI 展示所需要的数据,谷歌推荐的做法是将 Activity 中的数据都放到 ViewModel 里...通过状态提升可以将有状态组合项转化为无状态组合项。 Compose 推荐使用 ViewModel 来管理状态,包括状态的更新以及存储等。...参考文献 官方文档——在Jetpack Compose 中使用状态 https://developer.android.google.cn/codelabs/jetpack-compose-state...Compose 状态与组合 新小梦 https://juejin.cn/post/6937560914254102565 【背上JetpackViewModel】即使您不使用MVVM也要了解ViewModel...——ViewModel 的职能边界 Flywith24 https://juejin.cn/post/6844904100493017095 Jetpack Compose学习之mutableStateOf

2K30

Google IO 2019 Android 开发者关注些什么?

为了推广 Kotlin , 之前的 first-class 到现在的 Kotlin-first , 再加上,Android 团队将会优先提供 Kotlin 版本的 Jetpack,看来确实是要把 Kotlin...2.2 Jetpack Compose an open-source, Kotlin-based UI development toolkit Jetpack Compose API 可以让开发者用代码声明的方式来构建...为了画 UI 再让我学一堆新东西,我应该不会喜欢它。感觉学它不如把时间花在其他地方。 另外,我看视频的里他们的演示来看,这个东西现在还并不可靠。 未来会怎么样还不知道,保持关注。...如果你有兴趣可以看这里: https://developer.android.com/jetpack/compose https://android.googlesource.com/platform/...for ViewModel Benchmarking LiveData Room 等引入协程?

60110

Jetpack Compose Beta 版现已发布!

我们已经推出了 Jetpack Compose Beta 版,这是我们的全新 UI 工具包,旨在帮助开发者更快速、更轻松地在所有 Android 平台构建原生应用。...我们提供与下列组件的集成: Navigation ViewModel LiveData / Rx / Flow Paging Hilt MDC Compose 主题适配器 和 Accompanist 开发库提供了与...Compose 的编程思想 Jetpack Compose 是一款声明性 UI 工具包,也是当前视图系统的范式转变,您可利用此工具包声明 UI 在任何给定应用状态下的预期外观,而不是如何生成 UI。...Compose 会负责在应用状态更改时更新您的 UI,这样您无需操作界面就能使其转变为预期状态,省去了繁琐的流程,并且可以避免出错。...开始学习 Compose 为了帮助您和团队学习关于 Jetpack Compose 的所有内容,我们更新了 学习计划,同时提供了一系列精心规划的视频、Codelab 和重要文档,帮助您入门。

5.6K10

Android Jetpack 更新一览

下面让我们一起看看 Jetpack 最新的更新情况,如果您已观看 Jetpack 更新一览 演讲的话,本文会做进一步的补充,请别错过!...此外,Hilt 现在已经与 Navigation 和 Compose 集成: 您可以获得一个注释的 Hilt ViewModel,其作用范围是目的地或导航图本身。...Jetpack Compose Jetpack Compose 是用于在 Android 上构建原生 UI 的现代工具包,简化并加速了 Android 上的 UI 开发。...Jetpack Compose 目前处于 Beta 版本,并计划 在 7 月份发布稳定版。本文提到的许多库,以及您可能已经在使用的其他库,都专门推出了与 Jetpack Compose 集成的功能。...包括 Activity、ViewModel、Navigation 和 Hilt,所有这些库都可以帮助您在应用中更顺利地使用 Compose。请 观看 Google I/O 演讲 进一步了解相关细节。

1.5K20

MVVM 成为历史,Google 全面倒向 MVI

总得来说,Activity或Fragment中的代码应该尽量精简,尽量将业务逻辑迁移到其它层 通过数据驱动界面 另一个重要原则是您应该通过数据驱动界面(最好是持久性模型)。...我们一般使用ViewModel作为UI State的容器,因此响应用户输入更新UI State主要分为以下几步: ViewModel 会存储并公开UI State。...UI State是经过ViewModel转换的应用数据。 UI层会向ViewModel发送用户事件通知。 ViewModel会处理用户操作并更新UI State。...举个例子,如果用户需要给新闻列表加个书签,那么就需要将事件传递给ViewModel,然后ViewModel更新UI State(中间可能有数据层的更新),UI层订阅UI State订响应刷新,从而完成页面刷新...这种分离可让UI只发挥其名称所表明的作用:通过观察UI State变化来显示页面信息,并将用户输入传递给ViewModel以实现状态刷新。 换句话说,单向数据流动有助于实现以下几点: 数据一致性。

1.8K10

聊聊类组件到函数组件的变迁

最近一直在学习 React,在看到 React Hooks 一章时联想到 Compose ,简直有着异曲同工之处,他们都是由 UI 组件、State 状态、Effect 副作用构成,而且,Android...1、基于类组件的对比 原生 对于原生 Android 来说,通过 Activity 类来承载当前界面的 UI ,例如如下示例: class HomeActivity extends Activity{...都能通过一个函数来替代原来类组件的开发方式,但对于 Compose 来说,仅仅监听组件的 挂载、更新与卸载 往往是不够的,手机端与 PC 端不同,手机端有一些特殊的逻辑需要在息屏与亮屏的时候做一些操作...,这是 PC 不会有的场景,所以,对于 React 来说,这三种足够满足业务诉求的开发,对于 Jetpack Compose 来说,官方也考虑到了这种情况,如下是官网监听 onStart、onStop.../docs/hooks-effect.html [2] Compose 中的附带效应: https://developer.android.com/jetpack/compose/side-effects

3.5K20
领券