Làm thế nào để thay đổi kích thước Hình ảnh bằng SwiftUI?

Tôi có một hình ảnh lớn trong Assets.xcassets. Làm thế nào để thay đổi kích thước hình ảnh này bằng SwiftUI để làm cho nó nhỏ lại?

Tôi đã cố gắng đặt khung nhưng nó không hoạt động:

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

Bạn nên sử dụng .resizable()trước khi áp dụng bất kỳ sửa đổi kích thước nào trên một Image.

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

Còn cái này thì sao:

struct ResizedImage: View {
    var body: some View {

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

    }
}

chế độ xem hình ảnh là 200x200, nhưng hình ảnh vẫn duy trì tỷ lệ khung hình gốc (thay đổi tỷ lệ trong khung đó)

Mở rộng câu trả lời và nhận xét của @ rraphael:

Kể từ Xcode 11 beta 2, bạn có thể chia tỷ lệ hình ảnh theo kích thước tùy ý, trong khi vẫn duy trì tỷ lệ khung hình gốc bằng cách bao bọc hình ảnh trong một phần tử khác.

ví dụ

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)

        }
    }
}

Các kết quả

(Vì một số lý do, hình ảnh hiển thị hơi mờ. Hãy yên tâm rằng đầu ra thực sự sắc nét.)

Trong SwiftUI, sử dụng .resizable()phương pháp để thay đổi kích thước hình ảnh. Bằng cách sử dụng .aspectRatio()và chỉ định mộtContentMode , bạn có thể "Chỉnh" hoặc "Tô" hình ảnh, nếu thích hợp.

Ví dụ, đây là mã thay đổi kích thước hình ảnh bằng cách điều chỉnh:

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

    }
}

Lưu ý: Tên hình ảnh của tôi là img_Logovà bạn có thể thay đổi tên hình ảnh xác định thuộc tính hình ảnh sau:

 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
                    }

Nếu bạn muốn sử dụng tỷ lệ khung hình với thay đổi kích thước thì bạn có thể sử dụng mã sau:

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

Vì chúng ta không nên hardcode / sửa kích thước hình ảnh. Đây là cách tốt hơn để cung cấp phạm vi điều chỉnh theo độ phân giải của màn hình trên các thiết bị khác nhau.

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)

Một cách tiếp cận khác là sử dụng công cụ scaleEffectsửa đổi:

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

Nếu bạn muốn thay đổi kích thước hình ảnh trong swiftUI, chỉ cần sử dụng mã sau:

import SwiftUI

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

Nhưng đây là vấn đề với điều này. Nếu bạn thêm Hình ảnh này bên trong Nút, Hình ảnh sẽ không được hiển thị, chỉ có một khối màu xanh lam ở đó. Để giải quyết vấn đề này, chỉ cần làm như sau:

import SwiftUI

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

Chà, nó có vẻ khá dễ dàng trong SwiftUI / Theo bản demo mà họ đưa ra: 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)
 }

Hy vọng nó giúp.

Bạn có thể xác định Thuộc tính Hình ảnh như sau: -

   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 

Điều rất quan trọng là phải hiểu cấu trúc logic của mã. Giống như trong SwiftUI, một hình ảnh không thể thay đổi kích thước theo mặc định. Do đó, để thay đổi kích thước bất kỳ hình ảnh nào, bạn phải làm cho nó có thể thay đổi kích thước bằng cách áp dụng công cụ sửa đổi .resizable () ngay sau khi bạn khai báo chế độ xem Hình ảnh.

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

Theo mặc định, các chế độ xem hình ảnh tự động định kích thước cho nội dung của chúng, điều này có thể khiến chúng vượt ra ngoài màn hình. Nếu bạn thêm công cụ sửa đổi có thể thay đổi kích thước () thì thay vào đó hình ảnh sẽ tự động được định kích thước để lấp đầy tất cả không gian có sẵn:

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

Tuy nhiên, điều đó cũng có thể khiến hình ảnh có tỷ lệ khung hình ban đầu bị bóp méo, bởi vì nó sẽ bị kéo căng theo mọi chiều bởi bất kỳ lượng nào cần thiết để làm cho nó lấp đầy không gian.

Nếu bạn muốn giữ nguyên tỷ lệ khung hình của nó, bạn nên thêm công cụ sửa đổi tỷ lệ khung hình bằng cách sử dụng .fill hoặc .fit, như sau:

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