前言 Jetpack Compose光下拉刷新，官方就提供了三种不同的方式，使用的依赖也不相同，特别的混乱。 所以在网络上看到的示例可能找不到依赖就是这个原因。....fillMaxWidth() .height(200.dp), onRefresh = { isRefreshing = true // 在协程作用域中启动异步任务...Text(text = index.toString()) } } } } PullToRefreshContainer 把libs.version.toml中的...) 替换为 implementation(libs.androidx.material3.android) 两者的对比 material3是标准的库，能保证在各个平台上迁移代码，而material3-android...https://developer.android.google.cn/jetpack/androidx/releases/compose-material3?
前言 Jetpack Compose 中的列表组件相对于之前的View方式要简单很多。...modifier = Modifier.padding(16.dp).height(30.dp), ) { Text(text) } } 注意 竖向Grid布局中的子项...，也就是上面的GridItem中的根组件的宽度是自动使用父的，设置宽度不会生效。...modifier = Modifier.padding(16.dp).height(30.dp), ) { Text(text) } } 注意 竖向Grid布局中的子项...，也就是上面的GridItem中的根组件的高度是自动使用父的，设置高度不会生效。
背景Jetpack Compose 提供了强大的 Material Design 组件,其中 TabRow 组件可以用于实现 Material Design 规范的选项卡界面。...Jetpack Compose 中使用 TabRow简单使用 TabRow 一般可以分为以下几步:定义 Tab 数据模型每个 Tab 对应一个数据类,包含标题、图标等信息: data class ...)在 TabRow 中添加 Tab 项使用 Tab 组件添加选项卡,传入标题、图标等: TabRow { tabItems.forEach { item -> Tab...Jetpack Compose TabRow与HorizontalPager 联动笔记共享App我新开发的笔记共享App 也用上了TabRow与HorizontalPager联动效果效果图图片自定义...// 如果标签较多,可以取一个较小值作为最大标签宽度,防止过宽 return minOf(width, minWidth)}图片这样就舒服多了自定义的 Indicator主要逻辑是在 Canvas
在上一篇中，我们不仅了解了 Compose 中的 Column、Row、Box 等几种常见的布局方式 还学习了 CompositionLocal 类在 Compose 中进行传值的方法；还有可快速搭建...Compose 当然也不甘落后，在 Compose 中我们可以使用 Layout 组件来自定义我们自己的 Composable 组件。...Compose 自定义 Layout 的基本原则 在 Compose 中，一个 Composable 方法被执行时，会被添加到 UI 树中，然后会被渲染展示在屏幕上。...总结一下，在 Compose 中自定义 Layout 的基本流程其实跟 View 体系中自定义 View 的一样，其中最大的不同就是在测量的步骤，Compose 为提高效率不允许多次进行测量。...而且 Compose 的自定义 Layout 的两种情况也可以对应到 View 体系中的两个情况，但可以看出，Compose 都是在 Layout 组件中进行的改写与编程，可以让开发者更加聚焦在具体的代码逻辑上
子元素测量的结果被包装在一个 Placeable 实例中，可通过该Placeable 实例获取子元素测量结果。 在我们的示例中当前Text元素也不对子元素进行额外限制。...并将子元素的布局流程写入在 layout(width, height) 的lambda参数中。...在我们的示例中当前Text元素的宽度则是文本宽度，而高度则是我们指定的Text顶部到文本基线高度与文本基线到Text底部的高度之和。...然而我们有时是需要精细化测量布局每一个子组件，这需要我们进行完全的自定义Layout。这类似于传统View系统中定制View与ViewGroup测量布局流程的区别。...在我们的示例中仍然不对子元素进行额外限制，最终将每次测量的结果保存到placeables这个List中。
图片的区域添加着色。...id = R.drawable.logo), contentDescription = null, contentScale = ContentScale.Crop, ) 背景剪裁 图片的背景是不会被剪裁的...github.com/coil-kt/coil Coil官方文档：https://coil-kt.github.io/coil 基本图片 添加依赖 implementation("io.coil-kt:coil-compose...modifier = Modifier.clip(CircleShape).size(60.dp) ) } 加载GIF 添加引用 implementation("io.coil-kt:coil-compose...builder = { crossfade(true)//淡出效果 }), contentDescription = null ) 自带的加载中
这些可组合项的功能与视图系统中的 ViewPager类似。...官方文档: https://android-dot-google-developers.gonglchuangl.net/jetpack/compose/layouts/pager?...text = "Page: $page", modifier = Modifier.fillMaxWidth() ) } 页面切换添加效果 该示例实现了切换时页面从半透明到不透明的效果...androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.snapshotFlow import androidx.compose.ui.Alignment...如需在屏幕外加载更多页面，请将 beyondBoundsPageCount 设置为大于零的值。
前言 Jetpack Compose中的页面跳转和传值和之前没什么不同。 要注意的是 组件内尽量不要进行页面的跳转，组件可以设置回调方法，在Activity中进行页面跳转操作。...页面跳转 val intent = Intent(baseContext, AppDetailActivity::class.java) startActivity(intent) 这里要注意的是，获取上下文使用的是...在 Android 中，可以通过 Intent 来传递自定义对象，前提是该对象必须实现 Serializable接口。...Serializable接口允许对象在不同组件间进行序列化和反序列化，以便通过 Intent 进行传递。
，不要错过 :-)Jetpack Compose 中的状态State是什么在 Jetpack 中，state表示一个和 UI 状态相关的值。...通过修改状态更新可组合项目随着我们越多地使用 Compose 自带的可组合项(如Scaffolds、BottomSheet、Drawer等)，我们会意识到在 Jetpack Compose 中状态是无处不在的...这是 Jetpack Compose 中很常见的修改状态的模式。...附加内容：在 Jetpack Compose 中，如何使用 Kotlin 的 Flow、RxJava 或者 LiveData 表示状态？...Jetpack Compose 允许我们使用 LiveData、RxJava 的观察者、Kotlin 的 Flow 来表示 Jetpack Compose 中的状态。
处理点击事件 Box( modifier = Modifier.clickable { // 处理点击事件 } ) Modifier.combinedClickable 在单击事件之外...中处理所有手势事件的入口，类似传统视图的 onTouch 。...，这有时候和我们的页面不太搭，这里就禁用该效果。...import android.annotation.SuppressLint import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource...import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.composed
前言 除了布局组件外，Jetpack Compose 还提供了一系列其他常用的 UI 组件。...https://developer.android.google.cn/jetpack/compose/components?...效果 组件定义 import androidx.compose.foundation.background import androidx.compose.foundation.clickable import...图片的区域添加着色。...Text("文字") } } 隐藏键盘 val keyboardController = LocalSoftwareKeyboardController.current // 在需要隐藏键盘的地方调用这个函数
前言 ViewModel 和 remember 是 Jetpack Compose 中用于管理数据的两种不同机制。...remember/rememberSaveable 在Compose中，remember和rememberSaveable都是用于保存可组合函数的状态的方法，但它们在如何保存状态以及在什么情况下会重新计算状态上有所不同...mutableStateOf/mutableStateListOf mutableStateOf 是 Jetpack Compose 中的一个函数，用于创建可变的状态。...总的来说： mutableStateOf 的作用是在 Jetpack Compose 中创建可变的状态，以便动态更新 UI，并确保 UI 反映最新的状态值。...，能不能让我们的ViewModel的实例在一个类中是同一个实例呢？
与此同时，Twitter 也已经在应用的不同部分使用了 Jetpack Compose 并从中受益，因为 "Compose 让我们更容易定义自己的组件，并使它们的 API 更明确、灵活和直观。"...: 文本改进 字体边距 我们在问题跟踪器中定位到了 得票最高的问题之一，并通过将 includeFontPadding 设置为自定义参数来解决它。...在 I/O 演讲 Jetpack Compose 中常见的性能问题 中，Compose 团队介绍了常见的性能错误以及这些错误的解决方法。...您可以在 问题跟踪器 中提出您开发中遇到的问题，也可以在 KotlinLang Slack 群组中提问。...Codelab 全新的 Compose 性能说明文档 更新的 自定义输入文档 I/O 演讲视频: Jetpack Compose 中常见的性能问题 以及 Compose 中的惰性布局 对于新手开发者，
前言 Jetpack Compose 提供了一系列用于构建用户界面的布局组件，这些组件可以帮助您创建各种复杂的布局结构。...对应关系 View Jetpack Compose FrameLayout Box& Modifier RelativeLayout Box & Modifier LinearLayout Row, Column...ConstraintLayout ConstraintLayout 移植到了 Compose 中 RecyclerView LazyColumn or LazyRow ScrollView Modifier.verticalScroll...，允许您使用约束关系来定义子元素之间的位置关系。...功能和用途： Surface 是一个基本的容器，用于在屏幕上绘制内容。它提供了绘制颜色、形状、边框等的基本功能。 通常用于创建自定义的UI元素，例如背景、容器等。
因为使用了他人提供的docker镜像，想对其中某个网络操作修改一下，需要修改某域名指向的IP，这就要修改容器内的/etc/hosts文件。...又觉得每次重创建docker后手动去修改很麻烦，所以想到在docker-compose.yml中定义该操作。...查询资料后得到的解决方法如下： version: '3' services: mirai: image: reprover/mirai-http:latest tty: true...>> /etc/hosts && /bin/sh' 其中command: sh -c 'echo "127.0.0.1 126.com" >> /etc/hosts && /bin/sh'就是解决这问题的...命令后面附加的 && /bin/sh必不可少，否则容器执行完echo "127.0.0.1 126.com" >> /etc/hosts后会自动退出。
如下是官方使用 Baseline Profiles 在应用启动上提升的百分比，来自 《 Performance best practices for Jetpack Compose[1]》: 官方提供的数据非常吸引人...在模块目录中的结构如下，与 AndroidManifest.xml 同级： 2、编译时 在编译阶段，AGP 会将所有的依赖的 baseline-profile.txt 合并成一个文件，然后编译输出...，在我之前的文章中有介绍 AGP 4.2.x 版本是支持正式版 Compose 的，但在看 4.2.x 版本源码的时候，是没有 ART Profiles 相关的 task 的，这也说明，在 AGP 4.2...不过也有解决办法，那就是在高版本的 AGP 中打包，然后将 apk 里 assets 下的 baseline.prof 文件提取出来，放入到自己项目即可。...参考资料 [1] Performance best practices for Jetpack Compose: https://www.youtube.com/watch?
入门 Jetpack Compose 中的 match_parent 相当于什么？...但是在 Compose 1.5版本中，Google 做了大量的性能优化工作，所以如果你现在再来尝试一次，你会发现性能已经不是什么问题了。 修饰符 借助修饰符，您可以修饰或扩充可组合项。...中的文字 | Jetpack Compose | Android Developers 自定义图片 | Jetpack Compose | Android Developers val...如果设置一个较大的正值，则视图将显示在其他视图的上方。如果设置一个较小的负值，则视图将显示在其他视图的下方。当两个视图的 zIndex 相同时，它们将按照它们在布局文件中的顺序进行绘制。...Compose 中的一个函数，用于在协程中执行副作用操作。
在Django中，我们可以通过表单的初始化参数initial来传递自定义的初始值给表单字段。如果我们想要在视图中设置表单的初始值，可以在视图中创建表单的实例时，传递一个字典给initial参数。...1、问题背景我们遇到了这样一个问题：在使用 Django 表单时，我们希望将自定义表单中的值传递到视图中。然而，我们发现无法为多选选项的每个选项传递值。...在渲染表单时，只有一个字符字段，而多选框中有多个选择。我们想知道是否有办法解决这个问题，以及表单集是否可以在这里提供帮助。我们对 Django 还很陌生，因此希望得到一些解释，以便更好地理解和学习。...{% if field.errors %} {{ field.errors|striptags }} {% endif %}{% endfor %}2、解决方案方法一：生成所需数量的字段一种解决方案是编写一个循环来生成所需数量的字段...在我们的例子中，我们可以创建一个表单集来处理每个 StateOptionOutcome 对象。
Jetpack Compose for Desktop 使用过程中遇到的几个大坑 最近在用 Jetpack Compose for Desktop 写一些好玩的，用的时候遇到了很多大坑，在这里总结如下：...当我们需要加载自定义字体时，我们首先看到的方式是 fun Font( identity: String, data: ByteArray, weight: FontWeight...FontStyle.Normal ): Font = LoadedFont(identity, data, weight, style) 然而当你试图从 ClassLoader Resources 中传入字体的二进制流时...在导出 SVG 图片时不要将样式导出到 CSS，而是选择内联 (inline) 样式 2....为了解决这个问题，（经过了一整天的研究），我设计了一个 ContentScale，只要你直到这张 SVG 图片的宽高比，手动录入后即可令结果恢复正常。
在 Jetpack Compose 中，实现类似动画效果可以通过 animate*AsState 或 LaunchedEffect 管理 UI 变化。...我讲解这两者的不同之处，以及在开发中能从它们各自的优势中学到什么。...MDC：手动更新视图 在 MDC 中，需要自己管理 UI 和数据的同步。...这种手动操作会导致代码更加重复且容易出错，特别是在处理复杂状态时。 Jetpack Compose：自动重新组合 UI Compose 的状态管理很简单。...4.4 性能和可维护性：复杂度表现 MDC：性能优化需要手动操作 在使用 MDC 时，性能的优化更多地依赖于开发对布局层次的控制，特别是在 RecyclerView 中，需要小心布局的嵌套和重绘问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
