2020 年，我开始了缓慢迁移 Tivi UI 的任务，目标是使其转为由 Jetpack Compose 编写。大约 12 个月之后，任务完成！...每个界面都使用 Fragment 实现，随后在主 app 模块中使用 AndroidX Navigation 将它们结合起来。...为了让您对架构有一个直观印象，下面是应用的模块图: △ Tivi 的模块图，使用 Jake Wharton 所提供的，十分方便的 Gradle 任务 生成 由于导航图使用 深度链接 URI 实现，大多数...，同时每个 Fragment 的 UI 使用了 Jetpack Compose 实现。...您可以查看我们发布的文章来了解更多: 深入详解 Jetpack Compose | 优化 UI 构建 深入详解 Jetpack Compose | 实现原理 注意事项 关于上面的所有结果，有些事项需要注意
此外，我还讨论了 Compose 的思维模型、您应如何考虑使用 Compose 编写代码，以及如何创建您自己的 API。 在本文中，我将着眼于 Compose 背后的工作原理。...但在开始之前，我想要强调的是，使用 Compose 并不一定需要您理解它是如何实现的。接下来的内容纯粹是为了满足您的求知欲而撰写的。 @Composable 注解意味着什么？...Composer 的实现包含了一个与 Gap Buffer (间隙缓冲区) 密切相关的数据结构，这一数据结构通常应用于文本编辑器。...间隙缓冲区是一个含有当前索引或游标的集合，它在内存中使用扁平数组 (flat array) 实现。这一扁平数组比它代表的数据集合要大，而那些没有使用的空间就被称为间隙。...有时候理解如何实现十分有用，但是未来 Composable 函数的行为与功能不会改变，而实现则有可能发生变化。 同样的，Compose 编译器在某些状况下可以生成更为高效的代码。
Android Jetpack组件 Compose 使用 前言 正文 一、创建Compose项目 1. setContent 2....，我们需要图形界面和xml去创建布局，通过预览达到我们想要的效果，而Jetpack推出的新组件Compose就解决了这个痛点，下面让我们来了解它，使用它。...使用它，来感受声明式UI的强大之处。 正文 Jetpack Compose是一个用于构建原生Android UI的现代工具包。...函数命名就按自己的意思来，这里面是Text就表示通过Compose编辑识别为TextView，然后设置文本值： "Hello $name!"...这里我们就是先设置横向，然后是纵向，预览效果如下： ① 布局填充 上面的这个排版不太好看，都填充满了，我们加一点内填充，这样就完成了填充，相比之前就要好看一些。
在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin 语言实现使用Jetpack Compose和Kotlin开发NimWebViewApp的加载和操作的案例。...一、项目背景 本文展示如何使用 Jetpack Compose 中的 AndroidView 加载 WebView，处理页面的加载状态和返回导航操作。...（2）下拉刷新：使用 SwipeRefresh 实现下拉刷新功能，可以在页面上拉时重新加载当前的网页。...Compose 和 WebView 的结合 用 Jetpack Compose 的 AndroidView 可以轻松实现了传统的 Android 视图控件（如 WebView）嵌入到 Compose...六、总结 本文展示了如何在 Jetpack Compose 中集成 WebView，处理加载状态和返回导航。
在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin语言开发NimDrawaerMenuApp的案例。无论你有没有开发经验，相信这篇文章对你会非常有所帮助。...通过 Jetpack Compose，安卓开发已经从传统的 XML 布局转向了声明式 UI 方式，简化了很多工作。...这个Demo演示利用 Jetpack Compose 和 Material 3 实现一个带有 Drawer 菜单的应用，帮助用户理解工作机制，通过此应用进行页面切换。...在 Jetpack Compose 中，使用 ModalNavigationDrawer 组件构建 Drawer 菜单，根据用户操作动态显示或隐藏菜单。...五、总结 通过这个DrawerMenuAppDemo，展示了如何在Jetpack Compose M3中实现一个带有抽屉菜单的安卓应用，添加更多的菜单项以及对应的页面功能。
前言 大约在一年半前，我发布了Compose的第一篇文章 Jetpack Compose开篇 之 HelloWorld，连我自己也没想到，这一年半的时间中我竟再也没有看过Compose..., 如今Compose...已经发布了稳定版本，还没学会Compose让我的头发又白了许多~ 使用Navigation在Compose中导航 如果你之前不喜欢Android提倡的”单Activity“应用，那么在Compose中相信你会慢慢习惯的...接下来我们来看，如何使用navigation来进行页面导航呢？...这样一来，我们就实现了 普通页面跳转，那么 如果我们在页面跳转的时候需要传递参数 ，该如何去做呢？...总结 除此之外，Navigation 在Compose中还支持深层链接等，关于Compose的更多用法，欢迎持续关注我~
随着 Jetpack Compose 的流行，越来越多的开发者开始转向这种全新的声明式 UI 框架。作为一名聋人独立开发者，我一直在探索新的技术和工具，提高自己的技能和工作效率。...在这篇文章中，我分享使用 Jetpack Compose 和 Material 3 实现一个高级的 NimNavBottomApp 的开发过程，为大家提供开发灵感和实践经验。...一、项目背景 展示 Jetpack Compose 如何简化 UI 的编码，如何使用 Material 3 提供的组件实现现代化的 Android 应用设计。...四、学习笔记 在这个Demo开发过程中，我掌握了如何在 Jetpack Compose 中处理复杂的状态管理，虽然学习成本较高，但掌握了 Compose 的核心思想，很方便开发。...深刻体会到 Jetpack Compose 有未来。 五、总结 通过这个项目，展示了如何使用 Jetpack Compose 和 Material 3 实现一个带有高级功能的底部导航应用。
Jetpack Compose是一个声明式的UI框架，随着该框架的推出，标志着Android 开始全面拥抱声明式UI开发。...三、Jetpack Compose动画 Jetpack Compose提供了一些功能强大且可扩展的 API，可用于在应用界面中轻松实现各种动画效果。...下文将会对Jetpack Compose Animations的常用方法进行介绍。...3.1 状态驱动动画:State Jetpack Compose动画是通过对状态的监听，即监听状态值的变化，使UI能实现自动更新。...Jetpack Compose提供的声明式UI工具包，能做到使用更少的代码实现更多的功能，且代码的可读性和逻辑性也大大提高了。 作者：vivo互联网游戏客户端团队-Ke Jie
前言 Android 开发中我们普遍使用今日头条的适配框架。...今日头条方案： 基于系统将 dp 转换为 px 的公式 px = dp * density 来实现适配，通过在运行时动态修改 density 值的大小，使得修改后计算出的屏幕宽度就等于设计稿的宽度，从而使得在不同屏幕尺寸下我们都可以直接使用设计稿给出的...所以Jetpack Compose中我们也可以参考这种方式做适配。 只适配单方向 假如屏幕 长是817dp，应用只显示为横屏。
为了让 Jetpack Compose 的使用体验更上一层楼，以及了解大家对 Compose 开发、学习方面的内容需求，这里诚邀您参与 Jetpack Compose 使用情况调研, 点击这里 即刻参与调研...我们为此制定了一个长期路线图，来更新商店内从网络层一直到像素渲染的所有内容。在这之中，我们还想要采用现代的声明式界面框架，以实现我们围绕交互性和用户满意度的产品目标。...在分析了各种选择后，我们做出了 (在当时) 一个大胆的决定——使用当时还处于 Alpha 预览阶段的 Jetpack Compose。...开发者的工作效率 一年多来 ，我们一直在使用 Jetpack Compose 编写用户界面代码，也得益于 Jetpack Compose 让界面开发变得更加简单。...我们倾向于 **编写界面时使用更少的代码，有时甚至可以减少 50%**。此项改进的实现得益于 Compose 是一个利用了 Kotlin 简洁性的声明式界面框架。
Jetpack Compose 作为 Android 的新一代 UI 开发框架,提供了非常强大的工具来构建用户界面。 今天,我们就利用 Compose 来实现一个炫酷的验证码输入框!...后来突发奇想利用BasicTextField的decorationBox试试 decorationBox的作用 Jetpack Compose 中的 BasicTextField 有一个 decorationBox...属性,它的作用是:可以使用自定义组件去装饰 BasicTextField。...最终,只有 colors 新设置的背景色生效了 Jetpack Compose 中的 Key 的作用 唯一标识 Compose 树中某个节点。...Compose实现的一个优雅的 Toast
前言 如需以左右或上下方式浏览内容，您可以分别使用 HorizontalPager 和 VerticalPager可组合项。 这些可组合项的功能与视图系统中的 ViewPager类似。...官方文档: https://android-dot-google-developers.gonglchuangl.net/jetpack/compose/layouts/pager?...Text( text = "Page: $page", modifier = Modifier.fillMaxWidth() ) } 页面切换添加效果 该示例实现了切换时页面从半透明到不透明的效果...androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.snapshotFlow import androidx.compose.ui.Alignment...使用 val pagerState = rememberPagerState( initialPage = 0, initialPageOffsetFraction = 0f, ) {
前言 本文使用OkDownloader进行文件下载 https://github.com/ydxlt/okdownloader https://ydxlt.github.io/okdownloader/...DownloadItem) fun onFailure(downItem: DownloadItem) fun onLoading(downItem: DownloadItem) } 使用
Layout Modifier使用示例 有时你想在屏幕上展示一段文本信息，通常你会使用到Compose内置的Text组件。...单单显示文本是不够的，你希望指定Text顶部到文本基线的高度，让文本看的更自然一些。...使用内置的padding修饰符是无法满足你的需求的，他只能指定Text顶部到文本顶部的高度，此时你就需要使用到layout修饰符了。 ?...在我们的示例中当前Text元素的宽度则是文本宽度，而高度则是我们指定的Text顶部到文本基线高度与文本基线到Text底部的高度之和。...measure即可，上面示例中最后传入的lambda就是measure的实现。
前言 ViewModel 和 remember 是 Jetpack Compose 中用于管理数据的两种不同机制。...remember: remember 可以直接在 Compose 组件内部使用，通过调用 remember { } 或 rememberSaveable { } 来创建和存储状态。...mutableStateOf/mutableStateListOf mutableStateOf 是 Jetpack Compose 中的一个函数，用于创建可变的状态。...总的来说： mutableStateOf 的作用是在 Jetpack Compose 中创建可变的状态，以便动态更新 UI，并确保 UI 反映最新的状态值。...添加引用 implementation ("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1") 这时候我们使用实例的时候这样写 val mainViewModel
引言本文探讨基于Kotlin语言实现Redux架构，结合Jetpack Compose构建可预测的状态管理。...Compose（Material 3）中使用有了LoginViewModel，就能在 Composable 中去订阅 loginState 根据最新状态动态渲染界面描述为 1....显示两个文本输入框（用户名、密码） 2. 显示一个登录按钮 3....四、总结 优点：适用大型项目实施 • 所有状态都在可控范围内，修改 State 的途径统一且可追溯。 • 对复杂场景非常有用，便于日志记录、调试、或者做时间回溯。...祝你学习上手 Redux + Compose 顺利，新年快乐）
在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin 语言实现跳转导航多屏的案例。无论你有没有开发经验，相信这篇文章对你会非常有所帮助。...要实现页面之间的跳转，我们使用 Jetpack Navigation 组件。...四、学习笔记 4.1 掌握Jetpack Compose的基础 在项目开发初期，首先需要学习 Jetpack Compose 的基本语法和使用方式。...4.3 Jetpack Navigation 的使用 Navigation 组件Compose 提供了页面管理功能。通过 NavController，轻松实现页面跳转，在页面之间传递参数。...五、总结 通过这个简单的Demo，讲解了 Jetpack Compose 和 Jetpack Navigation 的使用方法，理解了声明式 UI 开发的优势。
Compose 中，如何来实现垂直布局呢？...图片已添加到布局中，但会展开以填充整个视图，并和文本是拼叠排列，文字显示在上层。...添加间距Spacer 我们看到，图片和文本之间没有间距，传统布局中，我们可以添加Margin属性，设置间距，在Jetpack Compose 中，我们可以使用HeightSpacer()和WidthSpacer...Design 设计原则，许多组件都实现了Material Design 设计，可以开箱即用，在这一节中，将使用一些Material小组件来对app进行样式设置 1....Material 调色版使用了一些基本颜色，如果要强调文本，可以调整文本的不透明度: Text("我超❤️JetPack Compose的！"
在本文中，我们将详细介绍如何使用Docker Compose在容器内运行Linux命令，并展示一些常见的应用场景。...数据库管理和迁移对于数据库管理和迁移任务，Docker Compose非常有用。您可以在容器内运行数据库备份、还原、迁移和管理等操作。通过在容器内运行适当的命令，可以轻松地管理数据库。...注意事项在使用Docker Compose在容器内运行Linux命令时，请记住以下注意事项：确保您具有足够的权限来执行命令。某些命令可能需要以特定用户或超级用户权限运行。谨慎处理容器中的数据。...总结使用Docker Compose在容器内运行Linux命令是一种强大的工具，可帮助您在Docker环境中管理和操作容器化应用程序。...本文介绍了创建Docker Compose文件以及使用docker-compose run命令运行命令的基本步骤。此外，还介绍了使用Docker Compose执行命令的常见应用场景和注意事项。
Toast 是Android中常见的轻量级提示\ 本文将介绍如何使用Compose技术实现一个Toast组件 不是一个简单的toast 优雅-简洁-动画 才是我的风格 \ 系统原生的Toast默认是在底部弹出..., text, Toast.LENGTH\_SHORT).show() 在github上看到一个很棒的实现方式，现在要丢弃原生的Toast\ 使用Compose组件来实现一个 **优雅-简洁-动画**...的 Toast 分享一个 我用Compose写了个笔记App，代码开源~里面用到了这个超级好看的Toast 使用方法 val toastState = remember { ToastUIState()...\ 定义一个进度值 范围是0f-1f\ 接着\ 使用Paint绘制一个圆角矩形。...>//动画时长 } 直接用 material3 提供的图标 ，当然可以用drawable，为了简洁而且 material3 提供的图标基本满足大部分场景的使用 图片 接口的实现 ToastData接口的实现
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
云直播
腾讯会议
