这节主要讲iOS 体系中icon的和Image在SwiftUI中的运用

  1. icons
  2. Image

Icons

运用体系图片几乎和运用自定义图片一样，可是一个重点不同的当地是，咱们需求运用 Image(systemName:) 办法来加载体系图片。例如下面代码，加载了体系内置的心跳 icon.

那么 icon 在哪里能够找到了？其实体系有一个专门的app，你能够下载就能够看到对应的icon，只需求复制icon的称号，运用Image(systemName:) 办法即可显现。 地址：developer.apple.com/sf-symbols/

Icons & Image inSwiftUI

可是上面的代码和展现是有问题的，我设置了frame 宽和高都是200，可是图片很小。这是为什么呢？

这时咱们需求引入一个新的 特点 resizable。 在 SwiftUI 中，Image 视图供给了.resizable() 修饰符，用于指定图画在显现时是否能够主动调整大小。当您在创建 Image 视图时，假如运用了.resizable() 修饰符，那么图画将答应在其地点的父容器中自由调整大小，以习惯不同的尺度要求。

运用.resizable() 修饰符时，通常还需求指定图画的 aspectRatio ，以保证图画按份额进行调整。您能够经过设置 aspectRatio 参数来指定图画的宽高比，或许运用 scaledToFit() 或 scaledToFill() 办法来指定调整大小的办法。

Icons & Image inSwiftUI
设置图画份额 4：3，填充形式是.fit

Icons & Image inSwiftUI

以下是同一个图片的不同填充形式, 作用比照。这儿我用了一个线来风格，加强规模比照。能够看到运用fill填充的图片其实已经超过了父视图的大小了。

Icons & Image inSwiftUI

此刻咱们能够运用 clipped 来剪裁超出父视图的大小的部分

Icons & Image inSwiftUI

那么.fit 和.fill 有什么区别了？ 下面做了简单的比照

.fit：

  • 当运用.fit 作为 aspectRatio 参数时，图画会按照原始的宽高份额进行缩放，以习惯父容器的大小，并坚持图画的完整内容显现在父容器内。
  • 这意味着图画会按份额缩放，直到其间一个维度（宽度或高度）到达父容器的鸿沟，另一个维度可能会超出父容器而被裁剪掉。
  • 假如父容器的宽高份额和图画的宽高份额不一致，图画会被主动裁剪，以习惯父容器的鸿沟。

.fill：

  • 当运用.fill 作为 aspectRatio参数时，图画会按照原始的宽高份额进行缩放，以填满整个父容器，坚持图画的内容不变形。
  • 这意味着图画会按份额缩放，直到彻底掩盖父容器的鸿沟，但可能会有一部分图画超出父容器的鸿沟。
  • 假如父容器的宽高份额和图画的宽高份额不一致，图画会被拉伸以填满整个父容器，但不会坚持原始份额，可能导致图画内容变形。

renderingMode

SwiftUI 中，Image 视图供给了 renderingMode 特点，用于指定图片的烘托形式。这个特点答应您在显现图画时更改其显现款式，包括色彩和透明度等作用

Icons & Image inSwiftUI

VStack {
            Image(systemName: "lamp.table.fill")
                .renderingMode(.original)
                .resizable()
                .aspectRatio(0.75, contentMode: .fit)
//                .foregroundColor(Color.orange)
                .frame(width: 200, height: 200)
            Image(systemName: "lamp.table.fill")
                .renderingMode(.template)
                .resizable()
                .aspectRatio(0.75, contentMode: .fit)
                .foregroundColor(Color.orange)
                .frame(width: 200, height: 200)
        }

咱们只改变了烘托形式，就能够来改变原始图片的色彩和透明度了

这儿的 VStack 是一个布局容器，答应容器内的组件以竖直方向来布局UI元素

那么renderingMode 特点的作用是啥了。咱们来比照看看

renderingMode 是一个 Image.RenderingMode 枚举，包含以下几个选项：

  • .original：显现原始图画，不进行任何烘托修改。图画将以其原始色彩显现。
  • .template：将图画视为模板图画。这意味着图画的色彩将被忽略，而是运用它地点视图的前景色（foregroundColor）进行填充。适用于图标，使其根据前景色主动习惯外观。

Image

咱们的项目不但有体系的icon，也会有很多设计师给的图片，或许是一些 placeholder图片。这个时分就需求用到加载图片的函数，加载的代码如下，

Steve_jobs 是一张图片称号，详细作用如下

Image("steve_jobs")
            .resizable()
            .scaledToFit()
            .frame(width: 300, height: 300)
            .clipped()
            .cornerRadius(150)

Icons & Image inSwiftUI

其实和运用体系的icon没有什么大的不同

当你想把图片变成圆形时，上面供给了一种办法，当然你还能够运用其他办法来完成

体系供给了 clipshape 办法，答应你运用一个图形来作为剪切图片的参照

Icons & Image inSwiftUI

struct IconsAndImageSample: View {
    var body: some View {
        Image("steve_jobs")
            .resizable()
            .scaledToFit()
            .frame(width: 300, height: 300)
            .clipShape(Ellipse())
    }
}

也能够变成一个有圆角的图形

Icons & Image inSwiftUI

struct IconsAndImageSample: View {
    var body: some View {
        Image("steve_jobs")
            .resizable()
            .scaledToFit()
            .frame(width: 300, height: 300)
            .clipShape(RoundedRectangle(cornerRadius: 25.0))
    }
}

好了，icon和imag就介绍这么多。谢谢观看！