如何使用 SwiftUI 调整图像大小？

Question

我在 Assets.xcassets 中有一张大图。如何使用 SwiftUI 调整此图像以使其变小？

我尝试设置框架，但它不起作用：

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

Answer 1

您应该先使用 .resizable()，然后再对 Image 应用任何尺寸修改。

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

Answer 2

如果您想使用 宽高比 调整大小，那么您可以使用以下代码：

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

Answer 3

扩展@rraphael 的回答和评论：

从 Xcode 11 beta 2 开始，您可以将图像缩放到任意尺寸，同时通过将图像包裹在另一个元素中来保持原始纵横比。

例如

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)

        }
    }
}

结果

（由于某些原因，图像显示有点模糊。请放心，实际输出是清晰的。）

Answer 4

好吧，似乎在 SwiftUI 中非常简单/按照他们给出的演示：https://developer.apple.com/videos/play/wwdc2019/204

struct RoomDetail: View {
     let room: Room
     var body: some View {

     Image(room.imageName)
       .resizable()
       .aspectRatio(contentMode: .fit)
 }

希望对您有所帮助。

Answer 5

这个怎么样：

struct ResizedImage: View {
    var body: some View {
        Image("myImage")
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200)
    }
}

图像视图为 200x200，但图像保持原始纵横比（在该帧内重新缩放）。

Answer 6

如果您想在 swiftUI 中调整图像大小，只需使用以下代码：

import SwiftUI

    struct ImageViewer : View{
        var body : some View {
            Image("Ssss")
            .resizable()
            .frame(width:50,height:50)
        }
    }

但是这里有问题。如果您将此图像添加到按钮中，图像将不会显示，只会显示一块蓝色。要解决此问题，只需执行以下操作：

import SwiftUI

struct ImageViewer : View{
    var body : some View {
        Button(action:{}){
        Image("Ssss")
        .renderingMode(.original)
        .resizable()
        .frame(width:50,height:50)
    }
   }
}

Answer 7

在 SwiftUI 中，使用 .resizable() 方法调整图像大小。通过使用 .aspectRatio() 并指定 ContentMode，您可以根据需要“适合”或“填充”图像。

例如，这里是通过拟合调整图像大小的代码：

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

Answer 8

因为我们不应该 hardcode/fix 图片大小。这里有一个更好的方法来提供范围以根据不同设备上的屏幕分辨率进行调整。

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)

Answer 9

您可以定义图像属性如下：-

   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

Answer 10

理解代码的逻辑结构非常重要。就像在 SwiftUI 中一样，默认情况下图像是不可调整大小的。因此，要调整任何图像的大小，您必须在声明图像视图后立即应用 .resizable() 修饰符以使其可调整大小。

Image("An Image file name")
    .resizable()

Answer 11

Note : My image name is img_Logo and you can change image name define image properties this:

 VStack(alignment: .leading, spacing: 1) {
                        //Image Logo Start
                        Image("img_Logo")
                            .resizable()
                            .padding(.all, 10.0)
                            .frame(width: UIScreen.main.bounds.width * 0.4, height: UIScreen.main.bounds.height * 0.2)
                        //Image Logo Done
                    }

Answer 12

struct AvatarImage: View {
    var body: some View {

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

    }
}

Answer 13

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

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

Answer 14

默认情况下，图像视图会自动根据其内容调整自身大小，这可能会使它们超出屏幕范围。如果您添加 resizable() 修饰符，那么图像将自动调整大小以填充所有可用的 space:

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

但是，这也可能会导致图像的原始宽高比失真，因为它会在所有维度上被拉伸以填充 space。

如果您想保持其纵横比，您应该使用 .fill 或 .fit 添加 aspectRatio 修饰符，如下所示：

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

Answer 15

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

像这样：

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

Answer 16

可以使用resizable() 属性，但是要记住不能在普通修饰符中使用resizable，所以必须使用Image extension来实现它。

extension Image {
    func customModifier() -> some View {
        self
            .resizable()
            .aspectRatio(contentMode: .fit)
    }

Answer 17

为了使图像缩放以适应当前视图，我们使用 resizable() 修饰符，它可以调整图像大小以适应可用 space。

例如：

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

Answer 18

建议使用以下代码匹配多种屏幕尺寸：

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

Answer 19

Image(systemName: "person.fill")
  .font(.system(size: 13))

如果您使用 systemName，

也将有效。

Answer 20

要以适合的纵横比和剪裁到边界来渲染图像，请使用此代码：

struct ContentView: View {
    var body: some View {
        Image("donuts")
            .resizable()
            .scaledToFill()
            .frame(width: 200, height: 200)
            .border(Color.pink)
            .clipped()
    }
}

结果：

Answer 21

您需要添加 .resizable 修饰符，才能更改图像的大小

代码将如下所示：

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

Answer 22

您还可以使用：

Image("Example")
   .scaleEffect(NumberWithSizeBetweenZeroAndOne)

Answer 23

这里是山景，这是我的照片。

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

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

结果看起来不太好。

我们调整一下大小，先用比例尺来适应

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

现在看起来好多了。

注意有白色space，因为图像是垂直拍摄的，屏幕是水平的。

不使用尺寸填充。

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

如果您在“预览”中单击图片，您会看到图片有多大。那条蓝线是图片的边框。

Answer 24

SwiftUI 为我们提供了 .resizable() 修饰符，可以让 SwiftUI 调整图像大小以适应其 space

struct ContentView: View {
    var body: some View {
        Image("home")
            .antialiased(true) //for smooth edges for scale to fill
            .resizable() // for resizing
            .scaledToFill() // for filling image on ImageView
    }
}

如何使用 SwiftUI 调整图像大小？

How to resize Image with SwiftUI?

ios

swift

swiftui