我在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)
当前回答
因为我们不应该硬编码/修复图像大小。这里提供了一种更好的方法,可以根据不同设备上的屏幕分辨率进行调整。
Image("ImageName Here")
.resizable()
.frame(minWidth: 60.0, idealWidth: 75.0, maxWidth: 95.0, minHeight: 80.0, idealHeight: 95.0, maxHeight: 110.0, alignment: .center)
.scaledToFit()
.clipShape(Capsule())
.shadow(color: Color.black.opacity(5.0), radius: 5, x: 5, y: 5)
其他回答
您可以使用resized()属性,但请记住,您不能在普通修饰符中使用resized,因此您必须使用Image扩展来实现它。
extension Image {
func customModifier() -> some View {
self
.resizable()
.aspectRatio(contentMode: .fit)
}
“图像属性”的定义如下:—
Image("\(Image Name)")
.resizable() // Let you resize the images
.frame(width: 20, height: 20) // define frame size as required
.background(RoundedRectangle(cornerRadius: 12) // Set round corners
.foregroundColor(Color("darkGreen")) // define foreground colour
您需要添加. 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)
扩展@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)
}
}
}
结果
(由于某些原因,图像显示得有点模糊。请放心,真正的输出是尖锐的。)