Compose学习 -> Image()

news2024/11/28 12:43:08

基本使用:

通过资源id加载资源文件

Image(painter = painterResource(id = R.mipmap.test_01),
            contentDescription = "这是内容描述")

通过url地址加载网络图片

1、引入第三方库,并添加网络权限

implementation ("io.coil-kt:coil-compose:2.0.0-alpha03")

2、调用

 Image(
            rememberImagePainter(imageUrl),
            contentDescription = "这是内容描述",
            modifier = Modifier
                .size(150.dp, 150.dp)
        )

图片显示方式:contentScale

        Image(
            painter = painterResource(id = R.mipmap.test_02),
            contentDescription = "这是内容描述",
            modifier = Modifier
                .background(color = colorResource(id = R.color.purple_500))
                .size(180.dp, 180.dp),
            contentScale = ContentScale.Inside
        )

ContentScale.Fit(默认):图片完全展示,并且 高度或宽度铺满(宽高等比缩放)

ContentScale.Inside:图片完全展示,展示原图大小.

ContentScale.Corp:图片裁减展示,宽高铺满

ContentScale.FillHeight:高度铺满,宽度等比缩放,超出部分会被裁减

ContentScale.FillWidth:宽度铺满,高度等比缩放,超出部分会被裁减

ContentScale.None:不使用任何方式,原始图片宽高,超出控件部分将被裁减

ContentScale.FillBounds:宽高非等比缩放,图片铺满控件,可能会导致图片变形

裁减:

注意:如需设置margin时,必须在clip和size 裁减之前设置,在后面设置就设置成了padding了

 

圆形裁减:CircleShape

CircleShape 同 RoundedCornerShape(50) 也可以直接RoundedCornerShape(50)

        Image(painter = painterResource(id = R.mipmap.test_01),
            contentDescription = "这是内容描述",
        modifier = Modifier.clip(CircleShape))
        //CircleShape 同 RoundedCornerShape(50) 也可以直接传 RoundedCornerShape(50)

圆角裁减:RoundedCornerShape

        Image(
            painter = painterResource(id = R.mipmap.test_01),
            contentDescription = "这是内容描述",
            modifier = Modifier
                .padding(top = 10.dp)//注意:如需设置margin时,必须在clip和size 裁减之前设置,在后面设置就设置成了padding了
                .size(80.dp, 80.dp)
                .clip(RoundedCornerShape(8.dp))
        )

切角形状:CutCornerShape

        Image(
            painter = painterResource(id = R.mipmap.test_01),
            contentDescription = "这是内容描述",
            modifier = Modifier
                .padding(top = 10.dp)
                .size(80.dp, 80.dp)
                .clip(CutCornerShape(8.dp))//大小
                //.clip(CutCornerShape(50))//百分比
        )

透明图:

    Image(
        painter = painterResource(id = R.mipmap.test_02),
        contentDescription = "这是内容描述",
        modifier = Modifier
            .padding(top = 10.dp,end = 10.dp)
            .size(150.dp, 150.dp),
        alpha = 0.2f
    )

 

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

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

相关文章

【深入浅出Nacos原理及调优】「原理分析专题」配置中心加载原理和配置实时更新原理分析

官方资源 官方资源 带着问题去思考 客户端长轮询的响应时间会受什么影响为什么更改了配置信息后客户端会立即得到响应客户端的超时时间为什么要设置为30s带着以上这些问题我们从服务端的代码中去探寻结论。 配置中心 (Configuration Center) 系统开发过程中通常会将一些需…

用Python调用OpenAI API做有趣的事

获取 API KEY 首先需要 可以开全局的梯子,选择日本或韩国节点,可以通过 ipinfo 检查当前 IP 地址是否为日本或韩国地区,然后访问 OpenAI 网站注册账号并完成认证。 如果自己完成账号认证的成本太高,可以在某宝直接购买一个已经通…

存储也能“一键美颜”?看 XOCP 如何助力互联科技图片业务转型

近日,XSKY星辰天合联合“互联科技”推出了“图片云在线处理”解决方案,提供海量图片高效存储访问和在线图片处理服务,深入业务场景简化操作流程,提升照片流转速度,为客户打造高效敏捷的拍照体验。互联科技(…

DAS Over FC 技术允许 ATTO 分解存储并完成 vSAN 认证套件

一、介绍 最近,ATTO Technology, Inc. 以前所未有的方式 完成了 VMware vSAN ReadyNode 认证套件。 测试台本身是公式化的,以三台 Dell R640 服务器作为主机。 除了用于引导的 SD 卡和用于日志记录的单个 SAS SSD 之外,不存在任何内部存储…

EXCEL基础:IFNA、VLOOKUP、SUMIFS函数的使用

注意:本操作数据来源于excel home,特此声明。 查看原始数据,如下所示为【商品】的相关信息: 查看原始数据,如下所示为【供应商】的相关信息: 主要目的:把以上相关信息搞在一张表上。 把下表…

基于jsp+mysql+ssm台球俱乐部管理系统-计算机毕业设计

项目介绍 台球俱乐部系统设计主要是管理员登录后对整个系统相关操作进行处理,可进行管理员的添加和删除,会员信息管理、付费信息管理、球桌信息管理、订桌信息管理等操作管理。采用目前最流行的ssm框架和eclipse编辑器、mysql数据库设计并实现的 本系统…

[附源码]计算机毕业设计冬奥会网上商城Springboot程序

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: Springboot mybatis MavenVue等等组成,B/S模式…

什么是BPM系统?BPM流程管理系统介绍

一、什么是BPM系统? BPM系统(英文全称:Business Process Management,翻译后简称BPM)即业务流程管理系统,是指对端到端业务流程进行建模、分析和优化,以实现战略业务目标,其特点是注…

Elasticsearch:如何在 CentOS 上创建多节点的 Elasticsearch 集群 - 8.x

在我之前的文章 “Elasticsearch:使用 RPM 安装包来安装 Elastic Stack 8.x” 里,我详细地介绍了如何使用 RPM 安装包来安装 Elastic Stack 8.x。在今天的文章中,我来详细描述如何从零开始来创建一个含有三个节点的 Elasticsearch 集群。我们…

python文本处理尝试

Python文本处理尝试 最近打算看CSAPP,GitHub上看到有英语字幕ass源文件,想把字幕提取出来提高学习效率,先把ass文件转成txt文件,发现是这样👇 都在Dialogue的后面,打算尝试提取一下 不太熟练,下…

解决 Eclipse 中不见 Maven 问题

在 Windows -> Preferences 不见 Maven 和 File -> New -> Project 均不见 Maven,但 Help -> Eclipse Marketplace -> installed 却可见已经安装,网上的各种方法都不能解决。 解决步骤: 关闭 Eclipse;清空目录 C:…

肿瘤网络平台

肿瘤网络平台是为广大肿瘤医生量身定做的学习,交流功能健全的网络平台,平台汇聚了会议、病例、专家讲堂等内容,广大的肿瘤医生可以随时分享、讨论专业知识。 一、平台价值 让医生 了解肿瘤前沿进展 提高业务水平 丰富临床经验 二、平台架构…

如何挖掘外贸客户需求

是客户的衣食父母。 俗话说“知己知彼,百战不殆”,外贸业务员都想把自己的产品推销给客户。除了知道自己产品的特点,还应该知道客户的需求是什么。因此,前期的客户调研工作非常重要。 不是所有的客户都是意向或潜在客户。只有当…

小程序canvas 缩放/拖动/还原/封装和实例--开箱即用

小程序canvas 缩放/拖动/还原/封装和实例一、预览二、使用2.1 创建和配置方法三、源码3.1 实例组件3.2 核心类一、预览 之前写过web端的canvas 缩放/拖动/还原/封装和实例。最近小程序也需要用到,但凡是涉及小程序canvas还是比较多坑的,而且难用多了&am…

[附源码]Node.js计算机毕业设计订餐系统Express

项目运行 环境配置: Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境:最好是Nodejs最新版,我…

Linux中如何查看ntp是否同步?

Linux中如何查看ntp是否同步?在Linux中,查看ntp是否同步的方法主要有三种,分别是:ntpd命令、ntpstat命令、timedatectl命令,接下来是详细的内容介绍。  NTP用于将计算机客户或服务器的时间同步到另一服务器或参考时钟源。它使用…

Java基于微信小程序的计算机等级考试考练 毕业设计

网络的广泛应用给生活带来了十分的便利。所以把计算机等级考试考练与现在网络相结合,利用java技术建设计算机等级考试考练APP,实现计算机等级考试考练的信息化。则对于进一步提高计算机等级考试考练发展,丰富计算机等级考试考练经验能起到不少…

[附源码]Python计算机毕业设计电商后台系统Django(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等…

web前端期末大作业——HTML+CSS+JavaScript仿王者荣耀游戏网站设计与制作

🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业…

基于kmeans算法的数据聚类matlab仿真

目录 1.算法描述 2.仿真效果预览 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 聚类算法也许是机器学习中“新算法”出现最多、最快的领域,一个重要的原因是聚类不存在客观标准,给定数据集总能从某个角度找到以往算法未覆盖的某种标准从而设计出新算法…