Як змінити розмір зображення за допомогою 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()та вказуючи a 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()

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

Якщо ви хочете зберегти співвідношення сторін, вам слід додати модифікатор aspeRatio, використовуючи або .fill, або .fit, наприклад:

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