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

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

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

当前回答

这是山景,这是我的照片。

让我们在代码中创建一个简单的图像视图。

var body: some View {
    Image(“mountains”)
}

结果看起来不太好。

让我们先调整它的大小,用一个刻度来适应它

var body: some View {
    Image(“mountains”)
        .resizable()
        .scaledToFit()
}

现在看起来好多了。

注意,这里有空白,因为图像是垂直拍摄的,而屏幕是水平的。

不使用尺寸来填充。

图像的某些部分超出了屏幕,但它看起来比默认的没有任何比例更好。

如果你点击预览里面的图片,你会看到图片有多大。蓝色的线是图像的边界。

其他回答

204

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

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

建议使用以下代码来匹配多个屏幕尺寸:

Image("dog")
    .resizable()
    .frame(minWidth: 200, idealWidth: 400, maxWidth: 600, minHeight: 100, idealHeight: 200, maxHeight: 300, alignment: .center)

为了使图像缩放到适合当前视图,我们使用resized()修饰符,它可以调整图像的大小以适应可用的空间。

例如:

 Image("ImageName")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 200, height: 200, alignment: .center)

在图像名称后使用. resized()方法。 确保在进行任何修改之前需要声明. resized()的用法。

是这样的:

Image("An Image file name")
    .resizable()
//add other modifications here 

另一种方法是使用scaleEffect修饰符:

Image(room.thumbnailImage)
    .resizable()
    .scaleEffect(0.5)