Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
BasicSteps 3: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(Cleanup) |
||
(2 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
[[Category:Developing_with_Qt::Qt Quick::Tutorial]] | [[Category:Developing_with_Qt::Qt Quick::Tutorial]] | ||
<code> | <code> | ||
// File: BasicSteps_3.qml | |||
// NOTE: For the three images voringsfossen1.jpg, bergen.jpg and cotton_grass.jpg, | |||
// you can take any image in JPEG format with the size 280x210 pixels. | |||
import QtQuick 1.0 | |||
Rectangle { | |||
width: 3 * 300; height: 300 | |||
Rectangle { | |||
// Photo 1 | // Photo 1 | ||
Rectangle { | |||
x: 0; y: 0 | |||
width: 300; height: 300 | |||
color: "#FFF8DC" // cornsilk | |||
Image { | Image { | ||
x: 10; y: 25 | |||
source: "voringsfossen1.jpg" | |||
} | |||
Text { | Text { | ||
x: 0; y: 235 | |||
text: "Voringsfossen" | |||
font.pixelSize: 20 | |||
width: 300; horizontalAlignment: Text.AlignHCenter | |||
height: 65; verticalAlignment: Text.AlignVCenter | |||
} | |||
} | |||
// Photo 2 | // Photo 2 | ||
Rectangle { | |||
x: 300; y: 0 | |||
width: 300; height: 300 | |||
color: "#FFF8DC" // cornsilk | |||
Image { | Image { | ||
x: 10; y: 25 | |||
source: "bergen.jpg" | |||
} | |||
Text { | Text { | ||
x: 0; y: 235 | |||
text: "Bergen" | |||
font.pixelSize: 20 | |||
width: 300; horizontalAlignment: Text.AlignHCenter | |||
height: 65; verticalAlignment: Text.AlignVCenter | |||
} | |||
} | |||
// Photo 3 | // Photo 3 | ||
Rectangle { | |||
x: 2 * 300; y: 0 | |||
width: 300; height: 300 | |||
color: "#FFF8DC" // cornsilk | |||
Image { | Image { | ||
x: 10; y: 25 | |||
source: "cotton_grass.jpg" | |||
} | |||
Text { | Text { | ||
x: 0; y: 235 | |||
text: "Cotton Grass" | |||
font.pixelSize: 20 | |||
width: 300; horizontalAlignment: Text.AlignHCenter | |||
height: 65; verticalAlignment: Text.AlignVCenter | |||
} | |||
} | |||
} | |||
</code> |
Latest revision as of 11:40, 28 June 2015
// File: BasicSteps_3.qml
// NOTE: For the three images voringsfossen1.jpg, bergen.jpg and cotton_grass.jpg,
// you can take any image in JPEG format with the size 280x210 pixels.
import QtQuick 1.0
Rectangle {
width: 3 * 300; height: 300
// Photo 1
Rectangle {
x: 0; y: 0
width: 300; height: 300
color: "#FFF8DC" // cornsilk
Image {
x: 10; y: 25
source: "voringsfossen1.jpg"
}
Text {
x: 0; y: 235
text: "Voringsfossen"
font.pixelSize: 20
width: 300; horizontalAlignment: Text.AlignHCenter
height: 65; verticalAlignment: Text.AlignVCenter
}
}
// Photo 2
Rectangle {
x: 300; y: 0
width: 300; height: 300
color: "#FFF8DC" // cornsilk
Image {
x: 10; y: 25
source: "bergen.jpg"
}
Text {
x: 0; y: 235
text: "Bergen"
font.pixelSize: 20
width: 300; horizontalAlignment: Text.AlignHCenter
height: 65; verticalAlignment: Text.AlignVCenter
}
}
// Photo 3
Rectangle {
x: 2 * 300; y: 0
width: 300; height: 300
color: "#FFF8DC" // cornsilk
Image {
x: 10; y: 25
source: "cotton_grass.jpg"
}
Text {
x: 0; y: 235
text: "Cotton Grass"
font.pixelSize: 20
width: 300; horizontalAlignment: Text.AlignHCenter
height: 65; verticalAlignment: Text.AlignVCenter
}
}
}