Visuelle Typen
Der Typ „Rectangle“
Für die grundlegendsten visuellen Elemente Qt Quick bietet den Typ „ Rectangle “ zum Zeichnen von Rechtecken. Diese Rechtecke können mit einer Farbe oder einem vertikalen Farbverlauf eingefärbt werden. Der Typ „ Rectangle “ kann außerdem Rahmen um das Rechteck zeichnen.
Zum Zeichnen benutzerdefinierter Formen, die über Rechtecke hinausgehen, siehe den Typ „ Canvas “ oder zeige ein vorgerendertes Bild mithilfe des Typs „ Image “ an.
import QtQuick
Item {
width: 320
height: 480
Rectangle {
color: "#272822"
width: 320
height: 480
}
// This element displays a rectangle with a gradient and a border
Rectangle {
x: 160
y: 20
width: 100
height: 100
radius: 8 // This gives rounded corners to the Rectangle
gradient: Gradient { // This sets a vertical gradient fill
GradientStop { position: 0.0; color: "aqua" }
GradientStop { position: 1.0; color: "teal" }
}
border { width: 3; color: "white" } // This sets a 3px wide black border to be drawn
}
// This rectangle is a plain color with no border
Rectangle {
x: 40
y: 20
width: 100
height: 100
color: "red"
}
}
Der Typ „Image“
Qt Quick bietet einen „ Image “-Typ, der zur Anzeige von Bildern verwendet werden kann. Der „ Image “-Typ verfügt über eine „ source “-Eigenschaft, deren Wert eine Remote- oder lokale URL oder die URL einer in einer kompilierten Ressourcendatei eingebetteten Bilddatei sein kann.
// This element displays an image. Because the source is online, it may take some time to fetch
Image {
x: 40
y: 20
width: 61
height: 73
source: "http://codereview.qt-project.org/static/logo_qt.png"
}Für komplexere Bilder gibt es weitere Typen, die dem Typ „ Image “ ähneln. Der Typ „ BorderImage “ zeichnet ein Bild mit Rasterskalierung, was sich für Bilder eignet, die als Rahmen verwendet werden. „ AnimatedImage “ spielt animierte GIF- und MNG-Bilder ab. „ AnimatedSprite “ und „ SpriteSequence “ spielen Animationen ab, die aus mehreren Frames bestehen, die nebeneinander in einem nicht animierten Bildformat gespeichert sind.
Informationen zur Anzeige von Videodateien und Kameradaten finden Sie im Qt Multimedia Modul.
Gemeinsame visuelle Eigenschaften
Alle visuellen Elemente, die von Qt Quick basieren auf dem Typ „Item“, der einen gemeinsamen Satz von Attributen für visuelle Elemente bereitstellt, darunter Opazitäts- und Transformationsattribute.
Deckkraft und Sichtbarkeit
Die von Qt Quick bereitgestellten QML-Objekttypen bieten integrierte Unterstützung für „ opacity “. Die Deckkraft kann animiert werden, um fließende Übergänge in einen transparenten Zustand oder aus diesem heraus zu ermöglichen. Die Sichtbarkeit lässt sich zudem mit der Eigenschaft „ visible “ effizienter steuern, allerdings auf Kosten der Animierbarkeit.
import QtQuick
Item {
width: 320
height: 480
Rectangle {
color: "#272822"
width: 320
height: 480
}
Item {
x: 20
y: 270
width: 200
height: 200
MouseArea {
anchors.fill: parent
onClicked: topRect.visible = !topRect.visible
}
Rectangle {
x: 20
y: 20
width: 100
height: 100
color: "red"
}
Rectangle {
id: topRect
opacity: 0.5
x: 100
y: 100
width: 100
height: 100
color: "blue"
}
}
}
Transformationen
Qt Quick -Typen bieten integrierte Unterstützung für Transformationen. Wenn Sie Ihre visuellen Inhalte drehen oder skalieren möchten, können Sie die Eigenschaften „ Item::rotation “ oder „ Item::scale “ festlegen. Diese können ebenfalls animiert werden.
import QtQuick
Item {
width: 320
height: 480
Rectangle {
color: "#272822"
width: 320
height: 480
}
Rectangle {
rotation: 45 // This rotates the Rectangle by 45 degrees
x: 20
y: 160
width: 100
height: 100
color: "blue"
}
Rectangle {
scale: 0.8 // This scales the Rectangle down to 80% size
x: 160
y: 160
width: 100
height: 100
color: "green"
}
}
Für komplexere Transformationen siehe die Eigenschaft „ Item::transform “.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
