Android开发Jetpack Compose元素Modifier特性详解

目录
  • 正文
  • 有序性
  • 不可变性

正文

本文将会介绍Jetpack Compose中的Modifier。在谷歌官方文档中它的描述是这么一句话：Modifier元素是一个有序、不可变的集合，它可以往Jetpack Compose UI元素中添加修饰或者各种行为。例如，背景、填充和单击事件监听器装饰或添加行为到文本或按钮。本文将会从修饰符的两个特性有序和不可变入手来探究修饰符的应用，以下是本文目录：

  • 有序性
  • 不可变性

有序性

官方对修饰符定义的这个特性包含两个层面的意思，一是修饰符的使用是链式的它是有先后排列顺序的，二是这些顺序不仅仅是排列上的先后同时也是属性对UI展示效果起作用的先后顺序。接下来举一个例子来说明修饰符的有序的特性。

Box {
  val padding = 16.dp
  val onClick = Unit;
  Box(
      Modifier
          .clickable(onClick = { onClick })
          .padding(padding)
          .align(Alignment.Center)
          .size(50.dp, 50.dp)
          .background(Color.Green)
  )
}


Box {
    val padding = 16.dp
    val onClick = Unit;
    Box(
        Modifier
            .padding(padding)
            .clickable(onClick = { onClick })
            .align(Alignment.Center)
            .size(50.dp, 50.dp)
            .background(Color.Green)
    )
}

上面两段代码的意思都是在一个绿色背景宽高为50,50的Box控件中设置点击事件和Padding。首先我们可以直观的看到修饰符的使用是链式的符合咱们说的第一个有序性。读者可以观察两个gif图中水波动画的作用范围，可以清楚的看到第一张图波纹是作用范围是涵盖了边距的而第二张水波动画的范围仅仅作用在绿色矩形内部。第一段代码是先设置的点击事件而后设置的边距，而第二段代码是先设置边距而后设置了点击事件，就出现了不同的动画表现。我们通过这个例子就可以直观的看到修饰符的第二个有序性，也就是修饰属性对于UI展示作用的有序性，即属性发生作用的先后顺序和设置顺序是一致的。

不可变性

对于修饰符的不可变性笔者认为就是当设置的属性值确定时，被修饰的UI就确定了不会再变了。下面就展示一个位于屏幕中心，背景为绿色，旋转45度，宽度等比例拉伸2倍的正方形。

Box {
  Box(
      Modifier
          .rotate(45f)
          .scale(2f)
          .align(Alignment.Center)
          .size(50.dp, 50.dp)
          .background(Color.Green)
  )
}

到这里本文对修饰符的特性介绍就结束了，修饰符还有很多的属性读者可以自行尝试研究，但是无论设置什么属性修饰符都遵循咱们讨论的这两个属性。这里附上修饰符的官方文档链接点击查看Modifier的官方文档，更多关于Android Jetpack Compose元素Modifier的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Android Jetpack Compose实现列表吸顶效果

    Android Jetpack Compose实现列表吸顶效果

    目录 stickyHeader 实体类 加载假数据 吸顶标题 二级条目 完整代码 效果图 安卓传统的 Recyclerview 打造悬浮头部StickyHeader的吸顶效果,十分麻烦,而在Compose中就简单多了 stickyHeader Compose设计的时候考虑得很周到,他们提供了stickyHeader 作用就是添加一个粘性标题项,即使在它后面滚动时也会保持固定.标头将保持固定,直到下一个标头取而代之. 参数key - 表示唯一的密钥键. 它不允许对列表出现使用相同的键.密钥的类型应

  • Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    目录 原版 1. Compose 动画 API 概览 2. 长按点赞动画分解 3. 彩虹动画 3.1 状态管理 AnimatedRainbow animatedRainbows 列表 3.2 内容绘制 4. 表情动画 4.1 状态管理 AnimatedEmoji infiniteRepeatable CubicBezierEasing 抛物线动画 animatedEmojis 列表 4.2 内容绘制 5. 烟花动画 5.1 状态管理 AnimatedFlower keyframes animat

  • Android Jetpack Compose无限加载列表

    Android Jetpack Compose无限加载列表

    目录 前言 方法一: paging-compose 方法二:自定义实现 添加 LoadingIndicator 总结 前言 Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging-compose 自定义实现 方法一: paging-compose Jetpack 的 Paging 组件提供了对 Compose 的支持 dependencies { ..

  • Android Jetpack Compose开发实用小技巧

    Android Jetpack Compose开发实用小技巧

    目录 前言 实用小技巧 如何移除View点击阴影 Text文本如何垂直居中 如何移除Button的点击阴影 Dialog宽度如何全屏 如何提升编码效率 前言 在Compose开发的过程中,我们会经常遇到一些看起来很简单却不知道如何处理的小问题,比如去除点击阴影.Dialog全屏等问题,本文记录了这些常见小问题的处理方式.如有更好方案欢迎大佬们交流探讨- 实用小技巧 如何移除View点击阴影 这里的View指的是除了Button系列的之外,如Button.TextButton等,也就是自身没有on

  • Android JetpackCompose使用教程讲解

    Android JetpackCompose使用教程讲解

    目录 概况 开启新工程 文件结构 根结构 拆分方法 官方四节课教程细节剖析 data class 组件代码翻译 单例类 适配器的替代品 简单小动画 概况 compose 摒弃了原生开发模式中的 xml,代码结构类似于 flutter compose 仅支持 kotlin,虽然这玩意语法糖多但是也不难学 compose 可以通过极短的代码行数构建完善页面 开启新工程 首先请去 android 官网下载 android studio: 官网下载速度是正常的,别担心: 之后根据提示安装 android

  • Android中分析Jetpack Compose动画内部的实现原理

    Android中分析Jetpack Compose动画内部的实现原理

    目录 前言 正文 总结 前言 Compose的动画Api用起来很简单,效果看起来很神奇,那么它内部到底是如何运转的呢? 使用动画的代码示例: var isOffset by remember { mutableStateOf(false) } val offsetAnimation by animateDpAsState(targetValue = if (isOffset) 100.dp else 0.dp) Button( onClick = { isOffset = !isOffset }

  • Android开发Jetpack Compose元素Modifier特性详解

    Android开发Jetpack Compose元素Modifier特性详解

    目录 正文 有序性 不可变性 正文 本文将会介绍Jetpack Compose中的Modifier.在谷歌官方文档中它的描述是这么一句话:Modifier元素是一个有序.不可变的集合,它可以往Jetpack Compose UI元素中添加修饰或者各种行为.例如,背景.填充和单击事件监听器装饰或添加行为到文本或按钮.本文将会从修饰符的两个特性有序和不可变入手来探究修饰符的应用,以下是本文目录: 有序性 不可变性 有序性 官方对修饰符定义的这个特性包含两个层面的意思,一是修饰符的使用是链式的它是有先

  • Android开发Jetpack组件DataBinding用例详解

    Android开发Jetpack组件DataBinding用例详解

    目录 简介 使用方式 1. build.gradle 中添加 kapt,并启用dataBinding 2.修改布局文件,添加 layout 和 data 标签 3.使用 DataBindingUtil 绑定布局 4.布局的 data 标签中添加数据变量,并使用其参数 5.BindingAdapter的使用 简介 DataBinding 是 Jetpack 组件之一,适用于 MVVM 模式开发,也是Google官方推荐使用的组件之一.使用DataBinding可以很容易的达到视图与逻辑分离,直接在

  • Android开发Jetpack组件WorkManager用例详解

    目录 一.简介 二.导入 三.基本使用 3.1 定义后台任务 3.2 配置任务运行条件 3.2.1 只需执行一次的任务 3.2.2 周期性执行的任务 3.3 将任务传给 WorkManager 四.高级配置 4.1 设置任务延迟执行 4.2 给任务添加标签 4.3 取消任务 4.3.1 根据标签取消任务 4.3.2 根据 request 的 id 取消任务 4.3.3 取消所有任务 4.4 任务重试 4.5 监听任务结果 4.6 传递数据 4.7 链式任务 一.简介 WorkManager 用于

  • Jetpack Compose 分步指南教程详解

    目录 前言 可组合函数 显示简单文本 将样式应用于文本 使用 TextField 进行输入 在 Android Studio 中预览 预览参数 Column Scrollable Column Lazy Column Box Button Card Clickable Image Alert Dialog Material AppBar Material BottomNavigation Material Checkbox Material ProgressBar Material Slider

  • Android开发数据结构算法ArrayList源码详解

    目录 简介 ArrayList源码讲解 初始化 扩容 增加元素 一个元素 一堆元素 删除元素 一个元素 一堆元素 修改元素 查询元素 总结 ArrayList优点 ArrayList的缺点 简介 ArrayList是List接口的一个实现类,它是一个集合容器,我们通常会通过指定泛型来存储同一类数据,ArrayList默认容器大小为10,自身可以自动扩容,当容量不足时,扩大为原来的1.5倍,和上篇文章的Vector的最大区别应该就是线程安全了,ArrayList不能保证线程安全,但我们也可以通过其

  • Android 开发中使用Linux Shell实例详解

    Android 开发中使用Linux Shell实例详解 引言 Android系统是基于Linux内核运行的,而做为一名Linux粉,不在Android上面运行一下Linux Shell怎么行呢? 最近发现了一个很好的Android Shell工具代码,在这里分享一下. Shell核心代码 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.

  • Android开发使用HttpURLConnection进行网络编程详解【附源码下载】

    本文实例讲述了Android开发使用HttpURLConnection进行网络编程.分享给大家供大家参考,具体如下: --HttpURLConnection URLConnection已经可以非常方便地与指定站点交换信息,URLConnection下还有一个子类:HttpURLConnection,HttpURLConnection在URLConnection的基础上进行改进,增加了一些用于操作HTTP资源的便捷方法. setRequestMethod(String):设置发送请求的方法 get

  • Android开发使用URLConnection进行网络编程详解

    Android开发使用URLConnection进行网络编程详解

    本文实例讲述了Android开发使用URLConnection进行网络编程.分享给大家供大家参考,具体如下: URL的openConnection()方法将返回一个URLConnection,该对象表示应用程序和URL之间的通信连接,程序可以通过URLConnection实例向该URL发送请求,读取URL引用的资源.通常创建一个和URL的连接,并发送请求,读取此URL引用的资源. 需要如下步骤: a)通过调用URL对象openConnection()方法来创建URLConnection对象 b)

  • Android开发之自定义加载动画详解

    Android开发之自定义加载动画详解

    目录 一.demo简介 二.分析贪吃动画的尺寸比例 三.画圆 四.实现张嘴闭嘴动画 五.小球移动动画 一.demo简介 1.效果展示如下图,我截了三个瞬间,但其实这是一个连续的动画,就是这个大圆不停地吞下小圆. 2.这个动画可以拆分为两部分,首先是大圆张嘴闭嘴的动画,相当于画一个圆弧,规定一下它的角度就好.小圆就是一个从右向左移动的动画.然后不停地刷新界面,让动画的持续时间为永恒,这样就会有一个持续的动态效果. 二.分析贪吃动画的尺寸比例 1.在制作动画之前,我们要先建一个模型,来确定一下大圆和

  • Android开发Kotlin实现圆弧计步器示例详解

    Android开发Kotlin实现圆弧计步器示例详解

    目录 效果图 定义控件的样式 自定义StepView 绘制文本坐标 Android获取中线到基线距离 效果图 定义控件的样式 看完效果后,我们先定义控件的样式 <!-- 自定义View的名字 StepView --> <!-- name 属性名称 format 格式 string 文字 color 颜色 dimension 字体大小 integer 数字 reference 资源或者颜色 --> <declare-styleable name="StepView&q

随机推荐