Как изменить размер изображения с помощью SwiftUI?

У меня в Assets.xcassets есть большое изображение. Как изменить размер этого изображения с помощью SwiftUI, чтобы сделать его маленьким?

Я пытался установить фрейм, но не получается:

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

Вы должны использовать его, .resizable()прежде чем вносить какие-либо изменения в размер файла Image.

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

Как насчет этого:

struct ResizedImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFit()
                .frame(width: 200.0,height:200)

    }
}

размер изображения составляет 200x200, но изображение сохраняет исходное соотношение сторон (масштабирование в пределах этого кадра)

Расширение ответа и комментариев @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)

        }
    }
}

Полученные результаты

(По какой-то причине изображение выглядит немного размытым. Будьте уверены, что на самом деле изображение получается резким.)

В SwiftUI используйте этот .resizable()метод для изменения размера изображения. Используя .aspectRatio()и указав ContentMode, вы можете «По размеру» или «Заполнить» изображение в зависимости от ситуации.

Например, вот код, который изменяет размер изображения путем подгонки:

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

struct AvatarImage: View {
    var body: some View {

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

    }
}

Примечание: Мое имя изображения, img_Logoи вы можете изменить имя изображения, определив свойства изображения следующим образом:

 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
                    }

Если вы хотите использовать соотношение сторон с изменением размера, вы можете использовать следующий код:

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

Поскольку мы не должны жестко кодировать / фиксировать размер изображения. Вот лучший способ настроить диапазон в зависимости от разрешения экрана на разных устройствах.

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)

Другой подход - использовать scaleEffectмодификатор:

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

Если вы хотите изменить размер изображения в 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)
    }
   }
}

Что ж, это кажется довольно простым в 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)
 }

Надеюсь, это поможет.

Вы можете определить Свойства изображения следующим образом: -

   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 

Очень важно понимать логическую структуру кода. Как и в SwiftUI, размер изображения по умолчанию не изменяется. Таким образом, чтобы изменить размер любого изображения, вы должны сделать его изменяемым, применив модификатор .resizable () сразу после объявления представления изображения.

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

По умолчанию размеры представлений изображений автоматически соответствуют их содержимому, что может заставить их выходить за пределы экрана. Если вы добавите модификатор resizable (), тогда размер изображения будет автоматически изменяться так, чтобы оно заполняло все доступное пространство:

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

Однако это также может привести к искажению исходного соотношения сторон изображения, поскольку оно будет растянуто во всех измерениях на любую величину, необходимую для заполнения пространства.

Если вы хотите сохранить его соотношение сторон, вам следует добавить модификатор aspectRatio, используя .fill или .fit, например:

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