Wie kann ich die Bildgröße mit SwiftUI ändern?

Ich habe ein großes Bild in Assets.xcassets. Wie kann ich die Größe dieses Bildes mit SwiftUI ändern, um es klein zu machen?

Ich habe versucht, den Rahmen festzulegen, aber es funktioniert nicht:

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

Sie sollten verwenden, .resizable()bevor Sie Größenänderungen an einem vornehmen Image.

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

Wie wäre es damit:

struct ResizedImage: View {
    var body: some View {

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

    }
}

Die Bildansicht ist 200 x 200, aber das Bild behält das ursprüngliche Seitenverhältnis bei (Neuskalierung innerhalb dieses Rahmens).

Erweitern von @ rraphaels Antwort und Kommentaren:

Ab Xcode 11 Beta 2 können Sie ein Bild auf beliebige Abmessungen skalieren und dabei das ursprüngliche Seitenverhältnis beibehalten, indem Sie das Bild in ein anderes Element einschließen.

z.B

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)

        }
    }
}

Ergebnisse

(Aus irgendeinem Grund wird das Bild etwas verschwommen angezeigt. Seien Sie versichert, dass die tatsächliche Ausgabe scharf ist.)

Verwenden Sie in SwiftUI die .resizable()Methode, um die Größe eines Bildes zu ändern. Wenn Sie a verwenden .aspectRatio()und angeben ContentMode, können Sie das Bild je nach Bedarf entweder "anpassen" oder "füllen".

Hier ist zum Beispiel Code, der die Größe des Bildes durch Anpassen ändert:

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

    }
}

Hinweis: Mein Bildname lautet img_Logound Sie können den Bildnamen ändern. Definieren Sie die Bildeigenschaften wie folgt :

 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
                    }

Wenn Sie das Seitenverhältnis beim Ändern der Größe verwenden möchten, können Sie den folgenden Code verwenden:

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

Da sollten wir die Bildgröße nicht fest codieren / fixieren. Hier finden Sie eine bessere Möglichkeit, den Bereich entsprechend der Bildschirmauflösung auf verschiedenen Geräten anzupassen.

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)

Ein anderer Ansatz ist die Verwendung des scaleEffectModifikators:

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

Wenn Sie die Größe des Bildes in swiftUI ändern möchten, verwenden Sie einfach den folgenden Code:

import SwiftUI

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

Aber hier ist ein Problem damit. Wenn Sie dieses Bild in eine Schaltfläche einfügen, wird das Bild nicht angezeigt, sondern nur ein blauer Farbblock. Um dieses Problem zu lösen, gehen Sie einfach wie folgt vor:

import SwiftUI

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

Nun, in SwiftUI / Nach der Demo, die sie gegeben haben , scheint es ziemlich einfach zu sein : 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)
 }

Ich hoffe es hilft.

Sie können die Bildeigenschaften wie folgt definieren: -

   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 

Es ist sehr wichtig, die logische Struktur des Codes zu verstehen. Wie in SwiftUI kann die Größe eines Bilds standardmäßig nicht geändert werden. Um die Größe eines Bildes zu ändern, müssen Sie die Größe ändern, indem Sie den Modifikator .resizable () unmittelbar nach dem Deklarieren einer Bildansicht anwenden.

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

Standardmäßig passen sich Bildansichten automatisch an ihren Inhalt an, wodurch sie möglicherweise über den Bildschirm hinausgehen. Wenn Sie den Modifikator resizable () hinzufügen, wird das Bild stattdessen automatisch so dimensioniert, dass es den gesamten verfügbaren Speicherplatz ausfüllt:

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

Dies kann jedoch auch dazu führen, dass das ursprüngliche Seitenverhältnis des Bilds verzerrt wird, da es in allen Dimensionen um den Betrag gedehnt wird, der erforderlich ist, damit es den Raum ausfüllt.

Wenn Sie das Seitenverhältnis beibehalten möchten, sollten Sie einen Aspekt-Verhältnis-Modifikator mit .fill oder .fit wie folgt hinzufügen:

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