我在Assets.xcassets中有一个大图像。如何用SwiftUI调整这张图片的大小使它变小?

我试着设置框架,但它不起作用:

Image(room.thumbnailImage)
    .frame(width: 32.0, height: 32.0)

当前回答

204

如果我们在Assets.xcassets中有一个大图像。然后调整大小 首先,我们必须使用 resized(),然后使用frame()。

Image(room.thumbnailImage)
.resizable()
    .frame(width: 32.0, height: 32.0)

其他回答

在对图像应用任何大小修改之前,应该使用. resized()。

Image(room.thumbnailImage)
    .resizable()
    .frame(width: 32.0, height: 32.0)

正如他们所说,你必须使用在SwiftUI上调整图像的大小:

调用一个图像-> image ("somename") 然后,添加-> . resized ()

现在图像可以调整大小了

接下来,你可以应用. aspectratio来适应尺寸或只是填充框架。

resized的简单用法示例:

Image("somename")
.resizable()
.frame(width: 50px, height: 50px) 
struct AvatarImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFill() // <=== Saves aspect ratio
                .frame(width: 60.0, height:60)
                .clipShape(Circle())

    }
}

默认情况下,图像视图会自动根据其内容调整自身大小,这可能会使它们超出屏幕。如果你添加了resized()修饰符,那么图像将自动调整大小,以填充所有可用空间:

Image("example-image")
    .resizable()

然而,这也可能导致图像的原始纵横比被扭曲,因为它将在所有维度上被拉伸,无论拉伸的量是多少,以填充空间。

如果你想保持它的纵横比,你应该添加一个aspectRatio修饰符,使用.fill或.fit,就像这样:

Image("example-image")
    .resizable()
    .aspectRatio(contentMode: .fit)

如果你想使用纵横比调整大小,那么你可以使用以下代码:

Image(landmark.imageName).resizable()
                .frame(width: 56.0, height: 56.0)
                .aspectRatio(CGSize(width:50, height: 50), contentMode: .fit)