diff options
| author | Alexei Cazacov <alexei.cazacov@qt.io> | 2025-05-27 12:35:42 +0300 |
|---|---|---|
| committer | Alexei Cazacov <alexei.cazacov@qt.io> | 2025-08-01 13:42:37 +0000 |
| commit | 161464abf696d5f64c1e44c3b49313e84e51e709 (patch) | |
| tree | c1ea2cd15b211d74cae538726d94b77161650cd4 /src/quick/doc/snippets/qmlapp | |
| parent | cfacbf675b4f2881ce151b537d7dc18414037e6e (diff) | |
Doc: Create a Getting Started section for the Qt Quick module
This commit moves the "Building UIs with Qt Quick" tree section to the
Qt Quick module as a getting started subtree.
Changes:
qtquick-debugging.html - moved to concepts/Debugging
qtquick-deployment.html - moved to concepts/Deployment
qtquick-performance.html - moved to concepts/Performance
qml-codingconventions.html - moved to guidelines/Coding Conventions
scalability.html - moved to guidelines/Scalability
qtquick-qml-runtime.html - moved to the qml module
"Use Case" topics moved to Getting Started:
Visual Elements In QML -> Visual types
Positioners and Layouts In QML -> Positioners and layouts
Responding To User Input in QML -> Handling user input
Displaying Text In QML -> Displaying text
Animations In QML -> Animations
Style And Theme Support -> was deleted (it had almost zero useful info)
Integrating JavaScript in QML -> Integrating JavaScript in QML
Task-number: QTBUG-134130
Pick-to: 6.10 6.9
Change-Id: I14c8e4abadc587fbba788b7ce479c3a8364d0a42
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>
Reviewed-by: Kai Köhne <kai.koehne@qt.io>
Diffstat (limited to 'src/quick/doc/snippets/qmlapp')
29 files changed, 1026 insertions, 0 deletions
diff --git a/src/quick/doc/snippets/qmlapp/codingconventions/dotproperties.qml b/src/quick/doc/snippets/qmlapp/codingconventions/dotproperties.qml new file mode 100644 index 0000000000..c661c02c6f --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/codingconventions/dotproperties.qml @@ -0,0 +1,31 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Item { + +//! [0] +Rectangle { + anchors.left: parent.left; anchors.top: parent.top; anchors.right: parent.right; anchors.leftMargin: 20 +} + +Text { + text: "hello" + font.bold: true; font.italic: true; font.pixelSize: 20; font.capitalization: Font.AllUppercase +} + +//! [0] + +//! [1] +Rectangle { + anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 } +} + +Text { + text: "hello" + font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase } +} +//! [1] + +} diff --git a/src/quick/doc/snippets/qmlapp/codingconventions/javascript-imports.qml b/src/quick/doc/snippets/qmlapp/codingconventions/javascript-imports.qml new file mode 100644 index 0000000000..593e91884d --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/codingconventions/javascript-imports.qml @@ -0,0 +1,10 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +//![0] +import "myscript.js" as Script + +Rectangle { color: "blue"; width: Script.calculateWidth(parent) } +//![0] diff --git a/src/quick/doc/snippets/qmlapp/codingconventions/javascript-semicolons.qml b/src/quick/doc/snippets/qmlapp/codingconventions/javascript-semicolons.qml new file mode 100644 index 0000000000..230339614c --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/codingconventions/javascript-semicolons.qml @@ -0,0 +1,14 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +//![0] +MouseArea { + anchors.fill: parent + onClicked: event => { + var scenePos = mapToItem(null, event.x, event.y); + console.log("MouseArea was clicked at scene pos " + scenePos); + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/codingconventions/javascript.qml b/src/quick/doc/snippets/qmlapp/codingconventions/javascript.qml new file mode 100644 index 0000000000..88218abc99 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/codingconventions/javascript.qml @@ -0,0 +1,42 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Rectangle { + +//![0] +Rectangle { + color: "blue" + width: parent.width / 3 +} +//![0] + +//![1] +Rectangle { + color: "blue" + width: { + var w = parent.width / 3; + console.debug(w); + return w; + } +} +//![1] + +//![2] +function calculateWidth(object : Item) : double +{ + var w = object.width / 3; + // ... + // more javascript code + // ... + console.debug(w); + return w; +} + +Rectangle { + color: "blue" + width: calculateWidth(parent) +} +//![2] +} diff --git a/src/quick/doc/snippets/qmlapp/codingconventions/myscript.js b/src/quick/doc/snippets/qmlapp/codingconventions/myscript.js new file mode 100644 index 0000000000..60542369a8 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/codingconventions/myscript.js @@ -0,0 +1,9 @@ +function calculateWidth(parent) +{ + var w = parent.width / 3; + // ... + // more javascript code + // ... + console.debug(w); + return w; +} diff --git a/src/quick/doc/snippets/qmlapp/codingconventions/photo.qml b/src/quick/doc/snippets/qmlapp/codingconventions/photo.qml new file mode 100644 index 0000000000..3863cf41cd --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/codingconventions/photo.qml @@ -0,0 +1,58 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +//! [0] +Rectangle { + id: photo // id on the first line makes it easy to find an object + + property bool thumbnail: false // property declarations + property alias image: photoImage.source + + signal clicked // signal declarations + + function doSomething(x) // javascript functions + { + return x + photoImage.width; + } + + color: "gray" // object properties + x: 20 // try to group related properties together + y: 20 + height: 150 + width: { // large bindings + if (photoImage.width > 200) { + photoImage.width; + } else { + 200; + } + } + + states: [ + State { + name: "selected" + PropertyChanges { target: border; color: "red" } + } + ] + + transitions: [ + Transition { + from: "" + to: "selected" + ColorAnimation { target: border; duration: 200 } + } + ] + + Rectangle { // child objects + id: border + anchors.centerIn: parent + color: "white" + + Image { + id: photoImage + anchors.centerIn: parent + } + } +} +//! [0] diff --git a/src/quick/doc/snippets/qmlapp/codingconventions/qualifiedaccess.qml b/src/quick/doc/snippets/qmlapp/codingconventions/qualifiedaccess.qml new file mode 100644 index 0000000000..e0cca796fe --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/codingconventions/qualifiedaccess.qml @@ -0,0 +1,16 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +//![0] +Item { + id: root + + property int rectangleWidth: 50 + + Rectangle { + width: root.rectangleWidth + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/codingconventions/signalhandler.qml b/src/quick/doc/snippets/qmlapp/codingconventions/signalhandler.qml new file mode 100644 index 0000000000..06f9c6061a --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/codingconventions/signalhandler.qml @@ -0,0 +1,10 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +//![0] +MouseArea { + onClicked: event => { console.log(`${event.x},${event.y}`); } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/qml-extending-types/components/MessageLabel.qml b/src/quick/doc/snippets/qmlapp/qml-extending-types/components/MessageLabel.qml new file mode 100644 index 0000000000..6701229e7f --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/qml-extending-types/components/MessageLabel.qml @@ -0,0 +1,38 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause +//![0] +// MessageLabel.qml +import QtQuick + +Rectangle { + height: 50 + property string message: "debug message" + property var msgType: ["debug", "warning" , "critical"] + color: "black" + + Column { + anchors.fill: parent + padding: 5.0 + spacing: 2 + Text { + text: msgType.toString().toUpperCase() + ":" + font.bold: msgType == "critical" + font.family: "Terminal Regular" + color: msgType === "warning" || msgType === "critical" ? "red" : "yellow" + ColorAnimation on color { + running: msgType == "critical" + from: "red" + to: "black" + duration: 1000 + loops: msgType == "critical" ? Animation.Infinite : 1 + } + } + Text { + text: message + color: msgType === "warning" || msgType === "critical" ? "red" : "yellow" + font.family: "Terminal Regular" + } + } + +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/qml-extending-types/components/application.qml b/src/quick/doc/snippets/qmlapp/qml-extending-types/components/application.qml new file mode 100644 index 0000000000..6def828a55 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/qml-extending-types/components/application.qml @@ -0,0 +1,33 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause +//![0] +// application.qml +import QtQuick +Window { + id: root + width: 180 + height: 180 + visible: true + Column { + anchors.fill: parent + padding: 1.5 + topPadding: 10.0 + bottomPadding: 10.0 + spacing: 5 + MessageLabel{ + width: root.width - 2 + msgType: "debug" + } + MessageLabel { + width: root.width - 2 + message: "This is a warning!" + msgType: "warning" + } + MessageLabel { + width: root.width - 2 + message: "A critical warning!" + msgType: "critical" + } + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/qml_overview.qml b/src/quick/doc/snippets/qmlapp/qml_overview.qml new file mode 100644 index 0000000000..3368d7fef2 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/qml_overview.qml @@ -0,0 +1,26 @@ +// Copyright (C) 2020 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//! [file] +import QtQuick +import QtQuick.Controls + +ApplicationWindow { + width: 400 + height: 400 + visible: true + + Button { + id: button + text: "A Special Button" + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + color: button.down ? "#d6d6d6" : "#f6f6f6" + border.color: "#26282a" + border.width: 1 + radius: 4 + } + } +} +//! [file] diff --git a/src/quick/doc/snippets/qmlapp/qtbinding/resources/example.qrc b/src/quick/doc/snippets/qmlapp/qtbinding/resources/example.qrc new file mode 100644 index 0000000000..5e4941512b --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/qtbinding/resources/example.qrc @@ -0,0 +1,10 @@ +<!DOCTYPE RCC> +<RCC version="1.0"> + +<qresource prefix="/"> + <file>main.qml</file> + <file>images/background.png</file> +</qresource> + +</RCC> + diff --git a/src/quick/doc/snippets/qmlapp/qtbinding/resources/main.cpp b/src/quick/doc/snippets/qmlapp/qtbinding/resources/main.cpp new file mode 100644 index 0000000000..e8ccde2fd1 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/qtbinding/resources/main.cpp @@ -0,0 +1,20 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include <QApplication> +#include <QQuickView> +#include <QQmlContext> + +//![0] +int main(int argc, char *argv[]) +{ + QApplication app(argc, argv); + + QQuickView view; + view.setSource(QUrl("qrc:/main.qml")); + view.show(); + + return app.exec(); +} +//![0] + diff --git a/src/quick/doc/snippets/qmlapp/qtbinding/resources/main.qml b/src/quick/doc/snippets/qmlapp/qtbinding/resources/main.qml new file mode 100644 index 0000000000..0df237b7f5 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/qtbinding/resources/main.qml @@ -0,0 +1,9 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +// main.qml +import QtQuick + +Image { source: "images/background.png" } +//![0] diff --git a/src/quick/doc/snippets/qmlapp/qtbinding/resources/resources.pro b/src/quick/doc/snippets/qmlapp/qtbinding/resources/resources.pro new file mode 100644 index 0000000000..5aee288a6e --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/qtbinding/resources/resources.pro @@ -0,0 +1,4 @@ +QT += qml + +SOURCES += main.cpp +RESOURCES += example.qrc diff --git a/src/quick/doc/snippets/qmlapp/usecases/animations.qml b/src/quick/doc/snippets/qmlapp/usecases/animations.qml new file mode 100644 index 0000000000..52a29d41bc --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/animations.qml @@ -0,0 +1,146 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick + +Item { + + width: 320 + height: 480 + + Rectangle { + color: "#272822" + width: 320 + height: 480 + } + + Column { + //![states] + + Item { + id: container + width: 320 + height: 120 + + Rectangle { + id: rect + color: "red" + width: 120 + height: 120 + + TapHandler { + onTapped: container.state === '' ? container.state = 'other' : container.state = '' + } + } + states: [ + // This adds a second state to the container where the rectangle is farther to the right + + State { name: "other" + + PropertyChanges { + target: rect + x: 200 + } + } + ] + transitions: [ + // This adds a transition that defaults to applying to all state changes + + Transition { + + // This applies a default NumberAnimation to any changes a state change makes to x or y properties + NumberAnimation { properties: "x,y" } + } + ] + } + //![states] + //![behave] + Item { + width: 320 + height: 120 + + Rectangle { + color: "green" + width: 120 + height: 120 + + // This is the behavior, and it applies a NumberAnimation to any attempt to set the x property + Behavior on x { + + NumberAnimation { + //This specifies how long the animation takes + duration: 600 + //This selects an easing curve to interpolate with, the default is Easing.Linear + easing.type: Easing.OutBounce + } + } + + TapHandler { + onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0 + } + } + } + //![behave] + //![constant] + Item { + width: 320 + height: 120 + + Rectangle { + color: "blue" + width: 120 + height: 120 + + // By setting this SequentialAnimation on x, it and animations within it will automatically animate + // the x property of this element + SequentialAnimation on x { + id: xAnim + // Animations on properties start running by default + running: false + loops: Animation.Infinite // The animation is set to loop indefinitely + NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad } + NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad } + PauseAnimation { duration: 250 } // This puts a bit of time between the loop + } + + TapHandler { + // The animation starts running when you click within the rectangle + onTapped: xAnim.running = true + } + } + } + //![constant] + + //![scripted] + Item { + width: 320 + height: 120 + + Rectangle { + id: rectangle + color: "yellow" + width: 120 + height: 120 + + TapHandler { + // The animation starts running when you click within the rectangle + onTapped: anim.running = true; + } + } + + // This animation specifically targets the Rectangle's properties to animate + SequentialAnimation { + id: anim + // Animations on their own are not running by default + // The default number of loops is one, restart the animation to see it again + + NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 } + + NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 } + } + } + //![scripted] + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/integratingjs-inline.qml b/src/quick/doc/snippets/qmlapp/usecases/integratingjs-inline.qml new file mode 100644 index 0000000000..faccb5b2f3 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/integratingjs-inline.qml @@ -0,0 +1,41 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick + +Item { + id: container + width: 320 + height: 480 + + function randomNumber() { + return Math.random() * 360; + } + + function getNumber() { + return container.randomNumber(); + } + + TapHandler { + // This line uses the JS function from the item + onTapped: rectangle.rotation = container.getNumber(); + } + + Rectangle { + color: "#272822" + width: 320 + height: 480 + } + + Rectangle { + id: rectangle + anchors.centerIn: parent + width: 160 + height: 160 + color: "green" + Behavior on rotation { RotationAnimation { direction: RotationAnimation.Clockwise } } + } + +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/integratingjs.qml b/src/quick/doc/snippets/qmlapp/usecases/integratingjs.qml new file mode 100644 index 0000000000..0e36c1c2ec --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/integratingjs.qml @@ -0,0 +1,33 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick +import "myscript.js" as Logic + +Item { + width: 320 + height: 480 + + Rectangle { + color: "#272822" + width: 320 + height: 480 + } + + TapHandler { + // This line uses the JS function from the separate JS file + onTapped: rectangle.rotation = Logic.getRandom(rectangle.rotation); + } + + Rectangle { + id: rectangle + anchors.centerIn: parent + width: 160 + height: 160 + color: "green" + Behavior on rotation { RotationAnimation { direction: RotationAnimation.Clockwise } } + } + +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/layouts.qml b/src/quick/doc/snippets/qmlapp/usecases/layouts.qml new file mode 100644 index 0000000000..d736775b1c --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/layouts.qml @@ -0,0 +1,105 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![import] +import QtQuick + +//![import] + +Column { + +//![direct] +Item { + width: 100; height: 100 + + Rectangle { + // Manually positioned at 20,20 + x: 20 + y: 20 + width: 80 + height: 80 + color: "red" + } +} +//![direct] + +//![anchors] +Item { + width: 200; height: 200 + + Rectangle { + // Anchored to 20px off the top right corner of the parent + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: 20 // Sets all margins at once + + width: 80 + height: 80 + color: "orange" + } + + Rectangle { + // Anchored to 20px off the top center corner of the parent. + // Notice the different group property syntax for 'anchors' compared to + // the previous Rectangle. Both are valid. + anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 20 } + + width: 80 + height: 80 + color: "green" + } +} +//![anchors] + +//![positioners] +Item { + width: 300; height: 100 + + Row { // The "Row" type lays out its child items in a horizontal line + spacing: 20 // Places 20px of space between items + + Rectangle { width: 80; height: 80; color: "red" } + Rectangle { width: 80; height: 80; color: "green" } + Rectangle { width: 80; height: 80; color: "blue" } + } +} +//![positioners] + +Item { + width: 300; height: 400 + + Rectangle { + id: middleRect + //This Rectangle has its y animated, for the others to follow + x: 120 + y: 220 + SequentialAnimation on y { + loops: -1 + NumberAnimation { from: 220; to: 380; easing.type: Easing.InOutQuad; duration: 1200 } + NumberAnimation { from: 380; to: 220; easing.type: Easing.InOutQuad; duration: 1200 } + } + width: 80 + height: 80 + color: "green" + } + Rectangle { + // x,y bound to the position of middleRect + x: middleRect.x - 100 + y: middleRect.y + width: 80 + height: 80 + color: "red" + } + + Rectangle { + // Anchored to the position of middleRect + anchors.left: middleRect.right + anchors.leftMargin: 20 + anchors.verticalCenter: middleRect.verticalCenter + width: 80 + height: 80 + color: "blue" + } +} + +} diff --git a/src/quick/doc/snippets/qmlapp/usecases/myscript.js b/src/quick/doc/snippets/qmlapp/usecases/myscript.js new file mode 100644 index 0000000000..ff629d9830 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/myscript.js @@ -0,0 +1,9 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +// myscript.js +function getRandom(previousValue) { + return Math.floor(previousValue + Math.random() * 90) % 360; +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/styling.qml b/src/quick/doc/snippets/qmlapp/usecases/styling.qml new file mode 100644 index 0000000000..92c1841444 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/styling.qml @@ -0,0 +1,29 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Window +import QtQuick.Controls.Styles + +ApplicationWindow { + + //![0] + Button { + text: qsTr("Hello World") + style: ButtonStyle { + background: Rectangle { + implicitWidth: 100 + implicitHeight: 25 + border.width: control.activeFocus ? 2 : 1 + border.color: "#FFF" + radius: 4 + gradient: Gradient { + GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#fff" } + GradientStop { position: 1 ; color: control.pressed ? "#000" : "#fff" } + } + } + } + //![0] + } +} diff --git a/src/quick/doc/snippets/qmlapp/usecases/text.qml b/src/quick/doc/snippets/qmlapp/usecases/text.qml new file mode 100644 index 0000000000..2ae891053f --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/text.qml @@ -0,0 +1,71 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick + +Item { + id: root + width: 480 + height: 320 + + Rectangle { + color: "#272822" + width: 480 + height: 320 + } + + Column { + spacing: 20 + + Text { + text: 'I am the very model of a modern major general!' + + // color can be set on the entire element with this property + color: "yellow" + + } + + Text { + // For text to wrap, a width has to be explicitly provided + width: root.width + + // This setting makes the text wrap at word boundaries when it goes + // past the width of the Text object + wrapMode: Text.WordWrap + + // You can use \ to escape quotation marks, or to add new lines (\n). + // Use \\ to get a \ in the string + text: 'I am the very model of a modern major general. I\'ve information \ + vegetable, animal and mineral. I know the kings of england and I \ + quote the fights historical; from Marathon to Waterloo in order categorical.' + + // color can be set on the entire element with this property + color: "white" + + } + + Text { + text: 'I am the very model of a modern major general!' + + // color can be set on the entire element with this property + color: "yellow" + + // font properties can be set effciently on the whole string at once + font { family: 'Courier'; pixelSize: 20; italic: true; capitalization: Font.SmallCaps } + + } + + Text { + // HTML like markup can also be used + text: '<font color="white">I am the <b>very</b> model of a modern <i>major general</i>!</font>' + + // This could also be written font { pointSize: 14 }. Both syntaxes are valid. + font.pointSize: 14 + + // StyledText format supports fewer tags, but is more efficient than RichText + textFormat: Text.StyledText + } + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/userinput-keys.qml b/src/quick/doc/snippets/qmlapp/usecases/userinput-keys.qml new file mode 100644 index 0000000000..f8f6273457 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/userinput-keys.qml @@ -0,0 +1,34 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick + +Item { + id: root + + width: 320 + height: 480 + + Rectangle { + color: "#272822" + width: 320 + height: 480 + } + + Rectangle { + id: rectangle + x: 40 + y: 20 + width: 120 + height: 120 + color: "red" + + focus: true + Keys.onUpPressed: rectangle.y -= 10 + Keys.onDownPressed: rectangle.y += 10 + Keys.onLeftPressed: rectangle.x += 10 + Keys.onRightPressed: rectangle.x -= 10 + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/userinput-text.qml b/src/quick/doc/snippets/qmlapp/usecases/userinput-text.qml new file mode 100644 index 0000000000..8df2634f92 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/userinput-text.qml @@ -0,0 +1,45 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +ApplicationWindow { + width: 300 + height: 200 + visible: true + + ColumnLayout { + anchors.fill: parent + TextField { + id: singleline + text: "Initial Text" + Layout.alignment: Qt.AlignHCenter | Qt.AlignTop + Layout.margins: 5 + background: Rectangle { + implicitWidth: 200 + implicitHeight: 40 + border.color: singleline.focus ? "#21be2b" : "lightgray" + color: singleline.focus ? "lightgray" : "transparent" + } + } + + TextArea { + id: multiline + placeholderText: "Initial text\n...\n...\n" + Layout.alignment: Qt.AlignLeft + Layout.fillWidth: true + Layout.fillHeight: true + Layout.margins: 5 + background: Rectangle { + implicitWidth: 200 + implicitHeight: 100 + border.color: multiline.focus ? "#21be2b" : "lightgray" + color: multiline.focus ? "lightgray" : "transparent" + } + } + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/userinput.qml b/src/quick/doc/snippets/qmlapp/usecases/userinput.qml new file mode 100644 index 0000000000..74d24b66f5 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/userinput.qml @@ -0,0 +1,32 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick + +Item { + id: root + + width: 320 + height: 480 + + Rectangle { + color: "#272822" + width: 320 + height: 480 + } + + Rectangle { + id: rectangle + x: 40 + y: 20 + width: 120 + height: 120 + color: "red" + + TapHandler { + onTapped: rectangle.width += 10 + } + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/visual-opacity.qml b/src/quick/doc/snippets/qmlapp/usecases/visual-opacity.qml new file mode 100644 index 0000000000..4787c3891a --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/visual-opacity.qml @@ -0,0 +1,46 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +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" + } + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/visual-rects.qml b/src/quick/doc/snippets/qmlapp/usecases/visual-rects.qml new file mode 100644 index 0000000000..e1b9256b08 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/visual-rects.qml @@ -0,0 +1,41 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +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" + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/visual-transforms.qml b/src/quick/doc/snippets/qmlapp/usecases/visual-transforms.qml new file mode 100644 index 0000000000..30f9d38bfa --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/visual-transforms.qml @@ -0,0 +1,35 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +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" + } +} +//![0] diff --git a/src/quick/doc/snippets/qmlapp/usecases/visual.qml b/src/quick/doc/snippets/qmlapp/usecases/visual.qml new file mode 100644 index 0000000000..36f21b3781 --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/visual.qml @@ -0,0 +1,29 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick + +Item { + + width: 320 + height: 480 + + Rectangle { + color: "#272822" + width: 320 + height: 480 + } + + //![image] + // 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" + } + //![image] +} +//![0] |