Compose | UI组件(一) | Modifier修饰符

文章目录

  • Modifier修饰符-简介
    • Modifier修饰符 - size
    • Modifier修饰符 - background
    • Modifier修饰符 - fillMaxSize
    • Modifier修饰符 - border 和 padding
    • Modifier修饰符 - offset
  • 总结

Modifier修饰符-简介

Modifier通过链式调用方式为所有Compose组件设置样式(大小,背景色,边框,间隙,位移等等)

Modifier修饰符 - size

设置被修饰组件的大小

Column {//width 和 height 同时设置 60dpImage(painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = null,modifier = Modifier.size(60.dp))//width 设置 60dp 和 height 设置 100dpImage(painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = null,modifier = Modifier.size(width = 60.dp, height = 100.dp))
}

Modifier修饰符 - background

设置被修饰组件背景色

Column {Box(modifier = Modifier.size(60.dp).background(color = Color.Red)){Text(text = "纯色")}Spacer(modifier = Modifier.height(1.dp))Box(modifier = Modifier.size(60.dp).background(brush = GradientBrush)){Text(text = "渐变色")}
}val GradientBrush = Brush.verticalGradient(colors = listOf(Color.Red,Color.Yellow,Color.White)
)

Modifier修饰符 - fillMaxSize

设置组件高度或者宽度填充父空间

//填满整个父空间
Box(modifier = Modifier.fillMaxSize().background(Color.Red))
//高度填满父空间
Box(modifier = Modifier.fillMaxHeight().width(60.dp).background(Color.Gray))
//宽度填满父空间
Box(modifier = Modifier.fillMaxWidth().height(60.dp).background(Color.Black))

Modifier修饰符 - border 和 padding

border修饰组件的边框,padding修饰组件的间隙

Box(modifier = Modifier.padding(8.dp) //外边距.border(2.dp,Color.Red,shape = RoundedCornerShape(2.dp)) //边框.padding(10.dp) //内边距
){//留白组件Spacer(modifier = Modifier.size(width = 100.dp, height = 10.dp).background(Color.Red))
}

Modifier修饰符 - offset

移动被修饰组件的位置

Box(modifier = Modifier.size(100.dp).offset(x=200.dp,y=150.dp)
)

总结

这些都是常用到的Compose组件修饰符,可以修饰我们的界面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650367.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Neo4j 国内镜像下载与安装

Neo4j 5.x 简体中文版指南 社区版:https://neo4j.com/download-center/#community 链接地址(Linux版):https://neo4j.com/artifact.php?nameneo4j-community-3.5.13-unix.tar.gz 链接地址(Windows)&#x…

蓝桥杯省赛无忧 编程13 肖恩的投球游戏

#include <iostream> #include <vector> using namespace std; int main() {int n, q;cin >> n >> q;vector<int> a(n 1);vector<int> diff(n 2, 0); // 初始化差分数组// 读取初始球数&#xff0c;构建差分数组for (int i 1; i < …

Go 从标准输入读取数据

fmt.Scan系列 fmt.Scan函数定义如下&#xff1a; // Scan scans text read from standard input, storing successive space-separated values into successive arguments. // Newlines count as space. // It returns the number of items successfully scanned. // If tha…

DS:单链表的实现(超详细!!)

创作不易&#xff0c;友友们点个三连吧&#xff01; 在博主的上一篇文章中&#xff0c;很详细地介绍了顺序表实现的过程以及如何去书写代码&#xff0c;如果没看过的友友们建议先去看看哦&#xff01; DS&#xff1a;顺序表的实现&#xff08;超详细&#xff01;&#xff01;&…

JAVA大学生兼职平台后台管理

运行环境&#xff1a; tomcat7.0jdk1.7或以上 eclipse或idea 使用技术&#xff1a; springboot 功能描述&#xff1a; 求职人员 注册&#xff0c;登录 选定登录角色&#xff08;1、兼职人员2、发布兼职招聘人员&#xff09; 书写简历&#xff0c;上传学生证照片&#…

ADB的配置和使用 ADB操作手机-1

「adb」即 Android Debug Bridge &#xff0c;亦称安卓调试桥&#xff0c;是谷歌为安卓开发者提供的开发工具之一&#xff0c;可以让你的电脑以指令窗口的方式控制手机。 可以在安卓开发者网页中的 SDK 平台工具页面下直接下载对应系统的 adb 配置文件&#xff0c;大小只有几十…

代码随想录训练营第三十二天打卡|122.买卖股票的最佳时机II 55. 跳跃游戏 45.跳跃游戏II

122.买卖股票的最佳时机II 1.做的时候感觉不难&#xff0c;自己也AC了&#xff0c;但是一下子说清楚为什么这样做并不容易。思考之后&#xff0c;我得到了一个自己感觉还算形象的解释。股票价格走势是一个折线图&#xff0c;两天之间的股票价格构成一条折线。我们只要在每一条…

力扣每日一题 ---- 1039. 多边形三角剖分的最低得分

这题的难点在哪部分呢&#xff0c;其实是怎么思考。这道题如果之前没做过类似的话&#xff0c;还是很难看出一些性质的&#xff0c;这题原本的话是没有图片把用例显示的这么详细的。这题中有个很隐晦的点没有说出来 剖出来的三角形是否有交叉&#xff0c;这题中如果加一个三角…

网络防御——NET实验

一、实验拓扑 二、实验要求 1、生产区在工作时间&#xff08;9&#xff1a;00---18&#xff1a;00&#xff09;内可以访问服务区&#xff0c;仅可以访问http服务器&#xff1b; 2、办公区全天可以访问服务器区&#xff0c;其中&#xff0c;10.0.2.20可以访问FTP服务器和HTTP服…

水文模型SWMM与LisFlood耦合(pdf文档、软件见资源)

总技术路线图 INP生成图解 文献&#xff1a;面向服务的Web-SWMM构建研究 regardingINP为ArcGIS Pro项目 1.SWMM模型数据准备与参数设置 1.子汇水区 文件位于&#xff1a;beforeGenerateINP/generateSub.py&#xff08;一级划分&#xff09; 问题&#xff1a; 水文分析阈值划…

命令行安装vant2项目

声明&#xff1a;原文参考链接出自&#xff1a;ERROR in ./node_modules/vant export ‘createVNode‘ (imported as ‘_createVNode‘) was not found in ‘vue_error in node_modules/vant/lib/overlay/overlay.d.t-CSDN博客 已经安装Vant,但是引用Vant里面组件库时候报错&a…

重温《深入理解Java虚拟机:JVM高级特性与最佳实践(第二版)》 –– 学习笔记(一)

第一部分&#xff1a;走近Java 第1章&#xff1a;走近Java 1.1 Java的技术体系 SUN 官方所定义的 Java 技术体系包括&#xff1a;Java程序设计语言、Java虚拟机、Class文件格式、Java API类库、第三方&#xff08;商业机构和开源社区&#xff09;Java类库。 其中&#xff0…

C++ 关于“常量”的知识整理:

目录 1 常量对象&#xff1a; 2 常量成员&#xff1a; 2.1常量数据成员&#xff1a; 常数据成员总结&#xff1a; 2.2常量成员函数&#xff08;使用最多&#xff09;&#xff1a; 常成员函数总结&#xff1a; 3 常量引用&#xff1a; C中常量的值在程序运行中不允许被改…

调用阿里通义千问大语言模型API-小白新手教程-python

阿里大语言模型通义千问API使用新手教程 最近需要用到大模型&#xff0c;了解到目前国产大模型中&#xff0c;阿里的通义千问有比较详细的SDK文档可进行二次开发,目前通义千问的API文档其实是可以进行精简然后学习的,也就是说&#xff0c;是可以通过简单的API调用在自己网页或…

express/koa2中使用http-proxy-middleware代理转发后端接口解决跨域问题

由于后端接口没有设置允许跨域,故前端需要自己解决,如果前端项目是node起的服务,可以使用express/koa2框架,配合http-proxy-middleware中间件转发后端接口 express中: 1.先安装依赖 npm i http-proxy-middleware -D 2.设置代理,可配置多条 var app express();// 设置反向代…

Redis为什么速度快:数据结构、存储及IO网络原理总结

Redis&#xff0c;作为内存数据结构存储的佼佼者&#xff0c;其高性能表现一直备受赞誉。那么&#xff0c;Redis究竟是如何实现这一点的呢&#xff1f;接下来&#xff0c;我们将更深入地探讨其背后的关键技术&#xff0c;并提供进一步的优化策略。 一、内存存储与数据结构设计…

本地缓存之王Caffeine 保姆级教程(值得珍藏)

1. 简介 在编程领域&#xff0c;缓存是不可或缺的一部分&#xff0c;从处理器到应用层&#xff0c;其应用无处不在。从根本上讲&#xff0c;缓存是利用空间换取时间的一种策略&#xff0c;通过优化数据存储方式&#xff0c;提高后续数据访问速度。 对于Java开发者来说&#x…

黑豹程序员-vue3实现剪贴板复制

需求 vue中实现复制文字到剪贴板上 注意 创建ClipboardJS对象时&#xff0c;第一个参数绑定组件 class的名称。此时class为此名称的才能有复制功能。 方法代码 <script setup> // npm install clipboardimport ClipboardJS from clipboard//复制文字到剪贴板const c…

【开源】基于JAVA语言的实验室耗材管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 耗材档案模块2.2 耗材入库模块2.3 耗材出库模块2.4 耗材申请模块2.5 耗材审核模块 三、系统展示四、核心代码4.1 查询耗材品类4.2 查询资产出库清单4.3 资产出库4.4 查询入库单4.5 资产入库 五、免责说明 一、摘要 1.1…

【现代控制系统】从状态方程导出微分方程

从状态方程导出微分方程 2023年6月20日 1. 基本方法 状态空间表达式&#xff1a; x ˙ ( t ) A x ( t ) B u ( t ) y ( t ) C x ( t ) D u ( t ) \begin{aligned} &\dot{ x}(t){ A }{ x }(t){ B }{ u } (t) \\ &{ y }(t){ C } { x }(t){ D } { u }(t) \end{alig…