我在Assets.xcassets中有一个大图像。如何用SwiftUI调整这张图片的大小使它变小?
我试着设置框架,但它不起作用:
Image(room.thumbnailImage)
.frame(width: 32.0, height: 32.0)
我在Assets.xcassets中有一个大图像。如何用SwiftUI调整这张图片的大小使它变小?
我试着设置框架,但它不起作用:
Image(room.thumbnailImage)
.frame(width: 32.0, height: 32.0)
当前回答
正如他们所说,你必须使用在SwiftUI上调整图像的大小:
调用一个图像-> image ("somename") 然后,添加-> . resized ()
现在图像可以调整大小了
接下来,你可以应用. aspectratio来适应尺寸或只是填充框架。
resized的简单用法示例:
Image("somename")
.resizable()
.frame(width: 50px, height: 50px)
其他回答
为了使图像缩放到适合当前视图,我们使用resized()修饰符,它可以调整图像的大小以适应可用的空间。
例如:
Image("ImageName")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200, height: 200, alignment: .center)
在SwiftUI中,使用. resized()方法来调整图像的大小。通过使用. aspectratio()并指定内容模式,您可以根据需要“适合”或“填充”图像。
例如,下面是通过拟合来调整图像大小的代码:
Image("example-image")
.resizable()
.aspectRatio(contentMode: .fit)
默认情况下,图像视图会自动根据其内容调整自身大小,这可能会使它们超出屏幕。如果你添加了resized()修饰符,那么图像将自动调整大小,以填充所有可用空间:
Image("example-image")
.resizable()
然而,这也可能导致图像的原始纵横比被扭曲,因为它将在所有维度上被拉伸,无论拉伸的量是多少,以填充空间。
如果你想保持它的纵横比,你应该添加一个aspectRatio修饰符,使用.fill或.fit,就像这样:
Image("example-image")
.resizable()
.aspectRatio(contentMode: .fit)
使用下面的代码来渲染一个合适的宽高比和裁剪边界的图像:
struct ContentView: View {
var body: some View {
Image("donuts")
.resizable()
.scaledToFill()
.frame(width: 200, height: 200)
.border(Color.pink)
.clipped()
}
}
结果:
扩展@rraphael的回答和评论:
从Xcode 11 beta 2开始,你可以将图像缩放到任意尺寸,同时通过将图像包装在另一个元素中来保持原始的纵横比。
e.g.
struct FittedImage: View
{
let imageName: String
let width: CGFloat
let height: CGFloat
var body: some View {
VStack {
Image(systemName: imageName)
.resizable()
.aspectRatio(1, contentMode: .fit)
}
.frame(width: width, height: height)
}
}
struct FittedImagesView: View
{
private let _name = "checkmark"
var body: some View {
VStack {
FittedImage(imageName: _name, width: 50, height: 50)
.background(Color.yellow)
FittedImage(imageName: _name, width: 100, height: 50)
.background(Color.yellow)
FittedImage(imageName: _name, width: 50, height: 100)
.background(Color.yellow)
FittedImage(imageName: _name, width: 100, height: 100)
.background(Color.yellow)
}
}
}
结果
(由于某些原因,图像显示得有点模糊。请放心,真正的输出是尖锐的。)