The Rectangle Type▲
For the most basic of visuals, https:// provides a https:// type to draw rectangles. These rectangles can be colored with a color or a vertical gradient. The https:// type can also draw borders on the rectangle.
For drawing custom shapes beyond rectangles, see the https:// type or display a pre-rendered image using the https:// type.
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"
}
}
The Image Type▲
https:// provides an https:// type which may be used to display images. The https:// type has a https:// property whose value can be a remote or local URL, or the URL of an image file embedded in a compiled resource file.
// 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"
}For more complex images there are other types similar to https://. https:// draws an image with grid scaling, suitable for images used as borders. https:// plays animated .gif and .mng images. https:// and https:// play animations comprised of multiple frames stored adjacently in a non animated image format.
For displaying video files and camera data, see the Qt Multimedia module.
Shared Visual Properties▲
Opacity and Visibility▲
The QML object types provided by Qt Quick have built-in support for https://. Opacity can be animated to allow smooth transitions to or from a transparent state. Visibility can also be managed with the https:// property more efficiently, but at the cost of not being able to animate it.
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"
}
}
}
Transforms▲
Qt Quick types have built-in support for transformations. If you wish to have your visual content rotated or scaled, you can set the https:// or https:// property. These can also be animated.
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"
}
}
For more complex transformations, see the https:// property.