请前往 Tiga on Tech 查看原文以及更多有趣的技术文章。Android Jetpack Compose 提供了和原来的 View 系统完全不一样的动画机制和 API。...为了方便大家快速找到所需的 API，Google 官方制作了一张 API 速查表（Cheatsheet）：图片*来源
前言 Jetpack Compose光下拉刷新，官方就提供了三种不同的方式，使用的依赖也不相同，特别的混乱。 所以在网络上看到的示例可能找不到依赖就是这个原因。...Text(text = index.toString()) } } } } PullToRefreshContainer 把libs.version.toml中的...", name = "material3-android", version.ref = "material3Android" } build.gradle.kts中 implementation(libs.androidx.material3...是仅支持安卓的库，一些Android上新添加的组件会先在material3-android上发布，稳定后可能再在material3发布。...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动画 Jetpack Compose提供了一些功能强大且可扩展的 API，可用于在应用界面中轻松实现各种动画效果。...下文将会对Jetpack Compose Animations的常用方法进行介绍。...3.1 状态驱动动画:State Jetpack Compose动画是通过对状态的监听，即监听状态值的变化，使UI能实现自动更新。...随着可见值的变化，AnimatedVisibility可为其内容的出现和消失设置动画。如下代码，可以通过点击Button，控制图片的出现和消失。...： [4f711ff1dfb74594943e083660e4d571~tplv-k3u1fbpfcp-zoom-1.image] 四、结语 Jetpack Compose 已将动画简化到只需在我们的可组合函数中创建声明性代码的程度
前言 在 Compose 中，Modifier 的调用顺序是有影响的。...修饰符列表 https://android-dot-google-developers.gonglchuangl.net/jetpack/compose/modifiers-list?...在 Compose 中，Margin 和 Padding 都用 Modifier.padding() 来设置。...Shape 对象也是一个通用的能力，例如，可以用于 clip 当中，进行裁切。 裁剪 clip: 用于裁剪组件的内容，以匹配指定的形状。...通常情况下，父容器需要使用相应的布局修饰符，如 Box 中的 BoxScope、Column 中的 ColumnScope 或 Row 中的 RowScope。
前言 Jetpack Compose中想更新界面上的任何东西都需要重组，重组本质就是再执行一次当前函数。...触发重组方式有 State值改变 调用方法刷新 State 创建State有以下几种方式 注意 只有在Kotlin中才能生效，在Java中是不行的。...集合 对于集合 MutableCollection重写过的改变内容的函数如：add、set、remove等； val list = mutableStateListOf() //会更新 list.add...//不会更新 list[index].name = "new value" //会更新 list[index] = list[index].copy(name = "new value") List的中括号...[]是对get函数的语法糖，get不会改变集合内容，而[]=（有等号）是对set函数语法糖，可以改变内容。
https://developer.android.google.cn/jetpack/compose/designsystems/material3?...使用主题的形状样式 MaterialTheme.shapes.medium 说明 CompositionLocalProvider CompositionLocalProvider 是 Jetpack...Compose 中的一个重要概念，用于向整个组合树（Compose tree）提供特定类型的值。...在 Compose 中，组合树是由各种组合函数（如 @Composable 标记的函数）构成的层级结构，用于描述应用程序的 UI 层次结构。...总的来说，CompositionLocalProvider 用于在组合树中传递局部值，使得这些值对于整个组合树中的任何组件都可用，而不需要显式传递。
下面是视频内容的脚本整理稿。如果你看了视频，那下面的文稿就不用看了，直接翻到底部评论区吧。 文字版 属性动画怎么写？...Android 的属性动画，是很好用的：又强大，又简单。然而在 Jetpack Compose 里，属性动画这一套东西却没有移植过去。 为什么？...你刚才也看到了，Compose 的动画写起来比属性动画更简单。但！这并不是它没有移植属性动画的原因，因为它只是个表象，真正的原因在背后的本质。...、特殊场景的动画以及复杂动画的精细定制，Compose 也有相应的 API。...最后 下期我可能会继续聊 Compose，也可能是 Jetpack 的其他内容，或者其他 Android 开发的事情。
本篇会进一步深入了解 Compose 的动画使用，了解一些更底层的 API。...一、动画的底层 API 调用 我们建议结合协程来管理你的自定义动画（Coroutine-based Animations） Jetpack Compose 的动画，最终都离不开 Animation...需要注意的是，Compose 的动画是可以被打断的。...复制代码 四、简单说说动画的触发机制 对Compose 有一定了解的同学都会知道，Compose 界面的重组都是依靠 State 来触发的，而动画也不例外。...和 DecayAnimation 两种； 知道了更高定制化的动画可以使用 Animatable 中的挂起函数实现； 了解到多个动画顺序和并发执行的写法； 了解到动画在源码中的触发机制入口，知道了内部是
引言 Jetpack Compose 作为 Google 近期主推的 Android 开发 UI 框架，得益于其声明式编程的思想以及协程的加持，让 Compose 在开发过程中非常的舒适。...前段时间对 Compose 进行了较系统的学习，特地抽出其中动画相关内容，结合官方文档和自身实践经验和大家一起交流。...知识储备： 我希望你在阅读本文前对 Kotlin 协程、Jetpack Compose 基础都有一定的了解~ 一、我为什么喜欢用 Compose 写动画？...三、基于内容变化的动画 3.1 出现和消失 → 改变内容 上面的例子有提到，我们可以直接使用 Compose 提供的 AnimatedVisibility 动画，现在我们来看下具体使用：传送门 @Composable...transition 对象，我们可以高度定制化地自定义动画过程中的其他动画。
图片的区域添加着色。...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 ) 自带的加载中
前言 如需以左右或上下方式浏览内容，您可以分别使用 HorizontalPager 和 VerticalPager可组合项。 这些可组合项的功能与视图系统中的 ViewPager类似。...官方文档: https://android-dot-google-developers.gonglchuangl.net/jetpack/compose/layouts/pager?...Log.i("Page change", "Page changed to $page") callback(page) } } } 滚动到某页 无动画滚动...pagerState.scrollToPage(5) } }, modifier = Modifier.align(Alignment.BottomCenter)) { Text("Jump to Page 5") } 带动画滚动...如需在屏幕外加载更多页面，请将 beyondBoundsPageCount 设置为大于零的值。
项目挑战 因为没有美工协助，所以我考虑通过代码实现app中的所有UI元素例如各种icon等，这样的UI在任何分辨率下都不会失真，跟重要的是可以灵活地实现各种动画效果。...为了降低实现成本，我将app中的UI元素定义成偏卡通的风格，可以更容易地通过代绘实现： 上面的动画没有使用gif、lottie或者其他静态资源，所有图形都是基于Compose代码绘制的。 2....并基于这些图形实现动画，其他内容有机会再单独介绍。...声明式地创建和使用Canvas Compose中，Canvas作为Composable，可以声明式地添加到其他Composable中，并通过Modifier进行配置 Canvas(modifier =...中，可以通过Layout{...}对Composable进行自定义布局，content{...}中定义参与布局的子Composable。
前言 Jetpack Compose中的页面跳转和传值和之前没什么不同。 要注意的是 组件内尽量不要进行页面的跳转，组件可以设置回调方法，在Activity中进行页面跳转操作。...页面跳转 val intent = Intent(baseContext, AppDetailActivity::class.java) startActivity(intent) 这里要注意的是，获取上下文使用的是...在 Android 中，可以通过 Intent 来传递自定义对象，前提是该对象必须实现 Serializable接口。
，不要错过 :-)Jetpack Compose 中的状态State是什么在 Jetpack 中，state表示一个和 UI 状态相关的值。...这是 Jetpack Compose 中很常见的修改状态的模式。...附加内容：在 Jetpack Compose 中，如何使用 Kotlin 的 Flow、RxJava 或者 LiveData 表示状态？...Jetpack Compose 允许我们使用 LiveData、RxJava 的观察者、Kotlin 的 Flow 来表示 Jetpack Compose 中的状态。...Compose State 所需要了解的相关内容，包括State 在 Jetpeck Compose 中的重要性如何创建 State 实例有状态和无状态可组合项的区别有状态无状态可组合项的使用场景以及
前言 除了布局组件外，Jetpack Compose 还提供了一系列其他常用的 UI 组件。...https://developer.android.google.cn/jetpack/compose/components?...图片的区域添加着色。...id = R.drawable.logo), contentDescription = null, contentScale = ContentScale.Crop, ) 背景剪裁 图片的背景是不会被剪裁的...contentScale = ContentScale.Crop, modifier = Modifier.clip(CircleShape).size(60.dp) ) } 加载中动画
中处理所有手势事件的入口，类似传统视图的 onTouch 。...在这里可以识别 click 手势，而且相应优先级高于 clickable，但是不会触发水波纹之类的效果 Box( modifier = Modifier .pointerInput...，这有时候和我们的页面不太搭，这里就禁用该效果。...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 中的一个函数，用于创建可变的状态。...它的作用是创建一个可以被修改的状态，并且当状态发生改变时，Compose 会重新计算并更新相关的 UI。...总的来说： mutableStateOf 的作用是在 Jetpack Compose 中创建可变的状态，以便动态更新 UI，并确保 UI 反映最新的状态值。
Compose 现已支持文本放大镜。 拖动选择图标时会显示放大镜，以便于您查看指尖下方的内容。...在 I/O 演讲 Jetpack Compose 中常见的性能问题 中，Compose 团队介绍了常见的性能错误以及这些错误的解决方法。...除了重组计数，新工具还包含了能帮助您一次查看和浏览所有动画的 Animation Coordination，以及能帮助您为多个屏幕尺寸构建应用的 MultiPreview 注解。...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元素，例如背景、容器等。...Surface 内部是个Box,内容放在Box内。 Card 是一个更高级的容器，提供了带阴影、圆角等样式的卡片视图。 通常用于显示单个项目或内容，例如列表项、详细信息卡等。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
