จะปรับขนาดรูปภาพด้วย 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 Properties ได้ดังนี้: -

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

ตามค่าเริ่มต้นมุมมองภาพจะปรับขนาดให้พอดีกับเนื้อหาโดยอัตโนมัติซึ่งอาจทำให้เกินหน้าจอ หากคุณเพิ่มโมดิฟายเออร์ที่ปรับขนาดได้ () รูปภาพจะถูกปรับขนาดโดยอัตโนมัติแทนเพื่อให้เต็มพื้นที่ว่างทั้งหมด:

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

อย่างไรก็ตามนั่นอาจทำให้ภาพมีอัตราส่วนภาพเดิมผิดเพี้ยนไปด้วยเนื่องจากภาพจะถูกยืดออกในทุกมิติด้วยจำนวนเท่าใดก็ได้เพื่อให้เต็มพื้นที่

หากคุณต้องการคงอัตราส่วนไว้คุณควรเพิ่มตัวปรับอัตราส่วนอัตราส่วนโดยใช้. fil หรือ. fit เช่นนี้:

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