swiftui基础组件Image加载图片，以及记载gif动图示例

想要在swiftui中展示图片，可以使用Image这个组件，这个组件可以加载本地图片和网络图片，也可以调整图片大小等设置。先大概看一下Image的方法有哪些可以用。

常用的Image属性

1.调整图像尺寸： 使用 resizable() 方法使图像可调整大小。您可以通过 frame() 方法设置具体的尺寸。

2.缩放图像： 使用 scaledToFit() 和 scaledToFill() 方法调整图像的缩放模式。scaledToFit() 会保持图像的原始纵横比并在给定的空间内最大化图像大小。scaledToFill() 会保持纵横比并填充给定的空间。

3.控制图像的缩放和裁剪方式：aspectRatio 有两种模式：.fit 和 .fill
.fit：保持图像的原始宽高比，确保整个图像在给定的空间内可见，即使这意味着在某些边缘留有空白。这是默认模式。
.fill：保持图像的原始宽高比，但确保填充整个给定空间，这可能会导致图像的某些部分被裁剪。

4.裁剪图像： 使用 clipped() 方法裁剪图像。这会删除在视图边界之外的所有图像部分。

5.设置图像透明度： 使用 opacity() 方法设置图像的透明度，0.0 为完全透明，1.0 为完全不透明。

6.设置图像的渲染模式： 使用 renderingMode() 方法设置图像的渲染模式。.template 模式将图像视为模板，从而可以使用 foregroundColor() 设置颜色。.original 模式将保留图像的原始颜色。

7.添加圆角： 使用 cornerRadius() 方法为图像添加圆角。

8.创建圆形图像： 使用 clipShape 为图像添加圆形裁剪。

9.添加叠加层： 使用 overlay() 方法在图像上添加叠加层。

10.添加边框： 使用 border() 方法为图像添加边框。

11.添加阴影： 使用 shadow() 方法为图像添加阴影。

12.添加背景： 使用 background() 方法为图像添加背景。

加载本地图片

将本地图片加载到项目资源中，在Assets.xcassets文件中，可以导入本地图片素材，Assets不仅可以导入图片，还可以设置颜色，这块我们以后会用到。点击Assets，在底部点击“+”按钮，选择Image Set（或者鼠标右键）：

或者也可以直接点击 Import 导入图片资源： 

然后就可以在项目中使用 .文件名 导入图片了，如果图片名称是数字开头的，会自动加上一个下划线前缀，如果是英文开头，直接使用点就可以自动提示加载的图片资源：

加载之后的效果：

Image(.miniapp)

该代码初始化了一张图片，我们在模拟器上可以看到显示了图片，这是创建图片视图的基本语法。

我们看到图片会很大，只能看到一部分。这时候如果我们想要看到完整的图片，我们需要对图片进行缩放：

Image(.course).resizable()

实现效果：

我们可以看到模拟器中预留出了顶栏和底栏两块区域，这是因为由于有“安全区”的存在。安全区是排除顶部栏(即状态栏)和底部栏的视图区域，它定义了可以安全地放置UI组件的视图区域。有了安全区，可以预防在编程时有些UI控件不知道去哪里的风险。如果你想忽略安全区，把视图撑开整个屏幕，可以通过设置.edgesIgnoringSafeArea修饰符来忽略安全区域。

从模拟器中我们可以看到，示例图片已经有点变形，这是因为.resizable()只是简单的拉伸缩放，而没有保持原有的比例，如果我们想等比例缩放，那么我们需要使用.scaledToFit()修饰，这样就可以保持原有图像的宽高比。

//等比例缩放
Image("示例图片").resizable().scaledToFit()

另外，使用.aspectRatio(contentMode: .fill)也可以达到同样的效果，都试试吧。如果我们想调整图片的大小，方便我们和别的UI控件形成美感，那么我们也可以调整下图片的显示尺寸:

.frame(width: 250)

在App开发中，如果我们想要用一张图片作为头像，但我们的图片有可能不是圆形的。这时候，我们可以将多余的部分裁剪掉，留下中间的部分：.clipShape(Circle())

如果图片色调太深了，与App整体色调相冲突。我们可以尝试降低下图片的透明度，使它和App更和谐：.opacity(0.5)

有时候，图片只是作为背景存在，在图片上还会有文字或者图标的情况，示例：壁纸类软件。这时候，我们需要在图片视图上再增加添加一个视图，“覆盖”在上面，我们可以用.overlay()修饰符:

Image("示例图片").resizable().aspectRatio(contentMode: .fit).frame(width: 350).clipShape(Circle()).opacity(0.8).overlay(Text("编辑").fontWeight(.bold).font(.system(size: 24)).foregroundColor(Color.white))

或者直接设置Text的背景为图片：

        Text("Hacking With Swift").foregroundStyle(.red).fontWeight(.bold).font(.system(size: 48)).padding(50).background(Image(.miniapp).resizable())

效果图：

再引入一个知识点，Image除了可以展示本地导入的图片、网络图片，还可以显示系统图标。Apple官方提供了超过3000个新符号供开发者使用，开发者几乎无需自己收集常用图标。官方地址：

https://developer.apple.com/sf-symbols/

下载安装后，我们可以快速了解图标符号的名称，从而快速使用它。使用方式很简单，只需要在Image里添加systemName就可以了:

Image(systemName: "moon.fill").font(.system(size: 80))

 

加载网络图片

加载网络图片有多种方式，我们一个一个看，哪种方便我们就使用哪种

1.加载 AsyncImage 通过URL加载的图像文件

AsyncImage(url: URL(string: "https://hadoappusage.oss-cn-shanghai.aliyuncs.com/static/mini_image/miniapp.jpg"))

因为SwiftUI不知道下载的图像有多大，因此默认情况下AsyncImage在加载时具有灵活的宽度和高度。因此如果你不指定固定的宽度和高度，在图像加载之前会占用大量空间，然后在图像加载之后会调整到正确的大小:

AsyncImage(url: URL(string: "https://hadoappusage.oss-cn-shanghai.aliyuncs.com/static/mini_image/miniapp.jpg")) { image inimage.resizable()} placeholder: {Color.green}.frame(width: 300, height: 200).clipShape(RoundedRectangle(cornerRadius: 25))

 

2.AsyncImagePhase动态加载图片

显示image加载过程，会有菊花的中间视图过度

        AsyncImage(url: URL(string: "https://hadoappusage.oss-cn-shanghai.aliyuncs.com/static/mini_image/miniapp.jpg")) { phase inswitch phase {case .failure: Image(systemName: "photo").font(.largeTitle)case let .success(image): image.resizable()default: ProgressView()}}.frame(width: 200, height: 200).clipShape(Circle())

3.使用KFImage库

KFImage仓库地址：https://github.com/onevcat/Kingfisher

KFImage(URL(string: "https://hadoappusage.oss-cn-shanghai.aliyuncs.com/static/mini_image/10003.jpg")).resizable().frame(height: 200)

 

加载GIF动图

加载显示gif动图可以使用开源的gif库：https://github.com/igorcferreira/GIFImage

这个依赖库可以加载网络gif图，也可以加载本地gif图，使用起来还是相当给力的。但是需要注意：这个依赖库最低支持ios17.0版本以上的系统，所以根据自己项目来哦。安装依赖库：

1.加载网络gif图片

需要先引入 import GIFImage 组件库，创建URL变量

// 引入组件库
import GIFImage// 定义gif动图url
let url = URL(string: "https://hadoappusage.oss-cn-shanghai.aliyuncs.com/static/pad_image/beautiful.gif")!// 使用组件
GIFImage(source: .remoteURL(url))// 或者
GIFImage(url: "https://hadoappusage.oss-cn-shanghai.aliyuncs.com/static/pad_image/beautiful.gif")

使用示例：

2.加载本地Gif图

现将本地文件添加到xcode项目中，点击菜单栏的File > Add Files to 项目:

 

或者直接拖动文件到左侧的文件栏中：

添加到项目中之后，就可以使用Bundle引入到代码中了，比如引入的是txt文件，那么就：

// forResource是文件名，ofType是文件类型
let filePath = Bundle.main.path(forResource: "example", ofType: "txt")

如果是gif文件，就导入：

let filePath = Bundle.main.path(forResource: "beautiful", ofType: "gif")

引入之后，使用GIFImage显示动图：

let filePath = Bundle.main.path(forResource: "beautiful", ofType: "gif")// 显示
GIFImage(source: .local(filePath: filePath!))

显示效果：

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

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

相关文章

Java如何分块读取大文件

Java如何分块读取大文件

在Java中，分块读取大文件通常使用FileInputStream或BufferedInputStream结合循环来实现。以下是一个基本的示例，展示如何分块读取大文件： import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io.IOException…
阅读更多...
黑龙江等保测评：强化网络安全的北方防线

黑龙江等保测评：强化网络安全的北方防线

在数字化时代，网络空间已成为国家发展的新领域，其安全直接关系到国家安全、社会稳定和个人隐私。作为中国东北的重要省份，黑龙江省积极响应国家网络安全战略，深入实施信息安全等级保护制度（简称“等保”）&a…
阅读更多...
量子密钥分发系统基础器件（一）：光纤干涉仪

量子密钥分发系统基础器件（一）：光纤干涉仪

干涉仪的基本原理是利用波的叠加来获得波的相位信息，从而获取实验中所关心的物理量。光纤干涉仪是由光学干涉仪发展而来的，利用光纤实现光的干涉，由于光纤取代透镜系统构成的光路具有柔软、形状可随意变化、传输距离远等特点，当前…
阅读更多...
【Linux】23. 线程封装

【Linux】23. 线程封装

如何理解C11中的多线程(了解) #include <iostream> #include <unistd.h> #include <thread>void thread_run() {while (true){std::cout << "我是新线程..." << std::endl;sleep(1);} } int main() {// 任何语言需要在Linux上实现多线…
阅读更多...
项目结构与模块划分策略

项目结构与模块划分策略

项目结构与模块划分策略可以根据项目的规模、功能需求和团队组成进行合理的设计。以下是一些常见的策略&#xff1a; 按功能划分&#xff1a;将项目按照不同的功能划分为不同的模块。每个模块负责处理特定的功能&#xff0c;如用户管理、订单处理、支付等。这种划分方式使得代码…
阅读更多...
Vue组件通讯$refs获取组件实例例子

Vue组件通讯$refs获取组件实例例子

在Vue中&#xff0c;$refs 是一个对象&#xff0c;它持有注册过 ref 特性 (attribute) 的所有 DOM 元素和子组件实例。你可以使用 $refs 在父组件中直接访问子组件的实例或者 DOM 元素。 下面是一个使用 $refs 获取子组件实例的例子&#xff1a; 首先&#xff0c;我们有一个子…
阅读更多...
解决IDEA菜单栏找不到VCS的问题，且使用IDEA推送新项目到托管仓库

解决IDEA菜单栏找不到VCS的问题，且使用IDEA推送新项目到托管仓库

问题描述&#xff1a; 在idea软件中使用git推送项目&#xff0c;idea页面顶部菜单栏无VCS 解决方案&#xff1a; 一&#xff1a;File->Settings->Version Control-> 点击 ->选择项目->VCS:->点击ok&#xff1a; 二&#xff1a;托管平台创建一个Git仓库来保…
阅读更多...
Mysql 8.0 主从复制及读写分离搭建记录

Mysql 8.0 主从复制及读写分离搭建记录

前言 搭建参考&#xff1a;搭建Mysql主从复制 为什么要做主从复制&#xff1f; 做数据的热备&#xff0c;作为后备数据库&#xff0c;主数据库服务器故障后&#xff0c;可切换到从数据库继续工作&#xff0c;避免数据丢失。架构的扩展。业务量越来越大&#xff0c;I/O访问频…
阅读更多...
MySQL忘记密码怎么办？教你无密码登录

MySQL忘记密码怎么办？教你无密码登录

MySQL免密钥登录 文章目录 MySQL免密钥登录一、修改配置文件二、无密码登录三、修改root密码四、使用新密码登录 一、修改配置文件 # 这个配置项的意思是告诉mysql跳过权限验证&#xff0c;允许任何用户以任何密码登录 [rootmysql ~]# echo "skip-grant-tables" >…
阅读更多...
6月来得及！考研数学120分复习规划：660/880/1000/1800怎么刷？

6月来得及！考研数学120分复习规划：660/880/1000/1800怎么刷？

首先&#xff0c;120分是个什么概念&#xff1f; 如果目标120&#xff0c;历年真题就要135以上。这是因为&#xff1a; 1. 习题册里都是历年真题改编&#xff0c;很多题型见过了&#xff1b; 2. 考场发挥有不确定因素&#xff0c;所以需要安全边界。 总体规划 那么&#xff…
阅读更多...
java.lang.StackOverflowError解决方案

java.lang.StackOverflowError解决方案

java.lang.StackOverflowError解决方案 java.lang.StackOverflowError 是一种运行时错误&#xff0c;通常发生在递归方法调用过深&#xff0c;导致线程的调用栈溢出时。这种错误表明程序中的递归调用没有适当地结束&#xff0c;或者递归深度超过了JVM的栈大小限制。 以下是一…
阅读更多...
FFmpeg 中 protocols 使用文档介绍

FFmpeg 中 protocols 使用文档介绍

描述 FFmpeg 中用ibavformat 库来提供的输入和输出协议。 protocols选项 关于 libavformat 库中协议选项的详细信息总结： 全局选项：libavformat 库提供了一些适用于所有协议的通用全局选项。 私有选项：每个协议也可能支持特定的私有选项，这些选项仅适用于相应的组件。 设…
阅读更多...
2105. 给植物浇水 II

2105. 给植物浇水 II

2105. 给植物浇水 II 题目链接&#xff1a;2105. 给植物浇水 II 代码如下&#xff1a; //双指针法 class Solution { public:int minimumRefill(vector<int>& plants, int capacityA, int capacityB) {int res0;int i0,jplants.size()-1;int acapacityA,bcapacity…
阅读更多...
[java基础揉碎]文件IO流

[java基础揉碎]文件IO流

目录 文件 什么是文件 文件流​编辑 常用的文件操作 创建文件方式一 创建文件方式二 创建文件方式三 tip:为什么new file 了还有执行createNewFile?new File的时候其实是在内存中创建了文件对象, 还没有在磁盘中, 当执行createNewFile的时候才是往磁盘中写入​编辑 …
阅读更多...
WWW24因果论文(1/8) | 利用强化学习(智能体)进行因果问答

WWW24因果论文(1/8) | 利用强化学习(智能体)进行因果问答

【摘要】因果问题询问不同事件或现象之间的因果关系。它们对于各种用例都很重要&#xff0c;包括虚拟助手和搜索引擎。然而&#xff0c;许多当前的因果问答方法无法为其答案提供解释或证据。因此&#xff0c;在本文中&#xff0c;我们旨在使用因果关系图来回答因果问题&#xf…
阅读更多...
JS-05拷贝继承

JS-05拷贝继承

目录 1 前置问题 2 拷贝继承实现 3 拷贝封装 4 浅拷贝和深拷贝 5 应用广泛 场景&#xff1a;想使用某个对象中的属性&#xff0c;但是又不能直接修改它&#xff0c;于是就可以创建一个该对象的拷贝 1 前置问题 直接将一个对象source赋值给另一个对象target&#xff0c;此…
阅读更多...
【Flutter】显式动画

【Flutter】显式动画

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Flutter学习 &#x1f320; 首发时间&#xff1a;2024年5月29日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e; 目…
阅读更多...
微服务项目搭建之技术选型

微服务项目搭建之技术选型

1、什么是微服务 Java微服务是一种架构风格&#xff0c;通过将单个Spring Boot应用程序拆分为一组小型、独立的Spring Boot服务来构建分布式系统。每个微服务都运行在自己的进程中&#xff0c;并使用轻量级通信机制&#xff08;如HTTP或消息队列&#xff09;来进行相互之间的通…
阅读更多...
【C++】从零开始构建红黑树 —— 节点设计，插入函数的处理 ，旋转的设计

【C++】从零开始构建红黑树 —— 节点设计，插入函数的处理 ，旋转的设计

送给大家一句话&#xff1a; 日子没劲&#xff0c;就过得特别慢&#xff0c;但凡有那么一点劲&#xff0c;就哗哗的跟瀑布似的拦不住。 – 巫哲 《撒野》 &#x1f30b;&#x1f30b;&#x1f30b;&#x1f30b;&#x1f30b;&#x1f30b;&#x1f30b;&#x1f30b; ⛰️⛰️…
阅读更多...
Vue组件通讯$attrs和$listeners例子

Vue组件通讯$attrs和$listeners例子

在Vue中&#xff0c;$attrs 和 $listeners 是两个非常有用的特性&#xff0c;它们允许你更轻松地实现组件间的通讯&#xff0c;特别是当你需要创建可复用的组件时。 $attrs 包含了父组件中未被子组件声明的属性 (class 和 style 除外)。当你不想在子组件中逐个声明父组件传递的…
阅读更多...
最新文章

Copyright @ 2022~2023