Qt 5.1.1, the first patch release for the Qt 5.1 series, released. It provides many improvements over Qt 5.1.0 as well as packages Qt Creator 2.8.1 to the installers. As a patch release, it does not add new features and remains binary compatible with Qt 5.1.0.
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
title: "Qteveloper(qteveloper.blogspot.com)";
width: 360
height: 360
Text {
id: myHello
anchors.horizontalCenter: parent.horizontalCenter
text: "Hello World"
}
Image {
id: myImage
source: "http://goo.gl/kdbgF8"
anchors {
left: parent.left
top: myHello.bottom
}
onStatusChanged:
switch(myImage.status){
case Image.Null:
myState.text = "no image has been set";
break;
case Image.Ready:
myState.text = "the image has been loaded\n"
+ myImage.width + " x " + myImage.height;
break;
case Image.Loading:
myState.text = "the image is currently being loaded";
break;
case Image.Error:
myState.text = "an error occurred while loading the image";
break;
}
}
Text {
id: myState
anchors.horizontalCenter: parent.horizontalCenter
anchors {
left: myImage.left
top: myImage.bottom
leftMargin: 20
topMargin: 10
}
}
}
 |
| qml example: set title of Window |
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
title: "Qteveloper(qteveloper.blogspot.com)";
width: 360
height: 360
Text {
anchors.horizontalCenter: parent.horizontalCenter
text: "Hello World"
}
}
 |
| qml example: detect mouse and draw on Canvas |
import QtQuick 2.0
Rectangle {
width: 360
height: 360
property int xpos
property int ypos
Canvas {
id: myCanvas
anchors.fill: parent
onPaint: {
var ctx = getContext('2d')
ctx.fillStyle = "red"
ctx.fillRect(xpos-1, ypos-1, 3, 3)
}
MouseArea{
anchors.fill: parent
onPressed: {
xpos = mouseX
ypos = mouseY
myCanvas.requestPaint()
}
onMouseXChanged: {
xpos = mouseX
ypos = mouseY
myCanvas.requestPaint()
}
onMouseYChanged: {
xpos = mouseX
ypos = mouseY
myCanvas.requestPaint()
}
}
}
}
 |
| qml example: Draw text on Canvas |
import QtQuick 2.0
Rectangle {
width: 360
height: 360
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext('2d');
ctx.font="50px";
ctx.fillText("qteveloper", 50, 150);
ctx.font="20px";
ctx.strokeText("qteveloper.blogspot.com", 50, 200);
}
}
}
 |
| qml example: Draw something on Canvas |
import QtQuick 2.0
Rectangle {
width: 360
height: 360
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext('2d');
ctx.fillStyle = "red"
ctx.fillRect(150, 200, 120, 120)
ctx.beginPath();
ctx.lineWidth = 3
ctx.strokeStyle = "blue"
ctx.ellipse(10, 10, 200, 200)
ctx.rect(50, 50, 200, 200)
ctx.stroke();
}
}
}
 |
| qml example: Slider |
import QtQuick 2.0
Rectangle {
width: 360
height: 360
Text {
id: myText
anchors.centerIn: parent
text: mySliderHandle.x
}
Rectangle {
id: mySlider
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
leftMargin: 20
rightMargin: 20
bottomMargin: 10
}
height: 20
radius: 10
smooth: true
gradient: Gradient {
GradientStop { position: 0.0; color: "white" }
GradientStop { position: 1.0; color: "gray" }
}
Rectangle {
id: mySliderHandle
x: 1; y: 1; width: 30; height: 20
radius: 10
smooth: true
color: "blue"
MouseArea {
anchors.fill: parent
drag.target: parent
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: parent.parent.width - 30
}
}
}
}
 |
| qml example: PathView |
import QtQuick 2.0
Rectangle {
width: 300
height: 360
ListModel {
id: myListModel
ListElement { dayOfWeek: "Sunday"; num: 0}
ListElement { dayOfWeek: "Monday"; num: 1}
ListElement { dayOfWeek: "Tuesday"; num: 2}
ListElement { dayOfWeek: "Wednesday"; num: 3}
ListElement { dayOfWeek: "Thursday"; num: 4}
ListElement { dayOfWeek: "Friday"; num: 5}
ListElement { dayOfWeek: "Saturday"; num: 6}
}
PathView {
id: myPathView
anchors.fill: parent
model: myListModel
delegate: Component{
Item{
property variant itemData: model.modelData
width: 100
height: 12
Column{
Text {
text: dayOfWeek;
anchors.horizontalCenter: parent.horizontalCenter }
}
//Use mouse click to select currentIndex
MouseArea{
id: itemMouseArea
anchors.fill: parent
onClicked: {
myPathView.currentIndex = index
}
}
}
}
//To read detail of Path,
//visit: http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-path.html
path: Path {
startX: 50; startY: 12
PathLine { x: 300-50; y: 360-12 }
}
focus: true
//Press Left/Right key to change currentIndex
Keys.onLeftPressed: decrementCurrentIndex()
Keys.onRightPressed: incrementCurrentIndex()
}
}
 |
| simple GridView |
import QtQuick 2.0
Rectangle {
width: 300
height: 360
ListModel {
id: myListModel
ListElement { dayOfWeek: "Sunday"; num: 0}
ListElement { dayOfWeek: "Monday"; num: 1}
ListElement { dayOfWeek: "Tuesday"; num: 2}
ListElement { dayOfWeek: "Wednesday"; num: 3}
ListElement { dayOfWeek: "Thursday"; num: 4}
ListElement { dayOfWeek: "Friday"; num: 5}
ListElement { dayOfWeek: "Saturday"; num: 6}
}
GridView {
width: parent.width; height: parent.height
cellWidth: 100; cellHeight: 20
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
model: myListModel
delegate: Column {
Text { text: num + " : " + dayOfWeek; anchors.horizontalCenter: parent.horizontalCenter }
}
focus: true
}
}
 |
| simple ListView |
import QtQuick 2.0
Rectangle {
width: 300
height: 360
ListModel {
id: myListModel
ListElement { dayOfWeek: "Sunday"; num: 0}
ListElement { dayOfWeek: "Monday"; num: 1}
ListElement { dayOfWeek: "Tuesday"; num: 2}
ListElement { dayOfWeek: "Wednesday"; num: 3}
ListElement { dayOfWeek: "Thursday"; num: 4}
ListElement { dayOfWeek: "Friday"; num: 5}
ListElement { dayOfWeek: "Saturday"; num: 6}
}
ListView {
width: parent.width; height: parent.height
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
model: myListModel
delegate: Column {
Text { text: num + " : " + dayOfWeek; anchors.horizontalCenter: parent.horizontalCenter }
}
focus: true
}
}
 |
| qml example: load ListView with data from ListModel |
import QtQuick 2.0
import QtWebKit 3.0
Rectangle {
width: 300
height: 360
ListModel {
id: myListModel
ListElement { dayOfWeek: "Sunday"; num: 0}
ListElement { dayOfWeek: "Monday"; num: 1}
ListElement { dayOfWeek: "Tuesday"; num: 2}
ListElement { dayOfWeek: "Wednesday"; num: 3}
ListElement { dayOfWeek: "Thursday"; num: 4}
ListElement { dayOfWeek: "Friday"; num: 5}
ListElement { dayOfWeek: "Saturday"; num: 6}
}
ListView{
id: myListView
width: parent.width
height: 100
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
focus: true
model: myListModel
delegate: Component{
Item{
width: parent.width
height: 12
Column{
Text {text: model.num + " : " + model.dayOfWeek}
}
MouseArea{
id: itemMouseArea
anchors.fill: parent
onClicked: {
myListView.currentIndex = index
}
}
}
}
onCurrentItemChanged: {
myText.text = myListModel.get(myListView.currentIndex).dayOfWeek
}
}
Text {
id: myText
anchors.centerIn: parent
}
}
 |
| qml example: Detect mouse click on ListView |
import QtQuick 2.0
import QtWebKit 3.0
Rectangle {
width: 300
height: 360
ListView{
id: myListView
width: parent.width
height: 100
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
focus: true
model: ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"]
delegate: Component{
Item{
property variant itemData: model.modelData
width: parent.width
height: 12
Column{
Text {text: model.modelData}
}
MouseArea{
id: itemMouseArea
anchors.fill: parent
onClicked: {
myListView.currentIndex = index
}
}
}
}
onCurrentItemChanged: myText.text = myListView.currentItem.itemData
}
Text {
id: myText
anchors.centerIn: parent
}
}