anchors.fill: parent
color: "white"
}
+
+//! [sprite]
AnimatedSprite {
id: sprite
width: 170
frameHeight: 170
loops: 3
}
+//! [sprite]
+
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
Item {
property alias color : rectangle.color
+//! [shadow]
BorderImage {
anchors.fill: rectangle
anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
border { left: 10; top: 10; right: 10; bottom: 10 }
source: "shadow.png"; smooth: true
}
+//! [shadow]
Rectangle { id: rectangle; anchors.fill: parent }
}
This is a collection of small QML examples relating to image elements.
- BorderImage shows off the various scaling modes of the BorderImage item.
+ 'BorderImage' shows off the various scaling modes of the BorderImage item
+ by setting its horizontalTileMode and verticalTileMode properties.
- Image shows off the various tiling modes of the Image item.
+ 'Image' shows off the various fill modes of the Image item.
- Shadows shows how to create a drop shadow for a rectangle using a BorderImage.
+ 'Shadows' shows how to create a drop shadow effect for a rectangular item
+ using a BorderImage:
+ \snippet examples/quick/imageelements/content/ShadowRectangle.qml delegate
- AnimatedSprite shows a simple use for the AnimatedSprite element.
+ 'AnimatedSprite' shows how to display a simple animation using an
+ AnimatedSprite element:
+ \snippet examples/quick/imageelements/animatedsprite.qml sprite
+ The sprite animation will loop 3 times.
- SpriteSequence demonstrates using the SpriteSequence element to draw an animated and slightly interactive bear.
+ 'SpriteSequence' demonstrates using a sprite sequence to draw an animated
+ and interactive bear.
+ The SpriteSequence defines 5 different sprites. The bear is initially in
+ a 'still' state:
+ \snippet examples/quick/imageelements/spritesequence.qml still
+ When the scene is clicked, an animation sets the sprite sequence to the
+ 'falling' states and animates the bear's y property.
+ \snippet examples/quick/imageelements/spritesequence.qml animation
+ At the end of the amimation the bear is set back to its initial state.
*/
Item {
onClicked: anim.start();
anchors.fill: parent
}
+//! [animation]
SequentialAnimation {
id: anim
ScriptAction { script: image.goalSprite = "falling"; }
ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
PropertyAction { target: image; property: "y"; value: 0 }
}
+//! [animation]
SpriteSequence {
id: image
width: 256
anchors.horizontalCenter: parent.horizontalCenter
interpolate: false
goalSprite: ""
+//! [still]
Sprite{
name: "still"
source: "content/BearSheet.png"
frameDuration: 100
to: {"still":1, "blink":0.1, "floating":0}
}
+//! [still]
Sprite{
name: "blink"
source: "content/BearSheet.png"
width: 320; height: 480; color: "steelblue"
ListView {
- anchors.fill: parent; model: Qt.fontFamilies()
+ anchors.fill: parent
+//! [model]
+ model: Qt.fontFamilies()
+//! [model]
delegate: Item {
height: 40; width: ListView.view.width
Text {
anchors.centerIn: parent
- text: modelData; font.family: modelData; font.pixelSize: 20; color: "white"
+ text: modelData
+//! [delegate]
+ font.family: modelData
+//! [delegate]
+ font.pixelSize: 20
+ color: "white"
}
}
}
width: 320; height: 480
color: "steelblue"
+//! [fontloader]
FontLoader { id: fixedFont; name: "Courier" }
+//! [fontloader]
+//! [fontloaderlocal]
FontLoader { id: localFont; source: "content/fonts/tarzeau_ocr_a.ttf" }
+//! [fontloaderlocal]
+//! [fontloaderremote]
FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" }
+//! [fontloaderremote]
Column {
anchors { fill: parent; leftMargin: 10; rightMargin: 10; topMargin: 10 }
color: "lightsteelblue"
width: parent.width
wrapMode: Text.WordWrap
- font.family: "Times"; font.pixelSize: 20
+//! [name]
+ font.family: "Times"
+//! [name]
+ font.pixelSize: 20
}
Text {
text: myText
font.pixelSize: 32
smooth: true
+//! [letterspacing]
SequentialAnimation on font.letterSpacing {
loops: Animation.Infinite;
NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 }
}
}
}
+//! [letterspacing]
SequentialAnimation on opacity {
loops: Animation.Infinite;
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at ante dui <a href=\"www.nokia.com\">www.nokia.com</a>.<br/>Curabitur ante est, pulvinar quis adipiscing a, iaculis id ipsum. Nunc blandit condimentum odio vel egestas.<br><ul type=\"bullet\"><li>Coffee<ol type=\"a\"><li>Espresso<li>Cappuccino<li>Latte</ol><li>Juice<ol type=\"1\"><li>Orange</li><li>Apple</li><li>Pineapple</li><li>Tomato</li></ol></li></ul><p><font color=\"#434343\"><i>Proin consectetur <b>sapien</b> in ipsum lacinia sit amet mattis orci interdum. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci. Praesent et tortor risus, viverra accumsan sapien. Sed faucibus eleifend lectus, sed euismod urna porta eu. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci."
+//! [layout]
onLineLaidOut: {
line.width = width / 2 - (margin)
line.x = width / 2 + margin
}
}
+//! [layout]
}
}
This is a collection of small QML examples relating to text. Each example is
a small QML file, usually containing or emphasizing a particular element or
feature. You can run and observe the behavior of each example.
+
+ 'Hello' shows how to change and animate the letter spacing of a Text element.
+ It uses a sequential animation to first animate the font.letterSpacing property
+ from 0 to 50 over 3 seconds and then move the text to a random position on screen:
+ \snippet examples/quick/text/fonts/hello.qml letterspacing
+
+ 'Fonts' shows different ways of using fonts with the Text element.
+ Simply by name, using the font.family property directly:
+ \snippet examples/quick/text/fonts/fonts.qml name
+ or using a FontLoader element:
+ \snippet examples/quick/text/fonts/fonts.qml fontloader
+ or using a FontLoader and specifying a local font file:
+ \snippet examples/quick/text/fonts/fonts.qml fontloaderlocal
+ or finally using a FontLoader and specifying a remote font file:
+ \snippet examples/quick/text/fonts/fonts.qml fontloaderremote
+
+ 'Available Fonts' shows how to use the QML global Qt object and a list view
+ to display all the fonts available on the system.
+ The ListView element uses the list of fonts available as its model:
+ \snippet examples/quick/text/fonts/availableFonts.qml model
+ Inside the delegate, the font family is set with the modelData:
+ \snippet examples/quick/text/fonts/availableFonts.qml delegate
+
+ 'Banner' is a simple example showing how to create a banner using a row of text
+ elements and a NumberAnimation.
+
+ 'Img tag' shows different ways of displaying images in a text elements using
+ the <img> tag.
+
+ 'Text Layout' shows how to create a more complex layout for a text element.
+ This example lays out the text in two colums using the onLineLaidOut handler
+ that allows you to position and resize each line:
+ \snippet examples/quick/text/styledtext-layout.qml layout
*/
Item {
projects / profile / ivi / qtdeclarative.git / commitdiff