Compose Modifier修饰符详细解说
本文会对Modifier修饰符进行详尽的解说,报你收货满满
本文git地址:
https://github.com/ymeddmn/ModifierIntroduce
Modifier
Modifier 可以被翻译为修饰符,可以用来修饰以下内容:
更改可组合项的大小、布局、行为和外观
添加信息,如无障碍标签
处理用户输入
添加高级互动,如使元素可点击、可滚动、可拖动或可缩放
item 代码案例
第三节属性扩展中的案例都是基于本节中 item 方法的形参进行赋值得到的
item1
- item1 代码
@Composable
fun item1(m: Modifier) {Column(modifier = Modifier.fillMaxSize(1f),horizontalAlignment = Alignment.CenterHorizontally) {Box(modifier = m.size(100.dp).background(color = Color.Red),contentAlignment = Alignment.Center) {Text(text = "安安安安卓",textAlign = TextAlign.Center,style = TextStyle(color = Color.White))}Spacer(modifier = Modifier.height(10.dp))}
}
- item 默认的展示效果如下:
Modifier 所有扩展方法详解
selectable(compose 实现单选)
这里起初我是没头绪的,就拼了命的百度找资料的,但是说实话一篇讲这里的文章都没有。所以只能去官网翻译官方文档了。基本上花了半小时才搞明白啥意思。眼睛又废了,本周计划的 Livedata 源码也讲不了了
总的来说 selectable 就是用来实现单选的,可作为 RadioGroup 使用,也可作为 TabView 使用。
- 代码
val icons = listOf<Triple<Int, Int, String>>(Triple(R.drawable.apple, R.drawable.lufeicry, "海贼王"),Triple(R.drawable.nameismile, R.drawable.nameicry, "娜美"),Triple(R.drawable.luobinsmile, R.drawable.luobincry, "罗宾"))var selectedItem = remember {mutableStateOf(icons[0])}Column(modifier = Modifier.fillMaxSize(1f),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {Row {Text(text = "公众号:\"安安安安卓\",选择:",style = TextStyle(color = Color.Black, fontSize = 15.sp),modifier = Modifier.weight(0.7f))Text(text = selectedItem.value.third,style = TextStyle(color = Color.Red, fontSize = 25.sp),modifier = Modifier.weight(0.3f))}Row(
// modifier = Modifier
// .selectableGroup(),horizontalArrangement = Arrangement.SpaceAround) {icons.forEach {val selected = selectedItem.value == itImage(painter = painterResource(id = if (selected) it.first else it.second),contentDescription = null,modifier = Modifier.selectable(selected = selected,enabled = true,role = null,onClick = {selectedItem.value = it}).size(100.dp))}}}
- 效果
fillMaxSize
- 代码
item1(m = Modifier.background(color = Color.Blue).fillMaxSize(0.75f))
- 效果
设置属性后填充了父容器 0.75 倍的大小
height
- 代码
item1(m = Modifier.background(color = Color.Blue).height(30.dp))
- 效果
设置高度为 30 后,宽度也跟随进行了改变
width
同 height
size
代码
item1(m = Modifier.background(color = Color.Blue).size(30.dp))
效果图
宽高都变为了 30dp
background
简单使用 background 设置背景色
item1(m = Modifier.background(color = Color.Red))
实现圆形背景
- 代码
item1(m = Modifier.background(color = Color.Red,shape = CircleShape))
- 效果
实现圆角背景
- 代码
item1(m = Modifier.background(color = Color.Red,shape = RoundedCornerShape(10.dp)))
2.效果
实现渐变效果
- 代码
item1(m = Modifier.background(brush = Brush.linearGradient(mutableListOf(Color.Red,Color.Green,Color.Yellow,Color.Gray))))
- 效果
默认的线性渐变效果是从左上到右下的
verticalScroll
加上它 Column 就可以垂直方向进行滚动了
- 代码
Column(modifier = Modifier.verticalScroll(rememberScrollState()).fillMaxSize(1f))
padding、border
- 代码
item1(m = Modifier.background(color = Color.Red,shape = CircleShape).padding(4.dp).border(border = BorderStroke(2.dp, color = Color.Green),shape = CircleShape))
效果
本例实现了这样一个效果,先添加圆形背景,再添加 padding,最后添加圆形 border
clip
注意 background 方法和 clip 方法不能同时使用,否则 background 会覆盖 clip 的效果
- 代码
Box(modifier = Modifier.clip(CircleShape)) {Box(Modifier.size(200.dp).background(color = Color.Green))}
- 效果
clipToBounds
暂无
offset
根据文档中的描述,offset 可以对控件内部元素的内容进行偏移,比如:
如果内部元素是 LTR,则 x 正值向右,负值向左
如果内部元素是 RTL,则 x 正值向左,负值向右
- 代码
item1(m = Modifier.background(color = Color.Red).offset(x=30.dp))
- 效果
absoluteOffset
与 offset 类似,不过不会考虑布局方向。
正值向右或下,负值向左或上
absolutePadding
暂无
alpha
设置透明度
- 代码
item1(m = Modifier.background(color = Color.Red).alpha(0.3f))
- 效果
clickable
让任意控件变的可点击,并且会附加水波纹效果
代码
item1(m = Modifier.background(color = Color.Red).clickable(onClick = {
Log.e(“tag”,“安安安安卓”)
}))效果
打印日志
E/tag: 安安安安卓
E/tag: 安安安安卓
E/tag: 安安安安卓
E/tag: 安安安安卓
defaultMinSize
可以设置控件的最小尺寸
- 代码
item1(m = Modifier.background(color = Color.Red).defaultMinSize(300.dp))
- 效果
item1 中控件的宽度是 100dp,我们将最小控件尺寸设置为 300dp,然后控件宽度自动的变为了 300dp,说明最小尺寸生效了。
draggable
暂无
drawBehind
暂无
drawWithCache
暂无
drawWithContent
暂无
heightIn
设置最小高度
horizontalScroll
使我们的空间可以水平滑动,我们代码中用的 Text 做 demo,结果 Text 变成了单行可滑动
- 代码
Text(text = "公众号,安安安安卓,是一个用来分享安卓知识的公众号,ad发法撒扥a懂法A栋发扥as扥",modifier = Modifier.horizontalScroll(enabled = true, state = ScrollState(12)).height(100.dp).background(color = Color.Green),textAlign = TextAlign.Center)
- 效果
indication
暂无
layout
暂无
layoutId
给控件设置 id
使用ConstraintLayout的时候会有用
- 代码
item1(m = Modifier.background(color = Color.Red).layoutId("name"))
nestedScroll
暂无
onFocusChanged
暂无
onFocusEvent
暂无
onGlobalPositioned
暂无
onKeyEvent
暂无
onPreviewKeyEvent
暂无
onSizeChanged
暂无
paddingFrom
暂无
PaddingFromBaseLine
暂无
paint
暂无
pointInput
暂无
requireHeight
代码
效果
requireHeightIn
重新设置最小高度,
- 代码
item1(m = Modifier.background(color = Color.Red).requiredHeight(height = 20.dp))
- 效果
蓝框中的高度是调用了 requireHeightIn 方法的效果
框外的是正常的控件高度
requireSize
同:requireHeightIn
requireWidth
同:requireHeightIn
requireWidthIn
同:requireHeightIn
scale
对控件里面的内容进行缩放
- 代码
item1(m = Modifier.background(color = Color.Red).scale(2f))
- 效果
shadow
阴影效果
- 代码
item1(m = Modifier.background(color = Color.Red).shadow(elevation = 3.dp, shape = RectangleShape,clip = true)//不知道是否是我用的不对,效果非常不好看)
- 效果
感觉效果好丑,肯定是我用错了
sizeIn
最小尺寸
swipeable
暂无
toggleable
非常适合用来做开关效果,本例我们用自己找到的两张图模拟点击切换状态
- 代码
val selected = remember {mutableStateOf(true)}Image(painter = painterResource(id = if (selected.value) R.drawable.apple else R.drawable.luobinsmile),contentDescription = null,modifier = Modifier.toggleable(value = selected.value,enabled = true,role = null,onValueChange = {selected.value = it}).size(100.dp))
- 效果
transformable
暂无
withIn
可以设置最小尺寸和最大尺寸
- 代码
item1(m = Modifier.background(color = Color.Red).widthIn(min = 50.dp,max = 200.dp))
wrapContentHeight
暂无
wrapContentWidth
暂无
wrapContentSize
暂无
zIndex
zIndex 用来设置控件的层级,zIndex 值较大的会覆盖在 zIndex 值较小的控件上方。如果两个控件 zIndex 一样大,那么会按照他们的代码中的顺序摆放
代码
本例代码,我们创建了两个 Text,
第一个红色 zIndex=5
第二个绿色 zIndex=4
按我们的预期红色的会处于绿色的控件的顶部
Box {Text(text = "安安安安卓2",modifier = Modifier.size(100.dp).background(color = Color.Red).zIndex(5f))Text(text = "安安安安卓1",modifier = Modifier.size(150.dp).background(color = Color.Green).zIndex(4f))}
- 效果
最终效果与我们预期的一致
关注公众号学习更多知识
Compose Modifier修饰符详细解说相关推荐
- 详解Jetpack Compose中的Modifier修饰符
前言 本文将会介绍Jetpack Compose中的Modifier.在谷歌官方文档中它的描述是这么一句话:Modifier元素是一个有序.不可变的集合,它可以往Jetpack Compose UI元 ...
- JetPack Compose之Modifier修饰符
前言 在Compose中,每一个组件都是带有@Compose注解的函数,被称为Composable.Compose已经预置了很多的Compose UI组件,这些组件都是基于Material Desig ...
- css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)
原标题:CSS的命名方式:BEM(区块.元素.修饰符) 本资源由 伯乐在线- 凝枫整理,您也想贡献一份力量?欢迎加入我们 » 重要概念 "Block"区块 区块的定义是:一个逻辑和 ...
- solidity修饰符、节省gas技巧
目录 一.智能合约的永固性 二.OpenZeppelin库的Ownable合约 三.函数修饰符modifier 四.Gas - 驱动以太坊DApps的能源 五.省 gas :结构封装 (Struct ...
- 【译文】 C#面向对象的基本概念 (Basic C# OOP Concept) 第一部分(类,对象,变量,方法,访问修饰符)...
译文出处:http://www.codeproject.com/Articles/838365/Basic-Csharp-OOP-Concept 相关文档:http://files.cnblogs.c ...
- 【Kotlin】变量简介 ( 可空类型 | lateinit | 初始化判定 | 非空类型 | !! 与 ? 修饰符 | ?= ?. ?: 运算符 | 抽象属性变量)
文章目录 I . Kotlin 变量总结 II . Kotlin 非空变量 III . 非空变量不能赋空 IV . lateinit 关键字 V . lateinit 初始化判定 VI . Kotli ...
- php新版本废弃 preg_replace /e 修饰符
php新版本废弃 preg_replace /e 修饰符 分类: PHP 2014-12-16 13:00 3531人阅读 评论(3) 收藏 举报 php正则 最近服务器php版本升级到了 5.6 发 ...
- [译]Effective Kotlin系列之探索高阶函数中inline修饰符(三)
简述: 不知道是否有小伙伴还记得我们之前的Effective Kotlin翻译系列,之前一直忙于赶时髦研究Kotlin 1.3中的新特性.把此系列耽搁了,赶完时髦了还是得踏实探究本质和基础,从今天开始 ...
- 深入浅出OOP(五): C#访问修饰符(Public/Private/Protected/Internal/Sealed/Constants)
访问修饰符(或者叫访问控制符)是面向对象语言的特性之一,用于对类.类成员函数.类成员变量进行访问控制.同时,访问控制符也是语法保留关键字,用于封装组件. Public, Private, Protec ...
- java修饰符总结,java访问修饰符总结
java的访问修饰符 java面向对象的基本思想之一是封装细节并且公开接口. java采用访问修饰符来封装类的方法和属性的访问权限,从而向使用者暴露接口.隐藏细节. public -- 对所有类可见. ...
最新文章
- BZOJ 2957楼房重建
- 在 Visual Studio 中使用 Q# 进行量子编程
- java equals() 函数_java equals()函数与‘==’
- ASP.NET中应用的监视
- C# 多线程控制 通讯 和切换
- hdu-2844 Coins (混合背包+二进制优化)
- 云专网和云专线的区别_传统IDC行业与云计算的区别?
- 【安全】一名安全数据科学家的日常生活
- -bash: mysql: command not found解决方法(zabbix监控mysql失败)
- ctf php文件上传图片格式,CTF-WEB:文件上传
- 怎么解决docker pull拉取镜像速度过慢的问题
- 因子主成分分析,因子载荷矩阵、因子解释度 因子得分-在基金净值和主要金融因子分析上的应用
- 服务器开机系统进不去怎么办,开机就进BIOS进不去系统怎么处理
- 【python10个小实验】1. 画一个简单的三角形
- Vue基础入门(2) Vue.js下载与安装
- 十月,再见;你好,十一月
- 快讯 | Elon Musk拟跨界做喜剧,号称要建立跨星系传媒帝国Thud!(轰!)
- openvino CvCapture_MSMF::initStream Failed to set mediaType (unsupported media type)
- USB键盘背后的那些事儿
- autox.js在vscode(win7)与雷神模拟器上的开发环境配置
热门文章
- 极客快讯第 5 期:袁隆平对抖音账号不知情,抖音回应;百度宣布组建智能汽车公司;北京滴滴和花小猪将于一周内完成司机疫苗接种;
- reactinput聚焦事件_React中的事件
- Qt常用类的一些介绍
- SpCL阅读笔记:Self-paced Contrastive Learning with Hybrid Memory for Domain Adaptive Object Re-ID
- Codeforces Gym 100015 简要题解
- [翻译]Exploiting CVE-2015-0057 ——Part 1
- 幸福家庭杂志幸福家庭杂志社幸福家庭教育部2022年第1期目录
- rs232转485通信在串口助手只能发送数据而接受不到数据,求大神解答
- 德昂年会—北京站圆满落幕
- Netflix时代之后Spring Cloud微服务的未来