为了包含 Jetpack Compose 1.0.0-beta05 的更新内容，这篇文章在第一次发布后做出了更新。如果您希望查看 原始版本，请点击 这里。...2020 年，我开始了缓慢迁移 Tivi UI 的任务，目标是使其转为由 Jetpack Compose 编写。大约 12 个月之后，任务完成！...，同时每个 Fragment 的 UI 使用了 Jetpack Compose 实现。...我检出了新的分支，并将 Jetpack Compose 更新到 1.0.0-beta05、AGP 更新到 7.0.0-alpha14、Gradle 更新到 7.0 以及 Kotlin 更新到 1.4.32...您可以查看我们发布的文章来了解更多: 深入详解 Jetpack Compose | 优化 UI 构建 深入详解 Jetpack Compose | 实现原理 注意事项 关于上面的所有结果，有些事项需要注意
Android Jetpack组件 Compose 使用 前言 正文 一、创建Compose项目 1. setContent 2....推出的新组件Compose就解决了这个痛点，下面让我们来了解它，使用它。...使用它，来感受声明式UI的强大之处。 正文 Jetpack Compose是一个用于构建原生Android UI的现代工具包。...Jetpack Compose 通过更少的代码、强大的工具和直观的 Kotlin API 简化并加速了 Android 上的 UI 开发。 听起来好像老牛逼了！！！...下面我们用一下吧，这里我要说明一下，Compose 需要使用新版本的Android Studio，目前最新的是大黄蜂版本，以及使用Kotlin去开发，如果你对Kotlin一无所知，这可能学起来有一点难度
前言 大约在一年半前，我发布了Compose的第一篇文章 Jetpack Compose开篇 之 HelloWorld，连我自己也没想到，这一年半的时间中我竟再也没有看过Compose..., 如今Compose...已经发布了稳定版本，还没学会Compose让我的头发又白了许多~ 使用Navigation在Compose中导航 如果你之前不喜欢Android提倡的”单Activity“应用，那么在Compose中相信你会慢慢习惯的...接下来我们来看，如何使用navigation来进行页面导航呢？..."/"拼写在路由地址后面添加占位符即可，默认情况下，所有的参数都会被解析成字符串，所以我们可以使用arguments来为参数指定type类型。...总结 除此之外，Navigation 在Compose中还支持深层链接等，关于Compose的更多用法，欢迎持续关注我~
任务描述：使用给定的正整数作为边长，使用星号绘制空心菱形图案。预期效果如下图所示。 参考代码1：先生成一个实心菱形中每行内容，然后把里面的星号抠除，得到空心菱形。
前言 Android 开发中我们普遍使用今日头条的适配框架。...转换为 px 的公式 px = dp * density 来实现适配，通过在运行时动态修改 density 值的大小，使得修改后计算出的屏幕宽度就等于设计稿的宽度，从而使得在不同屏幕尺寸下我们都可以直接使用设计稿给出的...所以Jetpack Compose中我们也可以参考这种方式做适配。 只适配单方向 假如屏幕 长是817dp，应用只显示为横屏。
项目背景 最近参加了Compose挑战赛的终极挑战，使用Compose完成了一个天气app。之前几轮挑战也都有参与，每次都学到不少新东西。...为了降低实现成本，我将app中的UI元素定义成偏卡通的风格，可以更容易地通过代绘实现： 上面的动画没有使用gif、lottie或者其他静态资源，所有图形都是基于Compose代码绘制的。 2....App界面构成 App纵向划分为几个功能区域，每个区域都涉及到一些不同的Compose API的使用 涉及技术点较多，本文主要介绍如何使用Compose绘制自定义图形、并基于这些图形实现动画，其他内容有机会再单独介绍...Compose自定义绘制 像常规的Android开发一样，除了提供各种默认的Composable控件以外，Compose也提供了Canvas用来绘制自定义UI。...其实Canvas相关API在各个平台都大同小异，但在Compose上的使用有以下特点： 用声明式的方式创建和使用Canvas 通过DrawScope提供必要的state及各种APIs API更简单易用
绘制结果： ?
为了让 Jetpack Compose 的使用体验更上一层楼，以及了解大家对 Compose 开发、学习方面的内容需求，这里诚邀您参与 Jetpack Compose 使用情况调研, 点击这里 即刻参与调研...在分析了各种选择后，我们做出了 (在当时) 一个大胆的决定——使用当时还处于 Alpha 预览阶段的 Jetpack Compose。...优先考虑 当我们对新的界面渲染层使用 Jetpack Compose 时，需要优先考虑以下两点: 开发者的工作效率 : Play 商店团队有数百个工程师改进代码，因此开发起来应该很容易 (也很有趣)。...开发者的工作效率 一年多来 ，我们一直在使用 Jetpack Compose 编写用户界面代码，也得益于 Jetpack Compose 让界面开发变得更加简单。...以评分表格为例: 使用视图类编写，此表格包含: 总共 3 个视图类，其中 2 个需要自定义绘制圆角矩形和星形 约 350 行 Java 代码，55 行 XML 使用 Compose 编写，此表格包含:
前言 本文使用OkDownloader进行文件下载 https://github.com/ydxlt/okdownloader https://ydxlt.github.io/okdownloader/...DownloadItem) fun onFailure(downItem: DownloadItem) fun onLoading(downItem: DownloadItem) } 使用
前言 如需以左右或上下方式浏览内容，您可以分别使用 HorizontalPager 和 VerticalPager可组合项。 这些可组合项的功能与视图系统中的 ViewPager类似。...官方文档: https://android-dot-google-developers.gonglchuangl.net/jetpack/compose/layouts/pager?...import androidx.compose.foundation.pager.PagerState import androidx.compose.runtime.Composable import...androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.snapshotFlow import androidx.compose.ui.Alignment...使用 val pagerState = rememberPagerState( initialPage = 0, initialPageOffsetFraction = 0f, ) {
概述 Compose已经内置了许多组件，诸如Column，Row，Box等。开发者可以通过这些组合这些已有的组件来定制自己的专属组件。...为避免传统View系统测量布局的性能陷阱，Compose限制了每个子元素的测量次数，可以高效处理深度比较大的UI树(极端情况是退化成链表的树形结构)。...使用Layout Modifier 使用 Modifier.layout() 手动控制元素的测量和布局。通常layout修饰符的使用方法像下面这样。...Layout Modifier使用示例 有时你想在屏幕上展示一段文本信息，通常你会使用到Compose内置的Text组件。...使用内置的padding修饰符是无法满足你的需求的，他只能指定Text顶部到文本顶部的高度，此时你就需要使用到layout修饰符了。 ?
本文实例讲述了Android开发使用Drawable绘制圆角与圆形图案功能。分享给大家供大家参考，具体如下： 1.
摘要：本文介绍了如何使用HTML5 Canvas绘制一个粽子的图案。通过Canvas API的各种绘图方法，我们可以创建出具有生动效果的图形，这对于Web开发者来说是一个有趣且具有挑战性的任务。...在本文中，我们将通过Canvas来绘制一个传统的端午节粽子图案。效果展示准备工作首先，我们需要一个包含Canvas元素的HTML文件。...JavaScript中，我们使用Canvas API来绘制粽子的各个部分。...我们使用了ctx.beginPath()来开始一个新的路径，并使用ctx.moveTo()和ctx.quadraticCurveTo()来绘制曲线。...在本文中，我们展示了如何使用Canvas来绘制一个粽子图案。通过简单的路径绘制和曲线绘制，我们可以创建出生动且具有传统意义的端午节装饰。希望这篇文章对你理解Canvas的绘图方法和技巧有所帮助！
学习Excel技术，关注微信公众号： excelperfect 本文来源于wellsr.com的Q&A栏目，个人觉得很有意思，对于想要在工作表中使用形状来绘制图形的需求比较具有借鉴意义，特辑录于此，代码稍有修改...Q：如下图1所示，左侧是一个4行4列的数值矩阵，要使用VBA根据这些数值绘制右侧的图形。 ?...A：VBA代码如下： '在Excel中使用VBA连接单元格中的整数 '输入: 根据实际修改rangeIN和rangeOUT变量 ' rangeIN - 包括数字矩阵的单元格区域 '...MyArray(i) MyArray(i) = Temp End If Next j Next i End Sub '从一个单元格中心绘制到另一个单元格中心的线条...dwidth1 / 2, dtop1 + dheight1 / 2, _ dleft2+ dwidth2 / 2, dtop2 + dheight2 / 2).Select '格式化线条
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf...import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier...使用方法： Box( modifier = Modifier .align(Alignment.Bottom) .padding(0.dp, 0.dp, 6.dp...import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier...null, interactionSource = remember { MutableInteractionSource() }) { onClick() } } 使用方法
Jetpack Compose for Desktop 使用过程中遇到的几个大坑 最近在用 Jetpack Compose for Desktop 写一些好玩的，用的时候遇到了很多大坑，在这里总结如下：...Binary distribution 无法访问 ClassLoader Resources 我们有时候一定会希望从 jar 内部读取资源，这个时候我们一般会使用 this::class.java.getResource...@See https://github.com/JetBrains/compose-jb/issues/2011 错误的使用二进制流方式从 ClassLoader Resources 中加载字体导致界面整体卡顿...改用其他类型图片，如 PNG @see https://github.com/JetBrains/compose-jb/issues/1217 SVG 图片宽高比被错误计算导致 SVG 图片缩放不符合预期
但以防还有一部分开发人员还没有使用过它，或者有开发新人不了解JetPack Compose，这里还是做一下简单介绍。...JetPack Compose Jetpack Compose 是Google在2019年发布的一个Android原生现代UI工具包，它完全采用Kotlin编写，可以使用Kotlin语言的全部特性，可以帮助你轻松...它的优点： 使用更少的代码实现更多的功能：编写代码只需要采用 Kotlin，而不必拆分成 Kotlin 和 XML 部分。...直观的Kotlin API：Compose 使用声明性 API，这意味着开发人员只需描述界面，Compose 会负责完成其余工作。...Animatable Compose自定义动画 [image.png] 第六章 Compose图形 Compose Canvas Compose 绘制API的分析 Compose自定义绘制 [image.png
大家好，写给初学者的Jetpack Compose教程第4篇更新了。 今天我们要介绍的是Compose当中至关重要的一个组件，State。...这么简单的功能，使用View去写的话你一定三两下就搞定了吧。而现在使用Compose要如何去实现呢？...这里我又要再次引用 写给初学者的Jetpack Compose教程，为什么要学习Compose？ 这篇文章中提到的知识点：声明式UI的工作流程有点像是刷新网页一样。...这个方案之前在View系统中就被广泛使用，在Compose当中也仍然有效。我们稍后就会讲解如何在Compose中使用ViewModel。...写给初学者的Jetpack Compose教程，基础控件和布局 这篇文章中讲到了TextField控件，也就是输入框。
目前，能够直接在 Compose 上使用的 Jetpack 库有：Navigation、Paging、ViewModel、LiveData、hilt 、lifecycle 理论上来讲，Android Jetpack...上跟 UI 不相关的库 Compose 应该都是支持的，在我写的Hoo中，就使用了Paging、Navigation、ViewModel和LiveData等 Android Jetpack 库，再有协程和...在谷歌官方的 《Jetpack Compose 使用前后对比》 一文说道：Tivi应用在使用了 Compose 后，我们发现 APK 大小缩减了 41%，方法数减少了 17%。...Android Jetpack Compose 最全上手指南 Jetpack Compose 环境准备和Hello World 布局 使用Material design 设计 Compose 布局实时预览...Jetpack Compose应用做一个倒计时器 数据结构 倒计时功能 状态模式 Compose 布局 绘制时钟 4.
Android Studio 4.0.png 使用Jetpack Compose 来开始你的开发工作有2种方式： 将Jetpack Compose 添加到现有项目 创建一个支持Jetpack Compose...将Jetpack Compose 添加到现有项目 如果你想在现有的项目中使用Jetpack Compose，你需要配置一些必须的设置和依赖： （1）gradle 配置 在app目录下的build.gradle...Minimum API level 下拉菜单中，选择21或者更高 4点击Finish 现在，你就可以使用Jetpack Compose 来编写你的应用了。 3....使用Column 要使重叠绘制的Text文本能够垂直排列，我们就需要使用到Column函数，写过flutter的同学看起来是不是很眼熟？...Material 调色版使用了一些基本颜色，如果要强调文本，可以调整文本的不透明度: Text("我超❤️JetPack Compose的！"
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
