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

2022 JetPack Compose开发应用指南新鲜出炉,速速查看

JetPack Compose Jetpack Compose 是Google2019年发布的一个Android原生现代UI工具包,它完全采用Kotlin编写,可以使用Kotlin语言的全部特性,可以帮助你轻松...如果说19年JetPack Compose刚问世的时候还存在许多问题,大多数开发人员都持观望态度,但现在马上迎来22年,JetPack Compose经过了很多个版本的更新,变化非常大,对于更多的开发者来说...JetPack Compose开发应用指南 下面给大家介绍一下《JetPack Compose开发应用指南》,指南包括七个章节,内容涵盖了:Compose的设计原理和基本概念、Compose入门案例与实战...这些组件可帮助你遵循最佳做法、让你摆脱编写样板代码的工作并简化复杂任务,以便你将精力集中放在所需的代码上。...] 第七章 Compose核心控件总结 Scaffold LazyColumn [image.png] 结尾 Android开发程序员的竞争越来越激烈,市场对Android开发人员的要求也会越来越高,所以作为技术人员对待新技术的出现始终要保持好学的态度

2.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    欢迎体验 | Wear OS 版 Compose 开发者预览版

    作者 / 开发者关系工程师 Jeremy Walker 今年的 Google I/O 大会 上,我们宣布将 Jetpack Compose 的优秀特性引入 Wear OS。...顺利发布多个 alpha 版本之后,Wear OS 版 Compose 现已推出开发者预览版。...除此之外,您在使用 Jetpack Compose 构建移动应用的经验,也可以直接运用在 Wear OS 版本上。...这就意味着面向 Wear OS 设计时,您搭配 Jetpack Compose 使用的许多依赖项不会发生变化。例如,UI、运行时间、编译器和动画依赖项都将保持不变。...您可在下方应用中看到,内容屏幕顶部和底部被缩减和淡化,以提高可读性: 查看代码,您可看到代码与 LazyColumn 相同,只是名称不同。

    1.6K10

    Jetpack-Compose 学习笔记(二)—— Compose 布局你学会了么?

    查看源码会发现, ContentAlpha.kt 中将 LocalContentAlpha 同样使用了 compositionLocalOf 方法设置了它的默认值为 1f,而在这里就重新赋值为 0.74f...List 中布局的使用 笔记一中,我们见识到了 Compose 使用 LazyColumn 来实现一个可滑动的 List,其实实现一个可滑动的 List 并不需要用到 LazyColumn,只需要用...所以一般是使用 LazyColumn 来展示列表数据,LazyColumn 开始时并不会把所有的列表数据都加载进内存,它会先将展示屏幕上的列表数据加载进内存,当滑动查看更多列表数据时,才会将这些数据加载到内存中...下面是横竖屏的显示效果: 图 18 竖屏显示 图 19 横屏显示 第二篇 Compose 学习笔记终于完成,Compose 的布局你学会了么?...参考文献 https://developer.android.google.cn/codelabs/jetpack-compose-layouts?

    3.1K31

    从0上手Jetpack Compose,看这一篇就够了~

    了解到许多小伙伴还没开始学习Compose,所以我写了一篇基础文章,让我们一起轻松上手Compose~ 在这篇文章中我们将初步了解 Jetpack Compose,并学习可组合函数、基本布局和状态以及主题等基础知识...Jetpack Compose是什么 Jetpack Compose 是用于构建原生 Android 界面的新工具包。...我们是Activity中编写Java/Kotlin的代码,XML中编写布局代码,这种方式是我们已经使用了很久的方式,而Jetpack Compose完全抛弃了之前的方式,新创造了一种“使用代码”编写页面的方式...${i + 1}课,快来学习吧~") } } }) LazyColumn API 会在其作用域内提供一个 item 元素,并在该元素中编写各项内容,当然实际项目中我们可能会把数据包装起来...相信你很快可以编写出下面的代码: @Composable fun more(title: String) { var expanded by remember { mutableStateOf

    95231

    写给初学者的Jetpack Compose教程,Lazy Layout

    大家好,写给初学者的Jetpack Compose教程又来了。 经过前面4篇文章的学习,相信大家都已经成功入门了Compose编程。...但是如果我告诉你,Compose中只需要编写这些代码就能实现完全相同的效果,你还能坐得住吗?...我们需要根据不同的场景需求,采用与其所相对应的Compose控件。 比如上述例子中使用的LazyColumn,它就是用于垂直方向上滚动的可复用列表。...下面具体看一下如何在Compose中实现这种效果。...最后MainLayout()函数中将以上两个函数都包含进去,并加了一个布尔变量,只有firstVisibleItemIndex为0,也就是列表中第一个子项元素可见的时候,Fab按钮才显示。

    51110

    Android | Compose 初上手

    Compose 中,构建界面的时候,无需像之前那么构建 XML 布局,只需要调用 Jetpack Compose 函数来声明你想要的的元素,Compose 编译器就会自动帮你完成后面的工作。...组合函数 Jetpack Compose 是围绕可组合函数构建的,这些函数就是要显示界面上的元素,函数中只需要描述应用界面形状和数据依赖关系,而不用去关系界面的构建过程, 如果需要创建组合函数,只需要将...例如下面代码,应该将 sp 读取的操作放在 viewmode 中,然后回调中触发更新: @Composable fun SharedPrefsToggle( text: String,...重组跳过尽可能多的内容 如果界面某些部分无需,Compose 会尽力只重组需要更新的部分。这意味着,他可以跳过某些内容以重新运行单个按钮的可组合项,而不执行树中其上面或下面的任何可组合项。...这篇文章主要讲了一下 Compose 中最基本的一些 核心思想以及 UI 函数以及主题啥的。这也是我最开始接触到 Compose 学到的东西,所以这也算是我的学习笔记吧。

    5.3K20

    写给初学者的Jetpack Compose教程,用derivedStateOf提升性能

    大家好,写给初学者的Jetpack Compose教程又更新了。 虽然我的进度很慢,但这个系列的教程还没有停更。...书接上篇的Compose文章,写给初学者的Jetpack Compose教程,Lazy Layout。...我 写给初学者的Jetpack Compose教程,使用State让界面动起来 这篇文章中有详细介绍State的用法。 那么上述代码中,clickCount就是一个State变量。...最后MainLayout()函数中将以上两个函数都包含进去,并加了一个布尔变量,只有firstVisibleItemIndex为0,也就是列表中第一个子项元素可见的时候,Fab按钮才显示。...没错,这段代码有非常严重的性能陷阱,下面我们就来仔细分析一下。

    17300

    Compose跨平台第一弹:体验Compose for Desktop

    前言 Compose是Android官方提供的声明式UI开发框架,而Compose Multiplatform是由JetBrains 维护的,对于Android开发来说,个人认为学习Jetpack Compose...添加头像 接着我们再来添加头像显示,我们将下载好的图片资源放在resources目录下 然后使用Image组件将头像显示出来即可,代码如下所示。...这部分代码相信使用过Jetpack Compose的都可以看得懂。 运行程序,点击X号,弹出退出确认弹窗,点击确定,应用程序将退出。效果如下图所示。...            } catch (e: Exception) {             }         }     }) {         Text(text = "请求数据")     }     LazyColumn...写在最后 当然,Compose For Desktop中还有许多的组件,比如Tooltips、Context Menu等等,这里无法一一介绍,需要我们使用的时候去实践,我们将在后面的N弹中持续探索.

    2.1K30

    如何写一个Compose状态页组件 (修正篇)

    在上个月前,我写了这样的一篇文章,开源 | 如何写一个好用的 JetPack Compose 状态页组件 。...缓存了这个 value ,当其改变后,从而触发外部使用者的重组,当然我们也可以传递一个 key 进来,从而当 key 改变后,触发 LaunchEdEffect 的重新执行,而我们就可以将刷新的一些工作放在其附带的挂起函数里中...优化,如何能更实用 compose 中,状态的改变其实我们都应该考虑到是否会对其他组件造成不必要的重组影响,所以 compose 中我们应该尽量保证每个组件都 保持独立 。...我们先看一下通用的设计思路,LazyColumn 就相当于 Android 中的 RecyclerView ,而我们如果要监听 LazyColumn 列表当前状态时,就需要手动传递一个 state 进去...本篇,我们从传统命令式的视角切回到了声明式实现思路,重新实现了一个 Compose 中的状态页组件,具体实现与细节大家可以看 上述源码,也可以也可以根据自身业务进行更改。

    1K10

    【译】JetPack Compose for Desktop 初体验

    目前为止,我们只 Android 开发中看到 Jetpack Compose[2]。...开始开发之前,你需要安装 IntelliJ IDEA[3] 2020.3 或更高版本。 使用项目模版快速开始 正如我前面所说,项目模板是 IntelliJ 最好用的东西之一。...由于某些原因,Main.kt 右上角的“运行”按钮旁边没有被默认选中,所以它会要求你配置项目。为了解决这个问题,你需要在 Main.kt 文件内的主函数旁边点击绿色的“运行”按钮。...运行成功后,你会看到下面的输出结果,有一个包含“Hello, World!”文字的按钮。如果你点击它,按钮里面的文字就会变成“Hello, Desktop!”,来看一下实际体验的效果吧。 ?...如下所示: 总结 目前,Jetpack Compose 桌面和安卓上都处于非常早期的阶段,但它仍然展现出为构建 UI 所作出的巨大进步。

    5.1K30

    原创|Android Jetpack Compose 最全上手指南

    今年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose是一个声明式的UI...中将app支持的最低API 版本设置为21或更高,同时开启Jetpack Compose enable开关,代码如下: android { defaultConfig { .....创建一个支持Jetpack Compose的新应用 比起现有应用中接入Jetpack Compose ,创建一个支持Jetpack Compose 的新项目则简单了许多,因为Android Studio...原来的安卓原生布局中,显示图片有相应的控件ImageView,设置本地图片地址或者Bitmap就能展示,Jetpack Compose 中该如何显示图片呢?...但是有一个限制,那就是composable函数不能有参数 满足下面两个条件: 函数没有参数 函数前面添加@Preview注解 预览效果图如下: 当布局改变了之后,顶部会出现一个导航条,显示预览已经过期

    6.3K20

    我参加了Jetpack Compose开发挑战赛

    接下来的四周时间里,Google每周都将发起一个挑战项目,以帮助开发者能够更加熟练地使用Jetpack Compose来构建出色的应用。...Jetpack Compose这个库虽然我之前也算是有些了解,但现在几乎约等于完全不懂。因为我在学习Jetpack Compose的时候,它还属于非常非常早期的版本,API极其不稳定。...等以后对Jetpack Compose熟悉了之后,我可能会专门写一系列的文章来讲解这个库。 下面讲一讲首周的挑战项目吧。...至于具体的代码我就不贴出来了,因为基本都是Jetpack Compose相关的代码,而我本篇文章中是不准备讲解Jetpack Compose的。...尽管很多东西我都还不会,就这样边查边写,我还是一天时间内把这个项目给做出来了。效果非常简单,不过最基本的项目要求都满足了,如下图所示: ?

    92220

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

    是的,这些东西我们依然 Compose 中运用,从而降低我们的上手难度。...Android Jetpack 的支持 Compose 刚刚发布的时候,Android Jetpack 中的很多其他库都第一时间给予了 Compose 支持,从而丰富了 Compose 的开发生态。...上跟 UI 不相关的库 Compose 应该都是支持的,我写的Hoo中,就使用了Paging、Navigation、ViewModel和LiveData等 Android Jetpack 库,再有协程和...谷歌官方的 《Jetpack Compose 使用前后对比》 一文说道:Tivi应用在使用了 Compose 后,我们发现 APK 大小缩减了 41%,方法数减少了 17%。...以上资料都已打包整理好,需要的朋友扫描下面二维码添加「月亮老师」报名练营领取!

    4.2K30

    实战 | 应用中使用 Compose Material 3

    Material You 是下一代 Material Design 的发展方向,也是一种全新的设计愿景: 方便您打造个性化的样式设计、满足各种需求并自适应各种屏幕;Jetpack Compose 是用于构建原生...新的 Compose Material 3 Jetpack 库 现已发布 Alpha 版,它基于 Material Design 3 规范,包括了更新后的主题、组件以及动态配色这类 Material You...Jetchat 是一款使用 Jetpack Compose 构建的示例聊天应用,目前使用 Material Design 2 中的主题和组件。...下面我们来看看 Jetchat 中的一个例子。个人资料界面上有一个用于撰写消息的扩展 FAB,该组件已从 Material 2 更新为 Material 3 版本。...MDC-AndroidCompose Theme Adapter 库 是一款支持重用 Android XML 主题的 Material 组件,以方便我们 Jetpack Compose 中设置主题。

    2.8K20

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    热门标签

    领券