iOS开发 SwiftUI 2 : Image

导入图片

图片的基本用法

显示图片

[SF Symbols (官方图标库)](#SF Symbols (官方图标库))

导入图片

首先需要导入图片，新版XCode是要在Assets.xcassets里导入，以前是叫Assets目录

图片需要为不同分辨率适配，因此一个名字下面需要几张不同的图片，系统会自动选择合适的文件。

我这里pic1是图片名，只有一张，2x和3x的没有做。后面用"pic1"就可以使用图片。

导入一张图片系统就会自动生成一个图片组。

图片的基本用法

显示图片

使用Image（"图片名"）即可显示图片：

Swift 复制代码

import SwiftUI

struct SwiftUIViewImage: View {
    var body: some View {
        Image("pic1")

这就可以显示了：

但是明显不适合界面，需要调整。

自适应缩放

Swift 复制代码

Image("pic1").resizable()

自动调整大小：

但是比例被改变了，大部分情况下我们希望保持纵横比。

保持纵横比

Swift 复制代码

Image("pic1").resizable().scaledToFit()

效果：

注意单独用.scaledToFit()不行，必须有resizable配合。

指定大小

大部分情况我们还需要指定图片大小：

Swift 复制代码

        Image("pic1").resizable().scaledToFit().frame(width: 300)

效果：

通常只需要设置宽度或高度即可，配合保持综合比。

圆角

圆角是美工的执念，实用意义不大。

Swift 复制代码

        Image("pic1").resizable().scaledToFit()
            .frame(width: 300)
            .cornerRadius(16)

效果：

.cornerRadius已经废弃，替代代码是".clipShape(RoundedRectangle(cornerRadius:16))"。注意RoundedRectangle不是成员，不能加点。作为对比，圆形的代码是".clipShape(.circle)"或".clipShape(Circle())"。

透明度

有时候需要降低透明度来配合整体效果：

Swift 复制代码

        Image("pic1").resizable().scaledToFit()
            .frame(width: 300)
            .clipShape(RoundedRectangle(cornerRadius:16))
        Image("pic1").resizable().scaledToFit()
            .frame(width: 300)
            .clipShape(RoundedRectangle(cornerRadius:16))
            .opacity(0.5)
        Image("pic1").resizable().scaledToFit()
            .frame(width: 300)
            .clipShape(RoundedRectangle(cornerRadius:16))
            .opacity(0.1)

透明度分别为默认值（1）、0.5和0.1:

混合模式

混合模式可以实现两张图片堆叠后糅合在一起，类似PS效果：

Swift 复制代码

struct SwiftUIViewImage: View {
    var body: some View {
        ZStack{
            Image("pic2").resizable().scaledToFit()
                .frame(width: 300)
                .clipShape(RoundedRectangle(cornerRadius:16))
            Image("pic1").resizable().scaledToFit()
                .frame(width: 300)
                .clipShape(RoundedRectangle(cornerRadius:16))
                .blendMode(.difference)
        }

因为要堆叠，需要ZStack，.blendMode用于第二张图片，具体效果依赖混合方法和实际的图片，下面是示例效果：

具体混合方法很多：

这个很专业了，需要的时候再研究吧。

SF Symbols (官方图标库)

搜索"SF Symbols"很容易查到官方下载地址：

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

下载下来的是dmg文件，安装后应用程序里面出现一个这个：

打开就是这些：

使用的时候可以直接用名字，不需要导入到项目里。

Swift 复制代码

            Image(systemName: "square.and.arrow.up").resizable().scaledToFit()
                .frame(width: 300)

效果：

因为图标本来很小，所以放大了许多。

图标的修饰

图标的修饰类似Text

虽然图标是Image，但是修饰像Text。

图标尺寸font

图标颜色foregroundStyle

下面设置了尺寸和颜色，又用图片的修饰方法修饰成了圆形：

Swift 复制代码

            Image(systemName: "square.and.arrow.up")
            .font(.system(size: 120))
            .foregroundStyle(.green)
            .clipShape(.circle)