Bagaimana cara mengubah ukuran Gambar dengan SwiftUI?

Saya memiliki gambar besar di Assets.xcassets. Bagaimana cara mengubah ukuran gambar ini dengan SwiftUI menjadi kecil?

Saya mencoba mengatur bingkai tetapi tidak berhasil:

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

Anda harus menggunakan .resizable()sebelum menerapkan modifikasi ukuran apa pun pada file Image.

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

Bagaimana dengan ini:

struct ResizedImage: View {
    var body: some View {

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

    }
}

tampilan gambar adalah 200x200, tetapi gambar mempertahankan rasio aspek asli (skala ulang dalam bingkai itu)

Memperluas jawaban dan komentar @ rraphael:

Mulai Xcode 11 beta 2, Anda dapat menskalakan gambar ke dimensi arbitrer, dengan tetap mempertahankan rasio aspek asli dengan menggabungkan gambar di elemen lain.

misalnya

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)

        }
    }
}

Hasil

(Untuk beberapa alasan, gambar ditampilkan sebagai sedikit buram. Yakinlah bahwa hasil sebenarnya tajam.)

Di SwiftUI, gunakan .resizable()metode untuk mengubah ukuran gambar. Dengan menggunakan .aspectRatio()dan menentukan a ContentMode, Anda dapat "Pas" atau "Isi" gambar, sebagaimana mestinya.

Misalnya, berikut adalah kode yang mengubah ukuran gambar dengan menyesuaikan:

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())

    }
}

Catatan: Nama gambar saya adalah img_Logodan Anda dapat mengubah nama gambar menentukan properti gambar ini:

 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
                    }

Jika Anda ingin menggunakan aspek rasio dengan mengubah ukuran maka Anda dapat menggunakan kode berikut:

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

Karena kita seharusnya tidak melakukan hardcode / memperbaiki ukuran gambar. Berikut adalah cara yang lebih baik untuk memberikan jangkauan untuk menyesuaikan dengan resolusi layar pada perangkat yang berbeda.

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)

Pendekatan lain adalah dengan menggunakan scaleEffectpengubah:

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

Jika Anda ingin mengubah ukuran gambar di swiftUI cukup gunakan kode berikut:

import SwiftUI

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

Tapi di sini ada masalah dengan ini. Jika Anda menambahkan Gambar ini di dalam Tombol, Gambar tidak akan ditampilkan, hanya blok warna biru yang akan ada di sana. Untuk mengatasi masalah ini, cukup lakukan ini:

import SwiftUI

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

Nah, Sepertinya cukup mudah di SwiftUI / Mengikuti demo yang mereka berikan: 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)
 }

Semoga membantu.

Anda dapat menentukan Properti Gambar sebagai berikut: -

   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 

Sangat penting untuk memahami struktur logis dari kode. Seperti di SwiftUI, gambar tidak dapat diubah ukurannya secara default. Jadi, untuk mengubah ukuran gambar apa pun Anda harus membuatnya dapat diubah ukurannya dengan menerapkan pengubah .resizable () segera setelah Anda mendeklarasikan tampilan Gambar.

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

Secara default, tampilan gambar secara otomatis menyesuaikan ukurannya dengan kontennya, yang mungkin membuatnya melampaui layar. Jika Anda menambahkan pengubah resizable () maka gambar akan secara otomatis diubah ukurannya sehingga memenuhi semua ruang yang tersedia:

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

Namun demikian, hal itu juga dapat menyebabkan gambar memiliki rasio aspek aslinya yang terdistorsi, karena gambar akan melebar di semua dimensi dengan jumlah berapa pun yang diperlukan untuk membuatnya memenuhi ruang.

Jika Anda ingin mempertahankan rasio aspeknya, Anda harus menambahkan pengubah rasio aspek menggunakan .fill atau .fit, seperti ini:

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