diff options
Diffstat (limited to 'src/quick/doc')
8 files changed, 271 insertions, 5 deletions
diff --git a/src/quick/doc/snippets/pointerHandlers/dragHandlerAcceptedButtons.qml b/src/quick/doc/snippets/pointerHandlers/dragHandlerAcceptedButtons.qml new file mode 100644 index 0000000000..9aeceb04f6 --- /dev/null +++ b/src/quick/doc/snippets/pointerHandlers/dragHandlerAcceptedButtons.qml @@ -0,0 +1,81 @@ +// Copyright (C) 2024 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause +pragma ComponentBehavior: Bound +import QtQuick +import Qt.labs.animation +import Qt.labs.folderlistmodel + +//![0] +Rectangle { + id: canvas + width: 640 + height: 480 + color: "#333" + property int highestZ: 0 + + Repeater { + model: FolderListModel { nameFilters: ["*.qml"] } + + delegate: Rectangle { + required property string fileName + required property url fileUrl + required property int index + + id: frame + x: index * 30; y: index * 30 + width: 320; height: 240 + property bool dragging: ldh.active || rdh.active + onDraggingChanged: if (dragging) z = ++canvas.highestZ + border { width: 2; color: dragging ? "red" : "steelblue" } + color: "beige" + clip: true + + TextEdit { + // drag to select text + id: textEdit + textDocument.source: frame.fileUrl + x: 3; y: 3 + + BoundaryRule on y { + id: ybr + minimum: textEdit.parent.height - textEdit.height; maximum: 0 + minimumOvershoot: 200; maximumOvershoot: 200 + overshootFilter: BoundaryRule.Peak + } + } + + DragHandler { + id: rdh + // right-drag to position the "window" + acceptedButtons: Qt.RightButton + } + + WheelHandler { + target: textEdit + property: "y" + onActiveChanged: if (!active) ybr.returnToBounds() + } + + Rectangle { + anchors.right: parent.right + width: titleText.implicitWidth + 12 + height: titleText.implicitHeight + 6 + border { width: 2; color: parent.border.color } + bottomLeftRadius: 6 + Text { + id: titleText + color: "saddlebrown" + anchors.centerIn: parent + text: frame.fileName + textFormat: Text.PlainText + } + DragHandler { + id: ldh + // left-drag to position the "window" + target: frame + } + } + } + } +} +//![0] diff --git a/src/quick/doc/snippets/pointerHandlers/dragHandlerMargin.qml b/src/quick/doc/snippets/pointerHandlers/dragHandlerMargin.qml new file mode 100644 index 0000000000..7844d118e4 --- /dev/null +++ b/src/quick/doc/snippets/pointerHandlers/dragHandlerMargin.qml @@ -0,0 +1,27 @@ +// Copyright (C) 2024 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause +import QtQuick + +//! [entire] +Item { + width: 320 + height: 240 + //![draggable] + Rectangle { + width: 24 + height: 24 + border.color: "steelblue" + Text { + text: "it's\ntiny" + font.pixelSize: 7 + rotation: -45 + anchors.centerIn: parent + } + + DragHandler { + margin: 12 + } + } + //![draggable] +} +//! [entire] diff --git a/src/quick/doc/snippets/pointerHandlers/draggableGridView.qml b/src/quick/doc/snippets/pointerHandlers/draggableGridView.qml new file mode 100644 index 0000000000..f3a0cac8d2 --- /dev/null +++ b/src/quick/doc/snippets/pointerHandlers/draggableGridView.qml @@ -0,0 +1,121 @@ +// Copyright (C) 2024 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +pragma ComponentBehavior: Bound +import QtQml +import QtQuick +import QtQml.Models + +//! [entire] +GridView { + id: root + width: 320 + height: 480 + cellWidth: 80 + cellHeight: 80 + interactive: false + + displaced: Transition { + NumberAnimation { + properties: "x,y" + easing.type: Easing.OutQuad + } + } + + model: DelegateModel { + id: visualModel + model: 24 + property var dropTarget: undefined + property bool copy: false + delegate: DropArea { + id: delegateRoot + + width: 80 + height: 80 + + onEntered: drag => { + if (visualModel.copy) { + if (drag.source !== icon) + visualModel.dropTarget = icon + } else { + visualModel.items.move(drag.source.DelegateModel.itemsIndex, icon.DelegateModel.itemsIndex) + } + } + + Rectangle { + id: icon + objectName: DelegateModel.itemsIndex + + property string text + Component.onCompleted: { + color = Qt.rgba(0.2 + (48 - DelegateModel.itemsIndex) * Math.random() / 48, + 0.3 + DelegateModel.itemsIndex * Math.random() / 48, + 0.4 * Math.random(), + 1.0) + text = DelegateModel.itemsIndex + } + border.color: visualModel.dropTarget === this ? "black" : "transparent" + border.width: 2 + radius: 3 + width: 72 + height: 72 + anchors { + horizontalCenter: parent.horizontalCenter + verticalCenter: parent.verticalCenter + } + + states: [ + State { + when: dragHandler.active || controlDragHandler.active + ParentChange { + target: icon + parent: root + } + + AnchorChanges { + target: icon + anchors { + horizontalCenter: undefined + verticalCenter: undefined + } + } + } + ] + + Text { + anchors.centerIn: parent + color: "white" + font.pointSize: 14 + text: controlDragHandler.active ? "+" : icon.text + } + + //! [draghandlers] + DragHandler { + id: dragHandler + acceptedModifiers: Qt.NoModifier + onActiveChanged: if (!active) visualModel.dropTarget = undefined + } + + DragHandler { + id: controlDragHandler + acceptedModifiers: Qt.ControlModifier + onActiveChanged: { + visualModel.copy = active + if (!active) { + visualModel.dropTarget.text = icon.text + visualModel.dropTarget.color = icon.color + visualModel.dropTarget = undefined + } + } + } + //! [draghandlers] + + Drag.active: dragHandler.active || controlDragHandler.active + Drag.source: icon + Drag.hotSpot.x: 36 + Drag.hotSpot.y: 36 + } + } + } +} +//! [entire] diff --git a/src/quick/doc/snippets/qml/font.qml b/src/quick/doc/snippets/qml/font.qml new file mode 100644 index 0000000000..5f76d6fc30 --- /dev/null +++ b/src/quick/doc/snippets/qml/font.qml @@ -0,0 +1,22 @@ +// Copyright (C) 2024 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Item { +//! [text] + Text { + font.family: "Helvetica" + font.pointSize: 13 + font.bold: true + } +//! [text] + +//! [structured-value-construction] + readonly property font myFont: ({ + family: "Helvetica", + pointSize: 13, + bold: true + }) +//! [structured-value-construction] +} diff --git a/src/quick/doc/snippets/qml/tableview/editdelegate.qml b/src/quick/doc/snippets/qml/tableview/editdelegate.qml index 11de5f5434..c5274e5ac7 100644 --- a/src/quick/doc/snippets/qml/tableview/editdelegate.qml +++ b/src/quick/doc/snippets/qml/tableview/editdelegate.qml @@ -46,7 +46,7 @@ Window { display = text // 'display = text' is short-hand for: // let index = TableView.view.index(row, column) - // TableView.view.model.setData(index, text, Qt.DisplayRole) + // TableView.view.model.setData(index, "display", text) } } } diff --git a/src/quick/doc/snippets/qml/windowPalette.qml b/src/quick/doc/snippets/qml/windowPalette.qml index 0638213c57..5a9219c638 100644 --- a/src/quick/doc/snippets/qml/windowPalette.qml +++ b/src/quick/doc/snippets/qml/windowPalette.qml @@ -17,12 +17,14 @@ Window { palette.active.window: "peachpuff" palette.windowText: "brown" +//![text-item] Text { anchors.centerIn: parent // here we use the Window.active attached property and the Item.palette property color: Window.active ? palette.active.windowText : palette.inactive.windowText text: Window.active ? "active" : "inactive" } +//![text-item] Button { text: "Button" diff --git a/src/quick/doc/src/guidelines/qtquick-toolsnutilities.qdoc b/src/quick/doc/src/guidelines/qtquick-toolsnutilities.qdoc index 8719c78b30..87397e43b4 100644 --- a/src/quick/doc/src/guidelines/qtquick-toolsnutilities.qdoc +++ b/src/quick/doc/src/guidelines/qtquick-toolsnutilities.qdoc @@ -58,6 +58,15 @@ capable of rendering changes to the code in realtime. It avoids the need to rebuild the application after every code change and install it on the target device. You can also extend it to build a custom runtime that suits your needs. +\section1 Felgo QML Hot Reload + +\l{Felgo QML Hot Reload Tool}{Felgo QML Hot Reload} is a third-party tool that +updates QML and JavaScript code in your running application without recompiling +and redeploying after each change. Unlike Live Reload, it preserves the +application's current state after a reload and can run on multiple devices +simultaneously to test and iterate code. Felgo Hot Reload supports all Qt +target platforms and architectures. + \section1 GammaRay \l{GammaRay Manual}{GammaRay} is a useful utility that provides diagnostic diff --git a/src/quick/doc/src/qmltypereference.qdoc b/src/quick/doc/src/qmltypereference.qdoc index fd47c9fa53..790a1ddc8c 100644 --- a/src/quick/doc/src/qmltypereference.qdoc +++ b/src/quick/doc/src/qmltypereference.qdoc @@ -110,7 +110,7 @@ available when you import \c QtQuick. \section1 SVG Color Reference The following table lists the available - \l {http://www.w3.org/TR/SVG/types.html#ColorKeywords}{SVG colors}: + \l {https://www.w3.org/TR/css-color-3/#svg-color}{SVG colors}: \include svg-colors.qdocinc @@ -157,9 +157,13 @@ available when you import \c QtQuick. \endlist Example: - \qml - Text { font.family: "Helvetica"; font.pointSize: 13; font.bold: true } - \endqml + + \snippet qml/font.qml text + + As \c font is a \l {QML_STRUCTURED_VALUE}{structured value} type, it can + also be constructed with a JavaScript object: + + \snippet qml/font.qml structured-value-construction When integrating with C++, note that any QFont value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically |