前言 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中的根组件的高度是自动使用父的,设置高度不会生效。
图片的区域添加着色。...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 中的状态。
前言 除了布局组件外,Jetpack Compose 还提供了一系列其他常用的 UI 组件。...https://developer.android.google.cn/jetpack/compose/components?...图片的区域添加着色。...contentScale = ContentScale.Crop, modifier = Modifier.clip(CircleShape).size(60.dp) ) } 加载中动画...Text("文字") } } 隐藏键盘 val keyboardController = LocalSoftwareKeyboardController.current // 在需要隐藏键盘的地方调用这个函数
处理点击事件 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
前言 ViewModel 和 remember 是 Jetpack Compose 中用于管理数据的两种不同机制。...remember/rememberSaveable 在Compose中,remember和rememberSaveable都是用于保存可组合函数的状态的方法,但它们在如何保存状态以及在什么情况下会重新计算状态上有所不同...mutableStateOf/mutableStateListOf mutableStateOf 是 Jetpack Compose 中的一个函数,用于创建可变的状态。...总的来说: mutableStateOf 的作用是在 Jetpack Compose 中创建可变的状态,以便动态更新 UI,并确保 UI 反映最新的状态值。...,能不能让我们的ViewModel的实例在一个类中是同一个实例呢?
Compose 在社区中的反响 我们看到 许多公司已经在大规模采纳 Compose 为其应用开发最新、最具创造性的功能。...与此同时,Twitter 也已经在应用的不同部分使用了 Jetpack Compose 并从中受益,因为 "Compose 让我们更容易定义自己的组件,并使它们的 API 更明确、灵活和直观。"...我们很高兴地看到这些团队在大规模和复杂的生产环境中仔细地评估并使用了 Compose,所带来的结果也不仅是让界面开发更清晰有趣,也带来了更多工程上的收益。...在 I/O 演讲 Jetpack Compose 中常见的性能问题 中,Compose 团队介绍了常见的性能错误以及这些错误的解决方法。...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...() or Modifier.horizontalScroll() 层叠布局 Box: Box 是一个简单的布局组件,用于在单个平面上叠加子元素。...功能和用途: Surface 是一个基本的容器,用于在屏幕上绘制内容。它提供了绘制颜色、形状、边框等的基本功能。 通常用于创建自定义的UI元素,例如背景、容器等。
如下是官方使用 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 for Desktop 使用过程中遇到的几个大坑 最近在用 Jetpack Compose for Desktop 写一些好玩的,用的时候遇到了很多大坑,在这里总结如下:...@See https://github.com/JetBrains/compose-jb/issues/2011 错误的使用二进制流方式从 ClassLoader Resources 中加载字体导致界面整体卡顿...FontStyle.Normal ): Font = LoadedFont(identity, data, weight, style) 然而当你试图从 ClassLoader Resources 中传入字体的二进制流时...在导出 SVG 图片时不要将样式导出到 CSS,而是选择内联 (inline) 样式 2....改用其他类型图片,如 PNG @see https://github.com/JetBrains/compose-jb/issues/1217 SVG 图片宽高比被错误计算导致 SVG 图片缩放不符合预期
创建一个支持Jetpack Compose的新应用 比起在现有应用中接入Jetpack Compose ,创建一个支持Jetpack Compose 的新项目则简单了许多,因为Android Studio...注意,在语言下来菜单中,Kotlin 是唯一一个可选项,因为Jetpack Compose 只能用Kotlin来写的才能运行。 c....} 四、布局 UI元素是分层级的,元素包含在其他元素中。在Jetpack Compose中,你可以通过从其他composable函数中调composable函数来构建UI层次结构。...在原来的安卓原生布局中,显示图片有相应的控件ImageView,设置本地图片地址或者Bitmap就能展示,在Jetpack Compose 中该如何显示图片呢?...六、Compose 布局实时预览 从Android Studio 4.0 开始,提供了在IDE中预览composable函数的功能,不用像以前那样,要先下载一个模拟器,然后将app状态模拟器上,运行app
一、问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图: [img] 因为 canvas 不是矢量图,而是像图片一样是位图模式的。...也就是说二倍屏,浏览器就会以 2 个像素点的宽度来渲染一个像素,该 canvas 在 Retina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。...类似的,在 canvas context 中也存在一个 backingStorePixelRatio 的属性,该属性的值决定了浏览器在渲染 canvas 之前会用几个像素来来存储画布信息。...", 50, 50); 这样就可以解决 canvas 在高清屏中绘制模糊的问题。...完整的demo:https://www.html.cn/demo/canvas_retina/index.html 参考文章:《解决 canvas 在高清屏中绘制模糊的问题》
前言 在服务器上使用 docker-compose 启动一个 Docker 中的 Redis 时,配置文件没有生效,Redis 没有加密码,导致 redis 中被写入两条记录: */3 * * * *...解决过程 方案一 在 docker-compose.yml 文件中写入下列内容: redis: image: redis container_name: my_redis command:...Redis 的密码需要自己在与容器共享的配置 redis.conf 中加入,即更改配置中 requirepass 为: requirepass yourpassword 在 docker-compose.yml...所在目录下执行 docker-compose up -d,即可在 Docker 中生成一个带密码的 Redis 容器。...方案二 同样在 docker-compose.yml 中写入下列内容: redis: image: redis container_name: my_redis command: redis-server
感谢朋友们的提醒,之前的按需转置案例文件有错,现已经更新。 今天我们来聊下如何在Power Query中进行类似Excel中通配符的查找。...例: 在{"a","b","ab","abc"}列表中查找以"a"开头的数据。也就是类似我们在Excel中使用通配符a*来查找。...在{"a","b","ab","abc"}列表中查找以"b"结尾的数据。也就是类似我们在Excel中使用通配符*a来查找。...List.Select(源,eachText.EndsWith(_,"b")) ={"b","ab"} 解释:在筛选条件的时候,以Text.EndsWith作为结尾关键词查找,类似于之前是"*"。...在{"a","b","ab","abc"}列表中查找以"b"为中间的数据。也就是类似我们在Excel中使用通配符*b*来查找。
如今 Google Play 商店排名前一万的应用中,已经有 84% 的应用使用了 Jetpack 库。...Studio 中包含了辅助您使用 Jetpack Compose 的强大工具,可以帮助您快速迭代 UI 元素。...借助 Compose 布局预览,您可以预览 Compose 组件,而无需将应用部署到设备或模拟器。在开发应用时,您的预览会更新,以帮助您更快地检查变更。...Android Studio 提供了 交互式预览模式 。在交互式预览模式下,您可以在 UI 元素中点击或输入,UI 将会响应,就像是在已安装的应用中一样。...可组合元素预览 开始使用 Jetpack Compose 要开始使用 Jetpack Compose,请参阅 Compose 教程 并 进行设置。
在研究某个事物时,往往都是从其数学模型开始着手的。那么我们首先给出无刷直流电机的数学模型。...---- 然后给出在Simulink中与之相对应的速度电流双闭环调速系统结构图 图中WASR和WACR分别为速度控制器和电流控制器。...在控制系统中一般选用的二维控制器的输入变量为系统的偏差e以及系统的偏差变化率ec,此时,系统的输出变量也就是常规PID的三个参数KP, KI , KD的调整量ΔKp、ΔKi和ΔKd。...4) 制定模糊控制规则,确定模糊控制规则的主要思想是实验人员将以往的控制经验总结后得出的模糊条件语句的一个集合,保证控制器的输出可以使系统输出响应的动态和静态性能达到最好是制定模糊控制规则所要遵守的最重要的原则...模糊控制器输出值的确定要根据第4步中的模糊控制规则和第2、3步中所确定的输入和输出变量来求得,求出的输出值也就是PID参数KP,KI , KD的调整量,模糊控制表就是由这些调整量与输入量在一个表中按一定关系列出而得到的
点击上方“前端自习课”关注,学习起来~ 一、问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图: 因为 canvas 不是矢量图,而是像图片一样是位图模式的。...也就是说二倍屏,浏览器就会以 2 个像素点的宽度来渲染一个像素,该 canvas 在 Retina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。...屏幕上实际会占据 200×200 像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。...类似的,在 canvas context 中也存在一个 backingStorePixelRatio 的属性,该属性的值决定了浏览器在渲染 canvas 之前会用几个像素来来存储画布信息。...", 50, 50); 这样就可以解决 canvas 在高清屏中绘制模糊的问题。
领取专属 10元无门槛券
手把手带您无忧上云