SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


SwiftUI - 图片

图像视图用于在用户界面上显示视觉内容,如图像、符号、图标、插图等。它是 SwiftUI 中上传和在 UI 上显示图像的常用方法。它可以支持所有类型的图像,如 png、jpeg、.heif、.pdf、.svg、SF 符号、.gif。在本章中,我们将在 XCode 中添加图像、如何显示图像以及有关图像的更多信息。

如何在 XCode 中添加图像?

在 SwiftUI 中,我们不能直接在 XCode 项目中添加图像,我们必须首先在项目的 Assets.xcassets 文件夹中添加图像。此文件夹包含项目中使用的所有图像,例如背景图像、应用程序图标等。要将图像添加到资产中,我们可以拖放图像或单击加号按钮。

在这里,我们可以为不同的设备屏幕添加三种不同比例(1x、2x、3x)的图像,这三种比例的分辨率不同,1x 的分辨率较低,而 3x 的分辨率较高。如果我们选择图像比例为单一,则该图像将用于所有比例。

Image

如何在 SwiftUI 中显示图像?

在 SwiftUI 中,我们可以借助图像视图显示图像。它是在应用程序的用户界面中添加图像或图标的最常见视图。它显示来自各种来源的图像,包括资产目录或 SF 符号。它还提供了各种自定义器来自定义图像,例如ignoreSafeArea(),frame(),rotationEffect()等。

语法

以下是语法−

Image("Image Name")

现在按照以下步骤在当前视图中插入图像−

  • 步骤1:打开一个新项目。

  • 步骤2:将图像拖放到Assets.xcassets文件夹中。

  • 步骤3:转到ContentView并使用Image视图插入图像。

示例1

以下SwiftUI程序使用图像视图插入图像。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack{
         Image("wallpaper")
            .resizable()
            .ignoresSafeArea()
         
         Text("TutorialsPoint")
            .font(.title)
            .foregroundStyle(.white)
            .bold()
         
      }
   }
}

#Preview {
   ContentView()
}

输出

Image

示例 2

以下 SwiftUI 程序用于使用图像视图插入 SF 符号。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack{
         Image(systemName:"cloud")
            .resizable()
            .scaledToFit()
            .foregroundStyle(.indigo)
      }
   }
}

#Preview {
   ContentView()
}

输出

Image

在 SwiftUI 中自定义图像

在 SwiftUI 中,我们可以使用以下内置修饰符 − 自定义图像

修饰符 描述
resizable() 使用此修饰符,我们可以根据容器的大小自动调整图像大小。
aspectRatio() 用于管理给定图像的纵横比。
frame() 用于修改图像的高度、宽度和对齐方式。
scaleToFit() 用于缩放图像以适合其父视图,而无需拉伸或压缩。
scaleToFill() 用于缩放图像以适合父视图,并进行拉伸或压缩。
clipped() 用于裁剪图像。或者我们可以说它隐藏了给定形状边界之外的内容。
clipShape() 它用于改变图像的形状。它提供 5 种不同的内置形状:圆形、矩形、圆角矩形、胶囊形和椭圆形
renderingMode() 它用于按原样或使用不同模式渲染图像。
padding() 它用于为给定图像提供填充。
opacity() 它用于调整图像的不透明度。

示例

以下 SwiftUI 程序用于对图像应用自定义。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Image("wallpaper")
            .resizable()
            .scaledToFit()
            .opacity(0.9)
            .frame(width: 200, height: 150)
         Image("wallpaper")
            .resizable()
            .scaledToFit()
            .clipShape(Circle())
            .opacity(1.2)
            .frame(width: 200, height: 150)
      }
   }
}

#Preview {
   ContentView()
}

输出

Image