作者 / 开发者关系工程师 Jeremy Walker 在今年的 Google I/O 大会 上，我们宣布将 Jetpack Compose 的优秀特性引入 Wear OS。...除此之外，您在使用 Jetpack Compose 构建移动应用的经验，也可以直接运用在 Wear OS 版本上。...尽管从技术上说，可以在 Wear OS 上使用移动依赖项，但我们还是建议您使用专用于 Wear 的版本以获取最佳体验。 注意: 我们将在未来版本中添加更多 Wear 可组合项。...此版本添加了对开箱即用的滑动关闭手势的支持 (类似于移动设备中的返回按钮/手势)。...Scaffold 可支持 Wear 专属布局，并提供时间、曲线文本样式及滚动/位置指示器等顶层组件。
在 Compose for desktop 的早期版本中，他们为 IntelliJ 增加了一个桌面项目引导，可以让我们在几秒内配置好项目。...我们需要从项目模板列表中挑选桌面模板，向下滚动就能找到。然后你需要选择项目的 JDK，这里我建议使用 JDK 11。 ? 然后点击“Next”按钮，这将会跳转至确认 Compose 模块的界面。...文字的按钮。如果你点击它，按钮里面的文字就会变成“Hello, Desktop!”，来看一下实际体验的效果吧。 ?...在这种情况下，我们只需要把值传给内容参数，其余的参数保留默认值即可。在接下来的代码中，我们声明了一个具有 remember 功能的 text 变量，其初始值为 Hello, World!。...在诸如按钮、文本字段等 UI 组件中，我们使用 remember 作为文本的状态，这样当我们在未来更新这个 text 变量时，与该变量相关的视图也会更新显示文本。
另外 Compose 里的代码基本都是可以被混淆的，所以开启混淆之后代码的压缩率也很高。 手动操纵视图会提高出错的可能性。如果一条数据在多个位置呈现，很容易忘记更新显示它的某个视图。...滚动 在 View 中的话，通常可以在需要滚动的内容之外再嵌套一层 ScrollView 布局，这样 ScrollView 中的内容就可以滚动了。...) 其他 //ViewPager2, 通过将此状态对象保存在组件中，可以确保当组件重新合成时，分页状态不会丢失。...它控制了视图在屏幕上的显示顺序。具有较高 zIndex 值的视图将显示在具有较低 zIndex 值的视图之上。 默认情况下，视图的 zIndex 值为0。...Compose 中的一个函数，用于在协程中执行副作用操作。
3.3 布局和性能 在 MDC 中，我们使用 RecyclerView 配合 LayoutManager 实现复杂布局，这种方法虽然成熟，但可能需要手动优化滚动性能。...Jetpack Compose 的 LazyColumn 和 LazyRow 提供了内置的性能优化机制，处理长列表时会自动实现惰性加载，不会加载屏幕外的内容，提升性能。...在 Jetpack Compose 中，实现类似动画效果可以通过 animate*AsState 或 LaunchedEffect 管理 UI 变化。...++ }) { Text("Nim已点击了$count times") } 在 Compose 中，状态的变化（count++）直接触发 UI 的更新，而不需要手动去找这个按钮再更新它的文本内容...这种手动操作会导致代码更加重复且容易出错，特别是在处理复杂状态时。 Jetpack Compose：自动重新组合 UI Compose 的状态管理很简单。
(rememberScrollState())) { } Modifier.horizontalScroll() 水平滚动 Modifier.verticalScroll() 垂直滚动 注意:compose...似乎不支持一个水平滚动嵌套垂直滚动(或垂直滚动中嵌套水平滚动),所以相应布局需要合理设计 此外,提及下,如果想使用像ListView或RecyclerView那样的列表组件,在Compose中可以使用LazyRow...= null, elevation: Dp = 1.dp, content: @Composable () -> Unit ) shape 形状,使用详见Jetpack Compose学习...(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 backgroundColor 背景色 contentColor 内容的背景色...border 边框,使用详见Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 elevation
在 Google Play 中，绝大多数应用都使用了 Jetpack 实现应用架构。今天，在排名前 1,000 的应用中，超过 90% 使用了 Jetpack。...Navigation 组件现已通过 navigation-compose 组件集成到了 Jetpack Compose 中，从而允许可组合函数作为您应用中的目的地。...Jetpack Compose Jetpack Compose 是 Android 用于构建原生界面的现代工具，如今已更新至 1.2 beta 版。...新版本添加了一些用于支持先进用例的功能，包括支持可下载字体、惰性布局及嵌套滚动互操作性。更多信息请参阅文章: 一起看 I/O | Jetpack Compose 中的新特性。...拖放 新的 DragAndDrop 通过让开发者接收来自应用内外的拖放数据，来帮助在新的外形和窗口模式下实现功能。
书接上篇的Compose文章，写给初学者的Jetpack Compose教程，Lazy Layout。...我在 写给初学者的Jetpack Compose教程，使用State让界面动起来 这篇文章中有详细介绍State的用法。 那么上述代码中，clickCount就是一个State变量。...根据这个特性，我们会发现，每当点击一下按钮，MainLayout函数都会发生一次重组。但实际上，只有在第5次点击按钮的时候，界面才会发生一次UI变动，其他时候UI都是不会变化的。...重新运行一下程序，效果如下图所示： 可以看到，随着Lazy Layout向下或向上滚动，这行日志在反复不断地打印，由此说明MainLayout函数在Lazy Layout的滚动过程中一直在发生重组，那么...让我们重新审视一下题目。 只有firstVisibleItemIndex为0，也就是列表中第一个子项元素可见的时候，Fab按钮才显示，否则将按钮隐藏。
在分析了各种选择后，我们做出了 (在当时) 一个大胆的决定——使用当时还处于 Alpha 预览阶段的 Jetpack Compose。...开发者的工作效率 一年多来 ，我们一直在使用 Jetpack Compose 编写用户界面代码，也得益于 Jetpack Compose 让界面开发变得更加简单。...重复使用界面组件 是使 Compose 在渲染方面表现出色的 核心机制，尤其是在滚动情况下。...当在 Play 商店中创建在滚动情况下频繁使用的大量重复使用界面组件时，我们发现不必要的重组会增加丢失的帧时间，从而导致卡顿。...在最初的集成实验中，我们遇到了双栈问题: 在单个用户会话中同时运行 Compose 和视图类渲染非常占用内存，尤其是在低端设备上。
Compose 在社区中的反响 我们看到 许多公司已经在大规模采纳 Compose 为其应用开发最新、最具创造性的功能。...与此同时，Twitter 也已经在应用的不同部分使用了 Jetpack Compose 并从中受益，因为 "Compose 让我们更容易定义自己的组件，并使它们的 API 更明确、灵活和直观。"...Compose 现已支持文本放大镜。 拖动选择图标时会显示放大镜，以便于您查看指尖下方的内容。...与 CoordinatorLayout 互操作 从现在起，当您在 View 系统的 CoordinatorLayout 中嵌套了一个支持滚动的可组合项时，您可以确保它们的滚动行为是可互操作的。...在 I/O 演讲 Jetpack Compose 中常见的性能问题 中，Compose 团队介绍了常见的性能错误以及这些错误的解决方法。
因此，我们最后得到一个按词换行的菜单。 如需详细了解固有特性测量，请参阅 Jetpack Compose 中的布局 Codelab 中的 "固有特性" 部分。...Body 会使用滚动状态进行设置以使内容能够垂直滚动。在 Title 等其他组件中可以观察滚动位置，而我们的观察方式会对性能产生影响。...由于滚动状态是从组合中读取的，任何更改都会导致重组，在重组时，还需要进行布局和绘制这两个后续阶段。 不过，我们不是要更改显示的内容，而是更改内容的位置。...我们还可以进一步提高效率，通过修改一下实现，不再接受原始滚动位置，而是传递一个可以提供滚动位置的函数: @Composable fun Title(scrollProvider: () -> Int)...如需了解更多，请查阅以下列出的资源: Jetpack Compose 使用入门文档 Jetpack Compose 学习路线图 Jetpack Compose 相关示例
在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin 语言实现使用Jetpack Compose和Kotlin开发NimWebViewApp的加载和操作的案例。...一、项目背景 本文展示如何使用 Jetpack Compose 中的 AndroidView 加载 WebView，处理页面的加载状态和返回导航操作。...{ isLoading.value = false } 2.3 处理返回按钮 在浏览器类的App中，用户希望通过返回键返回上一页。...（1）搜索按钮：点击右侧的搜索按钮，WebView 会加载用户输入的 URL。 （2）下拉刷新：使用 SwipeRefresh 实现下拉刷新功能，可以在页面上拉时重新加载当前的网页。...（3）WebView：通过 AndroidView WebView 集成到 Jetpack Compose 中，启用了 JS 功能，大多数现代网站可以正常加载。
在发布 Jetpack Compose 1.2 版本的同时，官方还发布了 Compose for Wear OS 1.0 ——使得 Compose 也支持 Wear OS 应用开发。...Jetpack Compose 是官方推荐的为手机、平板和可折叠设备开发新安卓应用的框架。...谷歌的安卓开发者关系工程师 Kseniia Shumelchyk 说：“在大多数情况下，基于 Compose 的 UI 可以减少代码量并加快开发过程。”...智能手机应用程序开发人员在 Compose 1.2 中获得了一些重要更新。Lazy grids，通过只对网格的可见部分进行合成来提高性能，已经从实验阶段转为稳定阶段。...此外，动画支持中添加了缓动曲线，用于实现快速加速和逐渐减速等效果。还有嵌套滚动支持和新的鼠标事件，以及各种错误修复。
了解到许多小伙伴还没开始学习Compose，所以我写了一篇基础文章，让我们一起轻松上手Compose～ 在这篇文章中我们将初步了解 Jetpack Compose，并学习可组合函数、基本布局和状态以及主题等基础知识...Jetpack Compose是什么 Jetpack Compose 是用于构建原生 Android 界面的新工具包。...我们是在Activity中编写Java/Kotlin的代码，在XML中编写布局代码，这种方式是我们已经使用了很久的方式，而Jetpack Compose完全抛弃了之前的方式，新创造了一种“使用代码”编写页面的方式...快来一起学习一下吧～ 延迟列表组件 Compose为我们提供了LazyColumn和LazyRow组件，相当于XML中的RecycleView组件，从名字中我们也可以知道一个是垂直滚动一个是水平滚动。...不知道你有没有发现，截图中的顶部和按钮颜色都是褐色的，并且文字也有默认的颜色，这都是Compose中的主题帮我们设置好的，最后我们一起简单了解一下吧～ Compose主题 在初识Compose项目中，我们已经知道
• 两个按钮：分别为“Cancel”按钮和“Next”按钮。...二、项目开发 2.1 添加项目依赖项 在项目的 build.gradle 文件中添加 Compose 和 Material 3 的依赖项： dependencies { implementation...• 解决方案：在 onValueChange 中处理输入验证，通过动态更新错误提示提升用户体验。利用 Text 和 Color 的组合，要多思考怎么设计直观的错误提示样式。...3.3 声明式导航与组件解耦 • 难点：在 Compose 中，声明式导航和传统的 Fragment 和 Activity 导航有很大区别，特别是在状态的保留和恢复。...相信 Jetpack Compose 在未来几年成为 Android UI 开发的主流工具，希望这篇文章能对大家有所帮助！！
我全身心投入在 Jetpack Compose 和 Material Design 3（M3）的学习和实践中，这是一个用 Jetpack Compose、M3 和 Kotlin 语言实现了NimReplyApp...为什么选择 Jetpack Compose 和 Material Design 3？...这个组件使用了 Jetpack Compose 提供的状态管理和 LazyColumn 展示搜索结果。...导航按钮：在左侧的返回按钮，当用户点击时会触发 onBackPressed 回调，通知父组件进行返回操作。...操作按钮：右侧的 MoreVert 图标（更多选项按钮），用于扩展后续的功能（如收藏、分享等）。
为了演示一下这个功能，我们就让点击按钮时弹出一个Toast提示吧。...这需要回顾一下我们在上一篇文章中提到的声明式UI的编程思想，还没看过的朋友请参考 写给初学者的Jetpack Compose教程，为什么要学习Compose？...不过正好由于Row中的内容显示不下，我想借这个机会来讲一下如何允许用户通过滚动的方式来查看超出屏幕的内容。...而像我们当前遇到的这种情况，在View中的话，通常可以在需要滚动的内容之外再嵌套一层ScrollView布局，这样ScrollView中的内容就可以滚动了。...参数上面又串接了一个horizontalScroll函数，这个函数有一个ScrollState参数是必填参数，它是用于保证在手机横竖屏旋转的情况下滚动位置不会丢失的，通常可以调用rememberScrollState
大家好，写给初学者的Jetpack Compose教程又来了。 经过前面4篇文章的学习，相信大家都已经成功入门了Compose编程。...但是如果我告诉你，在Compose中只需要编写这些代码就能实现完全相同的效果，你还能坐得住吗？...因此最好的设计方案就是，当用户向下滚动列表时，我们就认为用户不再需要和Fab按钮交互，此时将按钮进行隐藏。 下面具体看一下如何在Compose中实现这种效果。...现在可以运行一下程序看看效果了： 正如我们所期待的那样，当A元素在屏幕上可见的时候，Fab按钮也是可见的。当A元素滑出了屏幕，Fab按钮也会随之消失。...在默认情况下，一个Composable函数是否要发生重组，除了使用我们上篇文章中学习的State之外，当Composable函数的位置发生了变动，也会触发重组行为。
Android 12 新增了隐私仪表盘功能 (Privacy Dashboard)，展示了过去 24 小时内所有应用对麦克风、摄像头、以及位置的访问情况。...Jetpack Compose 是 Android 的现代原生 UI 工具包，它可以简化并加快 Android 上的界面开发，使用更少的代码、强大的工具和直观的 Kotlin API，助力开发者更好更快地打造更优质的应用...1.1 版本的 Jetpack Compose 改进了 API，提供了诸多功能，比如针对 Android 12 的拉伸滚动、改进触摸目标尺寸，以及还在实验中的布局动画等等。...Jetpack Compose 在 Android Studio 中，提高了刷新频率，还可以在布局检查器中查看语义树。...今年谷歌公布了新的 Wear OS，使用 Jetpack Compose 简化，可覆盖多个版本和不同的 API，可以助力开发者加速 UI 开发，设计出优质的应用，同时显著减少了代码量。
在 Compose 中，在构建界面的时候，无需在像之前那么构建 XML 布局，只需要调用 Jetpack Compose 函数来声明你想要的的元素，Compose 编译器就会自动帮你完成后面的工作。...widthDp: Int: 在Compose中渲染的最大宽度，单位为dp。 heightDp: Int: 在Compose中渲染的最大高度，单位为dp。...Compose 提供了声明性 API ，可以在不以命令的方式改变前端视图的情况下呈现应用界面，从而使得编写和维护界面变得更加容易。...组合函数 Jetpack Compose 是围绕可组合函数构建的，这些函数就是要显示在界面上的元素，在函数中只需要描述应用界面形状和数据依赖关系，而不用去关系界面的构建过程， 如果需要创建组合函数，只需要将...，单选/复选按钮，高亮选中的文本，链接和标题 secondaryVariant: Color, // 用于区分强调色 background: Color, // 背景色，在可滚动项下面展示
您可以在 Android 视图中嵌入 Compose UI，并在 Compose 中使用视图。我们在 互操作性文档 中提供了多种应用策略。...Compose 的编程思想 Jetpack Compose 是一款声明性 UI 工具包，也是当前视图系统的范式转变，您可利用此工具包声明 UI 在任何给定应用状态下的预期外观，而不是如何生成 UI。...Compose 完全使用 Kotlin 构建，可利用其优秀的 语言特性 提供功能强大、简洁且直观的 API。例如，借助 协程，我们可以编写更简单的异步 API，如描述手势、动画或滚动。...第二周挑战正在进行中，点击此处 了解详情。 随着 Jetpack Compose Beta 版的推出，针对 1.0 版的稳定 API 和功能均已构建完成。...我们期待收到您对在应用中采用 Compose 的 反馈，您也可以在 Kotlin Slack 的 #compose 频道中参与讨论或在下方留言区和我们分享。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
