「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用

在鸿蒙应用开发中,Image 组件用于加载和显示图片资源,并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。

在这里插入图片描述

关键词
  • Image 组件
  • 图片加载
  • 本地资源
  • 远程图片
  • 图片轮播

一、Image 组件基础

Image 组件主要用于显示图片资源,支持加载本地和远程图片,并能通过多种方式控制图片的大小和缩放模式。

1.1 加载本地图片
  • 将图片资源放在项目的 resources 文件夹下,使用 $r 引用图片:

    // 加载本地图片,引用路径为资源文件夹中的 app.media.sampleImage
    Image($r('app.media.sampleImage'))
    
1.2 加载远程图片
  • 直接传入图片 URL,即可实现远程图片的加载:

    // 加载远程图片,通过 URL 直接加载网络图片
    Image('https://example.com/sample.jpg')
    
1.3 设置图片大小
  • 使用 widthheight 来指定图片尺寸:

    // 设置图片大小为 100x100
    Image($r('app.media.sampleImage')).width(100)  // 设置宽度为 100.height(100) // 设置高度为 100
    
1.4 图片缩放模式
  • 使用 objectFit 设置图片的缩放模式(如填充、适应、覆盖等):

    // 使用 Cover 模式填充图片,可能会裁剪图片边缘
    Image($r('app.media.sampleImage')).objectFit(ImageFit.Cover)
    
    缩放模式描述
    ImageFit.Cover图片覆盖整个区域,可能部分裁剪
    ImageFit.Contain图片适应区域,保持宽高比
    ImageFit.Fill图片拉伸填满整个区域
    ImageFit.ScaleDown图片缩小适应区域,不放大

二、Image 组件样式与圆角

Image 组件支持多种样式设置,包括圆角、边框和阴影效果,使图片展示更具个性化。

2.1 设置圆角
  • 使用 borderRadius 设置图片的圆角效果:

    // 设置图片圆角为 20
    Image

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

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

相关文章

上海亚商投顾:沪指缩量调整 华为概念股午后爆发

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 一.市场情绪 市场全天震荡调整,沪指、深成指午后跌超1%,创业板指一度跌逾2%,尾盘跌幅有…

vim命令及shell命令

目录 vim命令 vim三种工作模式 光标的跳转 复制粘贴 剪切删除 撤销回滚替换 翻页 其他 shell编程命令 判断用户的参数 可用的整数比较运算符 常见的字符串比较运算符 if条件测试语句 for条件循环语句 vim命令 vim三种工作模式 Vim编辑器中设置了三种模式: 命令…

Z 检验和 T 检验之间的区别

目录 一、说明 二、什么是假设检验? 三、假设检验基础 3.1 假设检验的基本概念 3.2 、执行假设验证的步骤 3.3 临界值、P 值 3.4 方向假设 3.5 非方向假设检验s 四、什么是 Z 检验统计量? 五、Z 检验示例 5.1 单样本 Z 检验 5.2 双样本 Z 检…

Qt限制QGraphicsScene QGraphicsItem内部的移动范围

用过QGraphicsView的都知道,原点一般设定在view和item的中心,所以帮助文档和这个网友说的不一定跟我们对的上: 关于Qt限制QGraphicsScene内部Item的移动范围_qgraphicsitem限制移动范围-CSDN博客 首先,设定view的scenerect&…

【Redis】浅析Redis大Key

目录 1、什么是Redis大Key 2、大 Key 是怎么产生的 3、大 Key 导致的问题 4、如何快速找到 Redis 大 Key 5、大 Key 优化策略 6、总结 我们在使用 Redis 的过程中,如果未能及时发现并处理 Big keys(下文称为“大Key”),可能…

Jedis操作和springboot整合redis

Jedis-springboot整合redis Jedis 引入jedis依赖 注意事项 测试相关数据类型 Key String List set hash zset 案例 spring boot整合redis 引入相关依赖 在application.properties中配置redis 配置 创建redis配置类 创建测试类 Jedis 引入jedis依赖 <depen…

GenAI 生态系统现状:不止大语言模型和向量数据库

自 20 个月前 ChatGPT 革命性的推出以来&#xff0c;生成式人工智能&#xff08;GenAI&#xff09;领域经历了显著的发展和创新。最初&#xff0c;大语言模型&#xff08;LLMs&#xff09;和向量数据库吸引了最多的关注。然而&#xff0c;GenAI 生态系统远不止这两个部分&#…

HTML、JavaScript和CSS实现注册页面设计

目录 一、实现要求 二、实现页面图 1、注册页面 2.用户ID、用户名、口令验证成功后显示页面 三、用户ID、用户名、口令、确定口令验证逻辑js代码 1、验证用户ID 2、验证用户名 3、验证口令密码 四、总结 五、代码仓库 一、实现要求 综合使用HTML、JavaScript和CSS进…

Vue前端开发:事件绑定方式

事件定义 在Vue中&#xff0c;当一个元素通过使用v-on或语法糖指令绑定某个事件后&#xff0c;则完成了事件被定义的过程&#xff0c;在这定义的过程中&#xff0c;指令的后面是定义事件的名称&#xff0c;等号的后面是事件被触发后执行的函数&#xff0c;当然&#xff0c;也可…

mac-ubuntu虚拟机(扩容-共享-vmtools)

一、磁盘扩容 使用GParted工具对Linux磁盘空间进行扩展 https://blog.csdn.net/Time_Waxk/article/details/105675468 经过上面的方式后还不够&#xff0c;需要再进行下面的操作 lvextend 用于扩展逻辑卷的大小&#xff0c;-l 选项允许指定大小。resize2fs 用于调整文件系统的…

【AAOS】【源码分析】CarSystemUI

目录 目录 概述 CarSystemUI组件 源代码 源码位置 主要模块 编译选项 CarSystemUI与SystemUI 编译方式 Car Emulator默认服务 CarSystemUI 启动流程 缩略词 概述 AAOS中的SystemUI虽然相较手机要简单不少,但却是车载开发中的一个重要组件,它负责管理和控制车机…

C++知识点复习

对于这些问题的回答&#xff0c;可以按照思维导图的结构来组织答案&#xff0c;然后再进行回答。 C11用过哪些特性&#xff1f; &#xff08;首先&#xff0c;要回答好这个问题&#xff0c;需要注意问题的层次&#xff0c;不要一上来就说新增了某某关键字和语法&#xff0c;在…

.net framework 3.5sp1开启错误进度条不动如何解决

浏览器地址栏输入www.dnz9.com远程解决netframework问题 在Windows操作系统上安装或启用.NET Framework 3.5 SP1时&#xff0c;如果遇到进度条不动的问题&#xff0c;可能由多种原因引起。以下是一些可能的解决方案&#xff1a; 1. 使用Windows功能对话框 1.打开“控制面板”。…

openpnp - 在openpnp中单独测试相机

文章目录 openpnp - 在openpnp中单独测试相机概述笔记END openpnp - 在openpnp中单独测试相机 概述 底部相机的位置不合适, 重新做了零件&#xff0c;准备先确定一下相机和吸嘴的距离是多少才合适。 如果在设备上直接实验&#xff0c;那么拆装调整相机挺麻烦的。 准备直接在电…

Spring 框架中常见的注解(Spring、SpringMVC、SpringBoot)

1. Spring 中常见注解 还有Recourse&#xff1a;相当于AutowiredQualifier Value : 用于将配置文件中的值注入到Bean的字段中。 Bean : 用于在配置类中声明一个Bean。 Lazy : 用于延迟加载Bean。 2. SpringMVC 中常见注解 还有GetMapping PostMapping PutMapping DeleteMapp…

掌握分布式系统的38个核心概念

天天说分布式分布式&#xff0c;那么我们是否知道什么是分布式&#xff0c;分布式会遇到什么问题&#xff0c;有哪些理论支撑&#xff0c;有哪些经典的应对方案&#xff0c;业界是如何设计并保证分布式系统的高可用呢&#xff1f; 1. 架构设计 这一节将从一些经典的开源系统架…

OpenAI 的 Whisper:盛名之下,其实难副?

OpenAI 的 Whisper&#xff1a;盛名之下&#xff0c;其实难副&#xff1f; Whisper 的崛起与承诺 严重缺陷的曝光 风险分析 应对措施 结论 在人工智能的浪潮中&#xff0c;OpenAI 一直以其创新性和强大的技术实力备受瞩目。然而&#xff0c;最近 OpenAI 的语音转写工具 Wh…

【MySQL】可重复读级别下基于Next Key Lock解决幻读

昨天读到了一篇文章[1]&#xff0c;里面讲&#xff0c;面试官说mysql的可重复读级别下有解决幻读的方式&#xff0c;最后公布了答案&#xff0c;是在sql后面加for update。这么说倒是没错&#xff0c;但是这种问法给我一种奇怪的感觉&#xff0c;因为for update无论在哪个隔离级…

Kaggle “Reducing Commercial Aviation Fatalities” 比赛 生理数据分析

1、背景 Kaggle在2018 年 12 月 20 日举办“Reducing Commercial Aviation Fatalities” 比赛&#xff0c;通过收集飞行员的生理数据&#xff0c;判断飞行员何时会遇到麻烦吗&#xff1f;该比赛主要分析飞行员的问题&#xff0c;因为航班多、时间不固定&#xff0c;飞行员会出…

Python 字符串类型中 ``split(“\n“)`` 与 ``splitlines()`` 方法的一些区别

最近在以 self.__print("#" * 20 "\n") 调用自己写的 __print 接口时发现打印的时候 "\n" 没有打出来&#xff0c;进而发现了 split("\n") 与 splitlines() 方法的一些区别。 一个是参数上&#xff0c;split 需要传递一个字符串作为…