iOS开发 SwiftUI 2 : Image

初级代码游戏

846人浏览 · 2026-06-17 15:15:16

初级代码游戏 · 2026-06-17 15:15:16 发布

保持纵横比.aspectRatio(contentMode: .fit)

导入图片

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

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

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

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

图片的基本用法

显示图片

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

import SwiftUI

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

这就可以显示了：

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

自适应缩放

Image("pic1").resizable()

自动调整大小：

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

保持纵横比

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

效果：

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

保持纵横比.aspectRatio(contentMode: .fit)

另外一种保持纵横比的方法：

.aspectRatio(contentMode: .fit)

参数的另外一个值：.fill，不保持纵横比

指定大小

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

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

效果：

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

圆角

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

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

效果：

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

透明度

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

        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效果：

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用于第二张图片，具体效果依赖混合方法和实际的图片，下面是示例效果：

具体混合方法很多：

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

占满全面屏忽略安全区

从iPhoneX开始，屏幕不再是完整矩形，顶部和底部可能不完整或有缺失的部分叫做“安全区”（分明是不安全区好吧！），默认情况下视图不会使用安全区，为了让图片占满屏幕，需要使用下面的代码：

.edgesIgnoringSafeArea(.all)

未用的效果：

加上之后占满屏幕的效果：

.all表示所有情况都忽略安全区

.top .bottom仅忽略顶部或底部

.horizontal .vertical 仅在横屏或竖屏时忽略安全区

这个方法适用于所有视图，可以用于顶级视图，但通常只会给特定子视图使用（通常是背景图片）。用于顶级视图会导致所有子视图都基于整个屏幕，用于子视图则仅仅子视图使用全屏幕。

SF Symbols (官方图标库)

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

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

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

打开就是这些：

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

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

效果：

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

图标的修饰

图标的修饰类似Text

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

图标尺寸font

图标颜色foregroundStyle

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

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