diff options
Diffstat (limited to 'examples/quick/views')
23 files changed, 590 insertions, 368 deletions
diff --git a/examples/quick/views/CMakeLists.txt b/examples/quick/views/CMakeLists.txt index 0eadd33a5a..6800983c6e 100644 --- a/examples/quick/views/CMakeLists.txt +++ b/examples/quick/views/CMakeLists.txt @@ -1,45 +1,36 @@ # Copyright (C) 2022 The Qt Company Ltd. -# SPDX-License-Identifier: BSD-3-Clause +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause cmake_minimum_required(VERSION 3.16) project(views LANGUAGES CXX) set(CMAKE_AUTOMOC ON) -if(NOT DEFINED INSTALL_EXAMPLESDIR) - set(INSTALL_EXAMPLESDIR "examples") -endif() - -set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quick/views") - find_package(Qt6 REQUIRED COMPONENTS Core Gui Qml Quick) +qt_standard_project_setup(REQUIRES 6.5) + add_subdirectory("../shared" "shared") qt_add_executable(viewsexample + WIN32 + MACOSX_BUNDLE main.cpp ) -set_target_properties(viewsexample PROPERTIES - WIN32_EXECUTABLE TRUE - MACOSX_BUNDLE TRUE -) - target_link_libraries(viewsexample PRIVATE - Qt::Core - Qt::Gui - Qt::Qml - Qt::Quick + Qt6::Core + Qt6::Gui + Qt6::Qml + Qt6::Quick ) add_dependencies(viewsexample views_shared) qt_add_qml_module(viewsexample URI views - AUTO_RESOURCE_PREFIX QML_FILES "delegatemodel/dragselection.qml" - "delegatemodel/slideshow.qml" "gridview/gridview-example.qml" "listview/content/PetsModel.qml" "listview/content/PressAndHoldButton.qml" @@ -88,9 +79,16 @@ qt_add_qml_module(viewsexample ) install(TARGETS viewsexample - RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" - BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" - LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" + BUNDLE DESTINATION . + RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR} + LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR} ) -bundle_shared(viewsexample) +qt_generate_deploy_qml_app_script( + TARGET viewsexample + OUTPUT_SCRIPT deploy_script + MACOS_BUNDLE_POST_BUILD + NO_UNSUPPORTED_PLATFORM_ERROR + DEPLOY_USER_QML_MODULES_ON_UNSUPPORTED_PLATFORM +) +install(SCRIPT ${deploy_script}) diff --git a/examples/quick/views/delegatemodel/delegatemodel.qmlproject b/examples/quick/views/delegatemodel/delegatemodel.qmlproject deleted file mode 100644 index e78ddcb187..0000000000 --- a/examples/quick/views/delegatemodel/delegatemodel.qmlproject +++ /dev/null @@ -1,17 +0,0 @@ -import QmlProject 1.0 - -Project { - mainFile: "slideshow.qml" - importPaths: [ "../../" ] - - /* Include .qml, .js, and image files from current directory and subdirectories */ - QmlFiles { - directory: "." - } - JavaScriptFiles { - directory: "." - } - ImageFiles { - directory: "." - } -} diff --git a/examples/quick/views/delegatemodel/dragselection.qml b/examples/quick/views/delegatemodel/dragselection.qml index 1a66264e1d..57a769fb29 100644 --- a/examples/quick/views/delegatemodel/dragselection.qml +++ b/examples/quick/views/delegatemodel/dragselection.qml @@ -5,6 +5,8 @@ import QtQml import QtQuick import QtQml.Models +pragma ComponentBehavior: Bound + Item { id: root @@ -15,6 +17,7 @@ Item { Component { id: packageDelegate +//![0] Package { id: packageRoot @@ -33,19 +36,39 @@ Item { Item { id: draggable + Drag.active: visibleContainer.drag.active +//![0] + width: 64 height: 64 - Drag.active: visibleContainer.drag.active - - anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } + anchors { + horizontalCenter: parent.horizontalCenter + verticalCenter: parent.verticalCenter + } states: State { when: visibleContainer.drag.active - AnchorChanges { target: draggable; anchors { horizontalCenter: undefined; verticalCenter: undefined} } - ParentChange { target: selectionView; parent: draggable; x: 0; y: 0 } - PropertyChanges { root.dragging: true } - ParentChange { target: draggable; parent: root } + AnchorChanges { + target: draggable + anchors { + horizontalCenter: undefined + verticalCenter: undefined + } + } + ParentChange { + target: selectionView + parent: draggable + x: 0 + y: 0 + } + PropertyChanges { + root.dragging: true + } + ParentChange { + target: draggable + parent: root + } } } DropArea { @@ -72,8 +95,16 @@ Item { radius: 8 gradient: Gradient { - GradientStop { id: gradientStart; position: 0.0; color: "#8AC953" } - GradientStop { id: gradientEnd; position: 1.0; color: "#8BC953" } + GradientStop { + id: gradientStart + position: 0.0 + color: "#8AC953" + } + GradientStop { + id: gradientEnd + position: 1.0 + color: "#8BC953" + } } border.width: 2 @@ -91,8 +122,13 @@ Item { } Rectangle { - anchors { right: parent.right; top: parent.top; margins: 3 } - width: 12; height: 12 + anchors { + right: parent.right + top: parent.top + margins: 3 + } + width: 12 + height: 12 color: packageRoot.DelegateModel.inSelected ? "black" : "white" radius: 6 @@ -108,27 +144,55 @@ Item { states: [ State { name: "selected" - ParentChange { target: content; parent: selectionContainer; x: 3; y: 3 } + ParentChange { + target: content + parent: selectionContainer + x: 3 + y: 3 + } PropertyChanges { packageRoot.DelegateModel.inItems: visibleContainer.drag.active gradientStart.color: "#017423" } - PropertyChanges { gradientStart.color: "#007423" } + PropertyChanges { + gradientStart.color: "#007423" + } }, State { name: "visible" - PropertyChanges { packageRoot.DelegateModel.inItems: true } - ParentChange { target: content; parent: visibleContainer; x: 3; y: 3 } - PropertyChanges { gradientStart.color: "#8AC953" } - PropertyChanges { gradientStart.color: "#8BC953" } + PropertyChanges { + packageRoot.DelegateModel.inItems: true + } + ParentChange { + target: content + parent: visibleContainer + x: 3 + y: 3 + } + PropertyChanges { + gradientStart.color: "#8AC953" + } + PropertyChanges { + gradientStart.color: "#8BC953" + } } ] transitions: Transition { - PropertyAction { target: packageRoot; properties: "DelegateModel.inItems" } + PropertyAction { + target: packageRoot + properties: "DelegateModel.inItems" + } ParentAnimation { target: content - NumberAnimation { target: content; properties: "x,y"; duration: 500 } + NumberAnimation { + target: content + properties: "x,y" + duration: 500 + } + } + ColorAnimation { + targets: [gradientStart, gradientEnd] + duration: 500 } - ColorAnimation { targets: [gradientStart, gradientEnd]; duration: 500 } } } } @@ -139,7 +203,10 @@ Item { model: 35 delegate: packageDelegate - groups: DelegateModelGroup { id: selectedItems; name: "selected" } + groups: DelegateModelGroup { + id: selectedItems + name: "selected" + } Component.onCompleted: parts.selection.filterOnGroup = "selected" } @@ -155,13 +222,16 @@ Item { path: Path { startX: 0 startY: 0 - PathLine { x: 64; y: 64 } + PathLine { + x: 64 + y: 64 + } } } GridView { id: itemsView - anchors { fill: parent } + anchors.fill: parent cellWidth: 64 cellHeight: 64 model: visualModel.parts.visible diff --git a/examples/quick/views/delegatemodel/flipable.pro b/examples/quick/views/delegatemodel/flipable.pro deleted file mode 100644 index ba00bf792c..0000000000 --- a/examples/quick/views/delegatemodel/flipable.pro +++ /dev/null @@ -1,9 +0,0 @@ -TEMPLATE = app - -QT += quick qml -SOURCES += main.cpp - -RESOURCES += flipable.qrc - -target.path = $$[QT_INSTALL_EXAMPLES]/quick/customitems/flipable -INSTALLS += target diff --git a/examples/quick/views/delegatemodel/flipable.qrc b/examples/quick/views/delegatemodel/flipable.qrc deleted file mode 100644 index 7918ccf00e..0000000000 --- a/examples/quick/views/delegatemodel/flipable.qrc +++ /dev/null @@ -1,9 +0,0 @@ -<RCC> - <qresource prefix="/"> - <file>flipable.qml</file> - <file>content/5_heart.png</file> - <file>content/9_club.png</file> - <file>content/back.png</file> - <file>content/Card.qml</file> - </qresource> -</RCC> diff --git a/examples/quick/views/delegatemodel/main.cpp b/examples/quick/views/delegatemodel/main.cpp deleted file mode 100644 index 8eb2fc72c3..0000000000 --- a/examples/quick/views/delegatemodel/main.cpp +++ /dev/null @@ -1,4 +0,0 @@ -// Copyright (C) 2020 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause -#include "../../shared/shared.h" -DECLARATIVE_EXAMPLE_MAIN(flipable) diff --git a/examples/quick/views/delegatemodel/slideshow.qml b/examples/quick/views/delegatemodel/slideshow.qml deleted file mode 100644 index c11a72147f..0000000000 --- a/examples/quick/views/delegatemodel/slideshow.qml +++ /dev/null @@ -1,121 +0,0 @@ -// Copyright (C) 2018 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -import QtQuick -import QtQml.Models -import shared as Shared - -Rectangle { - id: root - - property Item displayItem: null - - width: 300; height: 400 - - color: "black" - - Shared.FlickrRssModel { - id: flickrModel - tags: "fjords,mountains" - } - DelegateModel { - id: visualModel - - model: flickrModel - delegate: Item { - id: delegateItem - - width: 76; height: 76 - - required property string thumbnail - - Rectangle { - id: image - x: 0; y: 0; width: 76; height: 76 - border.width: 1 - border.color: "white" - color: "black" - - Image { - anchors.fill: parent - anchors.leftMargin: 1 - anchors.topMargin: 1 - - source: delegateItem.thumbnail - fillMode: Image.PreserveAspectFit - } - - MouseArea { - id: clickArea - anchors.fill: parent - - onClicked: root.displayItem = root.displayItem !== delegateItem ? delegateItem : null - } - - states: [ - State { - when: root.displayItem === delegateItem - name: "inDisplay"; - ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 } - PropertyChanges { - image.z: 2 - delegateItem.DelegateModel.inItems: false - } - }, - State { - when: root.displayItem !== delegateItem - name: "inList"; - ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 } - PropertyChanges { - image.z: 1 - delegateItem.DelegateModel.inItems: true - } - } - ] - - transitions: [ - Transition { - from: "inList" - SequentialAnimation { - PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: true } - ParentAnimation { - target: image; - via: root - NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } - } - } - }, Transition { - from: "inDisplay" - SequentialAnimation { - ParentAnimation { - target: image - NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } - } - PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: false } - } - } - ] - } - } - } - - - PathView { - id: imagePath - - anchors { left: parent.left; top: imageContainer.bottom; right: parent.right; bottom: parent.bottom } - model: visualModel - - pathItemCount: 7 - path: Path { - startX: -50; startY: 0 - PathQuad { x: 150; y: 50; controlX: 0; controlY: 50 } - PathQuad { x: 350; y: 0; controlX: 300; controlY: 50 } - } - } - - Item { - id: imageContainer - anchors { fill: parent; bottomMargin: 100 } - } -} diff --git a/examples/quick/views/doc/src/views.qdoc b/examples/quick/views/doc/src/views.qdoc index 8e6e6c1846..7e73ce31d7 100644 --- a/examples/quick/views/doc/src/views.qdoc +++ b/examples/quick/views/doc/src/views.qdoc @@ -7,6 +7,7 @@ \brief This is a collection of QML model-view examples. \image qml-modelviews-example.png \ingroup qtquickexamples + \examplecategory {Graphics} \e Views is a collection of small QML examples relating to model and view functionality. They demonstrate how to show data from a model using the @@ -63,7 +64,7 @@ \section1 Using Packages - \e Packages use the \l [QML]{Package} type to transition delegates between + \e Packages uses the \l [QML]{Package} type to transition delegates between two views. It has a Package object which defines delegate items for each view and an @@ -76,6 +77,11 @@ \snippet views/package/view.qml 0 + \e{Draggable Selections} demonstrates the use of Package to group together + multiple selected delegates for drag-and-drop within an item view. + + \snippet views/delegatemodel/dragselection.qml 0 + \section1 Using ObjectModel \e ObjectModel uses an ObjectModel for the model instead of a \l ListModel. diff --git a/examples/quick/views/gridview/gridview-example.qml b/examples/quick/views/gridview/gridview-example.qml index 3f849565ca..f340a97b4c 100644 --- a/examples/quick/views/gridview/gridview-example.qml +++ b/examples/quick/views/gridview/gridview-example.qml @@ -4,7 +4,8 @@ import QtQuick Rectangle { - width: 300; height: 400 + width: 300 + height: 400 color: "white" ListModel { @@ -20,26 +21,36 @@ Rectangle { //! [0] GridView { anchors.fill: parent - cellWidth: 100; cellHeight: 100 + cellWidth: 100 + cellHeight: 100 focus: true model: appModel - highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" } + highlight: Rectangle { + width: 80 + height: 80 + color: "lightsteelblue" + } delegate: Item { required property string icon required property string name required property int index - width: 100; height: 100 + width: 100 + height: 100 Image { id: myIcon - y: 20; anchors.horizontalCenter: parent.horizontalCenter + y: 20 + anchors.horizontalCenter: parent.horizontalCenter source: parent.icon } Text { - anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter } + anchors { + top: myIcon.bottom + horizontalCenter: parent.horizontalCenter + } text: parent.name } MouseArea { diff --git a/examples/quick/views/listview/content/PressAndHoldButton.qml b/examples/quick/views/listview/content/PressAndHoldButton.qml index cdd2fb963d..51ab9435d2 100644 --- a/examples/quick/views/listview/content/PressAndHoldButton.qml +++ b/examples/quick/views/listview/content/PressAndHoldButton.qml @@ -8,7 +8,7 @@ Image { property int repeatDelay: 300 property int repeatDuration: 75 - property bool pressed: false + property bool pressed signal clicked diff --git a/examples/quick/views/listview/content/SmallText.qml b/examples/quick/views/listview/content/SmallText.qml index a808e3a27d..756610f4b3 100644 --- a/examples/quick/views/listview/content/SmallText.qml +++ b/examples/quick/views/listview/content/SmallText.qml @@ -4,6 +4,6 @@ import QtQuick Text { - font.pixelSize: 12 + font.pointSize: 9 } diff --git a/examples/quick/views/listview/displaymargin.qml b/examples/quick/views/listview/displaymargin.qml index c4c32bdd64..0030b82b55 100644 --- a/examples/quick/views/listview/displaymargin.qml +++ b/examples/quick/views/listview/displaymargin.qml @@ -34,7 +34,8 @@ Item { Rectangle { id: header - width: parent.width; height: 40 + width: parent.width + height: 40 color: "#AAFF0000" Text { @@ -47,7 +48,8 @@ Item { Rectangle { id: footer anchors.bottom: parent.bottom - width: parent.width; height: 40 + width: parent.width + height: 40 color: "#AAFF0000" Text { diff --git a/examples/quick/views/listview/dynamiclist.qml b/examples/quick/views/listview/dynamiclist.qml index fe32ce23d7..736088fbf7 100644 --- a/examples/quick/views/listview/dynamiclist.qml +++ b/examples/quick/views/listview/dynamiclist.qml @@ -6,9 +6,12 @@ import "content" // This example shows how items can be dynamically added to and removed from // a ListModel, and how these list modifications can be animated. +pragma ComponentBehavior: Bound + Rectangle { id: container - width: 500; height: 400 + width: 500 + height: 400 color: "#343434" // The model: @@ -16,30 +19,48 @@ Rectangle { id: fruitModel ListElement { - name: "Apple"; cost: 2.45 + name: "Apple" + cost: 2.45 attributes: [ - ListElement { description: "Core" }, - ListElement { description: "Deciduous" } + ListElement { + description: "Core" + }, + ListElement { + description: "Deciduous" + } ] } ListElement { - name: "Banana"; cost: 1.95 + name: "Banana" + cost: 1.95 attributes: [ - ListElement { description: "Tropical" }, - ListElement { description: "Seedless" } + ListElement { + description: "Tropical" + }, + ListElement { + description: "Seedless" + } ] } ListElement { - name: "Cumquat"; cost: 3.25 + name: "Kumquat" + cost: 3.25 attributes: [ - ListElement { description: "Citrus" } + ListElement { + description: "Citrus" + } ] } ListElement { - name: "Durian"; cost: 9.95 + name: "Durian" + cost: 9.95 attributes: [ - ListElement { description: "Tropical" }, - ListElement { description: "Smelly" } + ListElement { + description: "Tropical" + }, + ListElement { + description: "Smelly" + } ] } } @@ -51,7 +72,8 @@ Rectangle { Item { //! [0] id: delegateItem - width: listView.width; height: 80 + width: listView.width + height: 80 clip: true required property int index @@ -83,7 +105,7 @@ Rectangle { Column { anchors { left: arrows.right - horizontalCenter: parent.horizontalCenter; + horizontalCenter: parent.horizontalCenter bottom: parent.verticalCenter } @@ -155,18 +177,42 @@ Rectangle { //! [1] SequentialAnimation { id: addAnimation - PropertyAction { target: delegateItem; property: "height"; value: 0 } - NumberAnimation { target: delegateItem; property: "height"; to: 80; duration: 250; easing.type: Easing.InOutQuad } + PropertyAction { + target: delegateItem + property: "height" + value: 0 + } + NumberAnimation { + target: delegateItem + property: "height" + to: 80 + duration: 250 + easing.type: Easing.InOutQuad + } } ListView.onAdd: addAnimation.start() SequentialAnimation { id: removeAnimation - PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true } - NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad } + PropertyAction { + target: delegateItem + property: "ListView.delayRemove" + value: true + } + NumberAnimation { + target: delegateItem + property: "height" + to: 0 + duration: 250 + easing.type: Easing.InOutQuad + } // Make sure delayRemove is set back to false so that the item can be destroyed - PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false } + PropertyAction { + target: delegateItem + property: "ListView.delayRemove" + value: false + } } ListView.onRemove: removeAnimation.start() } @@ -177,8 +223,10 @@ Rectangle { ListView { id: listView anchors { - left: parent.left; top: parent.top; - right: parent.right; bottom: buttons.top; + left: parent.left + top: parent.top + right: parent.right + bottom: buttons.top margins: 20 } model: fruitModel @@ -187,11 +235,15 @@ Rectangle { Row { id: buttons - anchors { left: parent.left; bottom: parent.bottom; margins: 20 } + anchors { + left: parent.left + bottom: parent.bottom + margins: 20 + } spacing: 10 TextButton { - text: "Add an item" + text: qsTr("Add an item") onClicked: { fruitModel.append({ "name": "Pizza Margarita", @@ -202,7 +254,7 @@ Rectangle { } TextButton { - text: "Remove all items" + text: qsTr("Remove all items") onClicked: fruitModel.clear() } } diff --git a/examples/quick/views/listview/expandingdelegates.qml b/examples/quick/views/listview/expandingdelegates.qml index 26f2288922..5c1811a00a 100644 --- a/examples/quick/views/listview/expandingdelegates.qml +++ b/examples/quick/views/listview/expandingdelegates.qml @@ -8,7 +8,8 @@ import "content" Rectangle { id: page - width: 400; height: 240 + width: 400 + height: 240 color: "black" // Delegate for the recipes. This delegate has two modes: @@ -31,13 +32,16 @@ Rectangle { // want to fade. property real detailsOpacity : 0 //! [0] - width: listView.width + width: ListView.view.width height: 70 // A simple rounded rectangle for the background Rectangle { id: background - x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2 + x: 2 + y: 2 + width: parent.width - x * 2 + height: parent.height - y * 2 color: "ivory" border.color: "orange" radius: 5 @@ -58,26 +62,32 @@ Rectangle { Row { id: topLayout - x: 10; y: 10; height: recipeImage.height; width: parent.width + x: 10 + y: 10 + height: recipeImage.height + width: parent.width spacing: 10 Image { id: recipeImage - width: 50; height: 50 + width: 50 + height: 50 source: recipe.picture } //! [1] Column { - width: background.width - recipeImage.width - 20; height: recipeImage.height + width: background.width - recipeImage.width - 20 + height: recipeImage.height spacing: 5 Text { text: recipe.title - font.bold: true; font.pointSize: 16 + font.bold: true + font.pointSize: 16 } SmallText { - text: "Ingredients" + text: qsTr("Ingredients") font.bold: true opacity: recipe.detailsOpacity } @@ -94,22 +104,32 @@ Rectangle { //! [2] Item { id: details - x: 10; width: parent.width - 20 - - anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 } + x: 10 + width: parent.width - 20 + + anchors { + top: topLayout.bottom + topMargin: 10 + bottom: parent.bottom + bottomMargin: 10 + } opacity: recipe.detailsOpacity //! [2] SmallText { id: methodTitle anchors.top: parent.top - text: "Method" - font.pointSize: 12; font.bold: true + text: qsTr("Method") + font.pointSize: 12 + font.bold: true } Flickable { id: flick width: parent.width - anchors { top: methodTitle.bottom; bottom: parent.bottom } + anchors { + top: methodTitle.bottom + bottom: parent.bottom + } contentHeight: methodText.height clip: true @@ -122,13 +142,19 @@ Rectangle { } Image { - anchors { right: flick.right; top: flick.top } + anchors { + right: flick.right + top: flick.top + } source: "content/pics/moreUp.png" opacity: flick.atYBeginning ? 0 : 1 } Image { - anchors { right: flick.right; bottom: flick.bottom } + anchors { + right: flick.right + bottom: flick.bottom + } source: "content/pics/moreDown.png" opacity: flick.atYEnd ? 0 : 1 } @@ -138,9 +164,12 @@ Rectangle { // A button to close the detailed view, i.e. set the state back to default (''). TextButton { y: 10 - anchors { right: background.right; rightMargin: 10 } + anchors { + right: background.right + rightMargin: 10 + } opacity: recipe.detailsOpacity - text: "Close" + text: qsTr("Close") onClicked: recipe.state = ''; } @@ -180,8 +209,14 @@ Rectangle { transitions: Transition { // Make the state changes smooth ParallelAnimation { - ColorAnimation { property: "color"; duration: 500 } - NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" } + ColorAnimation { + property: "color" + duration: 500 + } + NumberAnimation { + duration: 300 + properties: "detailsOpacity,x,contentY,height,width" + } } } } @@ -192,7 +227,7 @@ Rectangle { ListView { id: listView anchors.fill: parent - model: RecipesModel {} + model: RecipesModel { } delegate: recipeDelegate } } diff --git a/examples/quick/views/listview/highlight.qml b/examples/quick/views/listview/highlight.qml index 137347203a..1f9b9c015c 100644 --- a/examples/quick/views/listview/highlight.qml +++ b/examples/quick/views/listview/highlight.qml @@ -9,13 +9,15 @@ import QtQuick import "content" Rectangle { - width: 200; height: 300 + width: 200 + height: 300 // Define a delegate component. The component will be // instantiated for each visible item in the list. component PetDelegate: Item { id: pet - width: 200; height: 55 + width: 200 + height: 55 required property int index required property string name @@ -23,9 +25,15 @@ Rectangle { required property int age Column { - SmallText { text: 'Name: ' + pet.name } - SmallText { text: 'Type: ' + pet.type } - SmallText { text: 'Age: ' + pet.age } + SmallText { + text: 'Name: ' + pet.name + } + SmallText { + text: 'Type: ' + pet.type + } + SmallText { + text: 'Age: ' + pet.age + } } // indent the item if it is the current item states: State { @@ -34,7 +42,10 @@ Rectangle { PropertyChanges { pet.x: 20 } } transitions: Transition { - NumberAnimation { properties: "x"; duration: 200 } + NumberAnimation { + properties: "x" + duration: 200 + } } MouseArea { anchors.fill: parent @@ -45,24 +56,31 @@ Rectangle { //! [0] // Define a highlight with customized movement between items. component HighlightBar : Rectangle { - width: 200; height: 50 + width: 200 + height: 50 color: "#FFFF88" - y: listView.currentItem.y - Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } } + y: ListView.view.currentItem.y + Behavior on y { + SpringAnimation { + spring: 2 + damping: 0.1 + } + } } ListView { id: listView - width: 200; height: parent.height + width: 200 + height: parent.height x: 30 - model: PetsModel {} - delegate: PetDelegate {} + model: PetsModel { } + delegate: PetDelegate { } focus: true // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem // to false so the highlight delegate can control how the highlight is moved. - highlight: HighlightBar {} + highlight: HighlightBar { } highlightFollowsCurrentItem: false } //! [0] diff --git a/examples/quick/views/listview/highlightranges.qml b/examples/quick/views/listview/highlightranges.qml index 78f8b197d3..91304ae08b 100644 --- a/examples/quick/views/listview/highlightranges.qml +++ b/examples/quick/views/listview/highlightranges.qml @@ -4,6 +4,8 @@ import QtQuick import "content" +pragma ComponentBehavior: Bound + //! [0] Rectangle { id: root @@ -30,17 +32,26 @@ Rectangle { } } - PauseAnimation { duration: 500 } + PauseAnimation { + duration: 500 + } } //! [0] - MouseArea{ + MouseArea { id: ma z: 1 anchors.fill: parent - onClicked: { z = 1 - z; if (anim.running) anim.stop(); else anim.restart();} + onClicked: function () { + z = 1 - z; + if (anim.running) + anim.stop(); + else + anim.restart(); + } } - width: 320; height: 480 + width: 320 + height: 480 // This example shows the same model in three different ListView items, // with different highlight ranges. The highlight ranges are set by the @@ -68,12 +79,16 @@ Rectangle { //! [1] ListView { id: list1 - height: 50; width: parent.width - model: PetsModel {id: aModel} + height: 50 + width: parent.width + model: PetsModel { + id: aModel + } delegate: petDelegate orientation: ListView.Horizontal - - highlight: Rectangle { color: "lightsteelblue" } + highlight: Rectangle { + color: "lightsteelblue" + } currentIndex: root.current onCurrentIndexChanged: root.current = currentIndex focus: true @@ -82,29 +97,33 @@ Rectangle { ListView { id: list2 y: 160 - height: 50; width: parent.width - model: PetsModel {} + height: 50 + width: parent.width + model: PetsModel { } delegate: petDelegate orientation: ListView.Horizontal - - highlight: Rectangle { color: "yellow" } + highlight: Rectangle { + color: "yellow" + } currentIndex: root.current - preferredHighlightBegin: 80; preferredHighlightEnd: 220 + preferredHighlightBegin: 80 + preferredHighlightEnd: 220 highlightRangeMode: ListView.ApplyRange } ListView { id: list3 y: 320 - height: 50; width: parent.width + height: 50 + width: parent.width model: PetsModel {} delegate: petDelegate orientation: ListView.Horizontal - highlight: Rectangle { color: "yellow" } currentIndex: root.current onCurrentIndexChanged: root.current = currentIndex - preferredHighlightBegin: 125; preferredHighlightEnd: 125 + preferredHighlightBegin: 125 + preferredHighlightEnd: 125 highlightRangeMode: ListView.StrictlyEnforceRange } //! [1] @@ -123,9 +142,15 @@ Rectangle { Column { id: column - Text { text: 'Name: ' + petDelegateItem.name } - Text { text: 'Type: ' + petDelegateItem.type } - Text { text: 'Age: ' + petDelegateItem.age } + Text { + text: 'Name: ' + petDelegateItem.name + } + Text { + text: 'Type: ' + petDelegateItem.type + } + Text { + text: 'Age: ' + petDelegateItem.age + } } MouseArea { diff --git a/examples/quick/views/listview/sections.qml b/examples/quick/views/listview/sections.qml index 5b2dfc67cc..83370958fa 100644 --- a/examples/quick/views/listview/sections.qml +++ b/examples/quick/views/listview/sections.qml @@ -5,7 +5,7 @@ // the ListView.section attached property. import QtQuick -import "content" +import QtQuick.Controls Rectangle { id: container @@ -14,21 +14,67 @@ Rectangle { ListModel { id: animalsModel - ListElement { name: "Ant"; size: "Tiny" } - ListElement { name: "Flea"; size: "Tiny" } - ListElement { name: "Parrot"; size: "Small" } - ListElement { name: "Guinea pig"; size: "Small" } - ListElement { name: "Rat"; size: "Small" } - ListElement { name: "Butterfly"; size: "Small" } - ListElement { name: "Dog"; size: "Medium" } - ListElement { name: "Cat"; size: "Medium" } - ListElement { name: "Pony"; size: "Medium" } - ListElement { name: "Koala"; size: "Medium" } - ListElement { name: "Horse"; size: "Large" } - ListElement { name: "Tiger"; size: "Large" } - ListElement { name: "Giraffe"; size: "Large" } - ListElement { name: "Elephant"; size: "Huge" } - ListElement { name: "Whale"; size: "Huge" } + + ListElement { + name: "Ant" + size: "Tiny" + } + ListElement { + name: "Flea" + size: "Tiny" + } + ListElement { + name: "Parrot" + size: "Small" + } + ListElement { + name: "Guinea pig" + size: "Small" + } + ListElement { + name: "Rat" + size: "Small" + } + ListElement { + name: "Butterfly" + size: "Small" + } + ListElement { + name: "Dog" + size: "Medium" + } + ListElement { + name: "Cat" + size: "Medium" + } + ListElement { + name: "Pony" + size: "Medium" + } + ListElement { + name: "Koala" + size: "Medium" + } + ListElement { + name: "Horse" + size: "Large" + } + ListElement { + name: "Tiger" + size: "Large" + } + ListElement { + name: "Giraffe" + size: "Large" + } + ListElement { + name: "Elephant" + size: "Huge" + } + ListElement { + name: "Whale" + size: "Huge" + } } //! [0] @@ -36,7 +82,7 @@ Rectangle { Component { id: sectionHeading Rectangle { - width: container.width + width: ListView.view.width height: childrenRect.height color: "lightsteelblue" @@ -58,6 +104,7 @@ Rectangle { model: animalsModel delegate: Text { required property string name + text: name font.pixelSize: 18 } @@ -73,19 +120,23 @@ Rectangle { anchors.bottom: parent.bottom anchors.bottomMargin: 1 spacing: 1 - ToggleButton { - label: "CurrentLabelAtStart" - onToggled: { - if (active) + + CheckBox { + id: labelAtStartCheckBox + text: qsTr("CurrentLabelAtStart") + onClicked: { + if (checked) view.section.labelPositioning |= ViewSection.CurrentLabelAtStart else view.section.labelPositioning &= ~ViewSection.CurrentLabelAtStart } } - ToggleButton { - label: "NextLabelAtEnd" - onToggled: { - if (active) + + CheckBox { + id: labelAtEndCheckBox + text: qsTr("NextLabelAtEnd") + onClicked: { + if (checked) view.section.labelPositioning |= ViewSection.NextLabelAtEnd else view.section.labelPositioning &= ~ViewSection.NextLabelAtEnd diff --git a/examples/quick/views/objectmodel/objectmodel.qml b/examples/quick/views/objectmodel/objectmodel.qml index 898ef7f9e2..f0b116a247 100644 --- a/examples/quick/views/objectmodel/objectmodel.qml +++ b/examples/quick/views/objectmodel/objectmodel.qml @@ -7,6 +7,8 @@ import QtQuick import QtQml.Models +pragma ComponentBehavior: Bound + Rectangle { id: root color: "lightgray" @@ -19,23 +21,41 @@ Rectangle { id: itemModel Rectangle { - width: view.width; height: view.height + width: view.width + height: view.height color: "#FFFEF0" - Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent } + + Text { + anchors.centerIn: parent + text: qsTr("Page 1") + font.bold: true + } Component.onDestruction: if (root.printDestruction) print("destroyed 1") } Rectangle { - width: view.width; height: view.height + width: view.width + height: view.height color: "#F0FFF7" - Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent } + + Text { + anchors.centerIn: parent + text: qsTr("Page 2") + font.bold: true + } Component.onDestruction: if (root.printDestruction) print("destroyed 2") } Rectangle { - width: view.width; height: view.height + width: view.width + height: view.height color: "#F4F0FF" - Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent } + + Text { + anchors.centerIn: parent + text: qsTr("Page 3") + font.bold: true + } Component.onDestruction: if (root.printDestruction) print("destroyed 3") } @@ -43,18 +63,27 @@ Rectangle { ListView { id: view - anchors { fill: parent; bottomMargin: 30 } + anchors { + fill: parent + bottomMargin: 30 + } model: itemModel - preferredHighlightBegin: 0; preferredHighlightEnd: 0 + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 highlightRangeMode: ListView.StrictlyEnforceRange orientation: ListView.Horizontal - snapMode: ListView.SnapOneItem; flickDeceleration: 2000 + snapMode: ListView.SnapOneItem + flickDeceleration: 2000 cacheBuffer: 200 } //! [0] Rectangle { - width: root.width; height: 30 - anchors { top: view.bottom; bottom: parent.bottom } + width: root.width + height: 30 + anchors { + top: view.bottom + bottom: parent.bottom + } color: "gray" Row { @@ -63,17 +92,18 @@ Rectangle { Repeater { model: itemModel.count - - Rectangle { + delegate: Rectangle { required property int index - width: 5; height: 5 + width: 5 + height: 5 radius: 3 - color: view.currentIndex == index ? "blue" : "white" + color: view.currentIndex === index ? "blue" : "white" MouseArea { - width: 20; height: 20 anchors.centerIn: parent + width: 20 + height: 20 onClicked: view.currentIndex = parent.index } } diff --git a/examples/quick/views/package/Delegate.qml b/examples/quick/views/package/Delegate.qml index 2e810aebec..7f3eeaa833 100644 --- a/examples/quick/views/package/Delegate.qml +++ b/examples/quick/views/package/Delegate.qml @@ -11,26 +11,50 @@ Package { required property int index required property string display - Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' } - Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' } + Text { + id: listDelegate + width: parent.width + height: 25 + text: 'Empty' + Package.name: 'list' + } + + Text { + id: gridDelegate + width: parent.width / 2 + height: 50 + text: 'Empty' + Package.name: 'grid' + } Rectangle { id: wrapper - width: parent.width; height: 25 + width: parent?.width ?? 0 + height: 25 color: 'lightsteelblue' - Text { text: delegate.display; anchors.centerIn: parent } + Text { + text: delegate.display + anchors.centerIn: parent + } state: delegate.upTo > delegate.index ? 'inGrid' : 'inList' states: [ State { name: 'inList' - ParentChange { target: wrapper; parent: listDelegate } + ParentChange { + target: wrapper + parent: listDelegate + } }, State { name: 'inGrid' ParentChange { - target: wrapper; parent: gridDelegate - x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height + target: wrapper + parent: gridDelegate + x: 0 + y: 0 + width: gridDelegate.width + height: gridDelegate.height } } ] @@ -38,7 +62,10 @@ Package { transitions: [ Transition { ParentAnimation { - NumberAnimation { properties: 'x,y,width,height'; duration: 300 } + NumberAnimation { + properties: 'x,y,width,height' + duration: 300 + } } } ] diff --git a/examples/quick/views/package/view.qml b/examples/quick/views/package/view.qml index 696557ed7c..a9a0c46198 100644 --- a/examples/quick/views/package/view.qml +++ b/examples/quick/views/package/view.qml @@ -4,16 +4,24 @@ import QtQuick import QtQml.Models +pragma ComponentBehavior: Bound + Rectangle { id: root color: "white" width: 320 height: 480 - property int upTo: 0 + property int upTo SequentialAnimation on upTo { loops: -1 - NumberAnimation { to: 8; duration: 3500 } - NumberAnimation { to: 0; duration: 3500 } + NumberAnimation { + to: 8 + duration: 3500 + } + NumberAnimation { + to: 0 + duration: 3500 + } } ListModel { @@ -38,14 +46,14 @@ Rectangle { ListView { id: lv - height: parent.height/2 + height: parent.height / 2 width: parent.width model: visualModel.parts.list } GridView { - y: parent.height/2 - height: parent.height/2 + y: parent.height / 2 + height: parent.height / 2 width: parent.width cellWidth: width / 2 cellHeight: 50 diff --git a/examples/quick/views/pathview/pathview-example.qml b/examples/quick/views/pathview/pathview-example.qml index 19fd470c04..f1ecd099c1 100644 --- a/examples/quick/views/pathview/pathview-example.qml +++ b/examples/quick/views/pathview/pathview-example.qml @@ -4,24 +4,47 @@ import QtQuick Rectangle { - width: 400; height: 240 + width: 400 + height: 240 color: "white" ListModel { id: appModel - ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" } - ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" } - ListElement { name: "Camera"; icon: "pics/Camera_48.png" } - ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" } - ListElement { name: "Messaging"; icon: "pics/EMail_48.png" } - ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } - ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } + ListElement { + name: "Music" + icon: "pics/AudioPlayer_48.png" + } + ListElement { + name: "Movies" + icon: "pics/VideoPlayer_48.png" + } + ListElement { + name: "Camera" + icon: "pics/Camera_48.png" + } + ListElement { + name: "Calendar" + icon: "pics/DateBook_48.png" + } + ListElement { + name: "Messaging" + icon: "pics/EMail_48.png" + } + ListElement { + name: "Todo List" + icon: "pics/TodoList_48.png" + } + ListElement { + name: "Contacts" + icon: "pics/AddressBook_48.png" + } } Component { id: appDelegate Item { - width: 100; height: 100 + width: 100 + height: 100 scale: PathView.iconScale required property string name @@ -30,11 +53,15 @@ Rectangle { Image { id: myIcon - y: 20; anchors.horizontalCenter: parent.horizontalCenter + y: 20 + anchors.horizontalCenter: parent.horizontalCenter source: parent.icon } Text { - anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter } + anchors { + top: myIcon.bottom + horizontalCenter: parent.horizontalCenter + } text: parent.name } @@ -47,7 +74,11 @@ Rectangle { Component { id: appHighlight - Rectangle { width: 80; height: 80; color: "lightsteelblue" } + Rectangle { + width: 80 + height: 80 + color: "lightsteelblue" + } } PathView { @@ -62,11 +93,30 @@ Rectangle { path: Path { startX: 10 startY: 50 - PathAttribute { name: "iconScale"; value: 0.5 } - PathQuad { x: 200; y: 150; controlX: 50; controlY: 200 } - PathAttribute { name: "iconScale"; value: 1.0 } - PathQuad { x: 390; y: 50; controlX: 350; controlY: 200 } - PathAttribute { name: "iconScale"; value: 0.5 } + PathAttribute { + name: "iconScale" + value: 0.5 + } + PathQuad { + x: 200 + y: 150 + controlX: 50 + controlY: 200 + } + PathAttribute { + name: "iconScale" + value: 1.0 + } + PathQuad { + x: 390 + y: 50 + controlX: 350 + controlY: 200 + } + PathAttribute { + name: "iconScale" + value: 0.5 + } } } } diff --git a/examples/quick/views/views.qml b/examples/quick/views/views.qml index 1c47df4fcb..77b16fa6bb 100644 --- a/examples/quick/views/views.qml +++ b/examples/quick/views/views.qml @@ -19,9 +19,8 @@ Item { addExample("Sections", "ListView section headers and footers", Qt.resolvedUrl("listview/sections.qml")) addExample("Packages", "Transitions between a ListView and GridView", Qt.resolvedUrl("package/view.qml")) addExample("PathView", "A simple PathView", Qt.resolvedUrl("pathview/pathview-example.qml")) - addExample("ObjectModel", "Using a ObjectModel", Qt.resolvedUrl("objectmodel/objectmodel.qml")) + addExample("ObjectModel", "Using an ObjectModel", Qt.resolvedUrl("objectmodel/objectmodel.qml")) addExample("Display Margins", "A ListView with display margins", Qt.resolvedUrl("listview/displaymargin.qml")) - addExample("DelegateModel", "A PathView using DelegateModel to instantiate delegates", Qt.resolvedUrl("delegatemodel/slideshow.qml")) addExample("Draggable Selections", "Enabling drag-and-drop on DelegateModel delegates", Qt.resolvedUrl("delegatemodel/dragselection.qml")) } } diff --git a/examples/quick/views/views.qrc b/examples/quick/views/views.qrc index 67e708ff93..9b16e81321 100644 --- a/examples/quick/views/views.qrc +++ b/examples/quick/views/views.qrc @@ -1,5 +1,6 @@ <RCC> <qresource prefix="/qt/qml/views"> + <file>gridview/gridview-example.qml</file> <file>gridview/pics/AddressBook_48.png</file> <file>gridview/pics/AudioPlayer_48.png</file> @@ -41,7 +42,6 @@ <file>pathview/pics/EMail_48.png</file> <file>pathview/pics/TodoList_48.png</file> <file>pathview/pics/VideoPlayer_48.png</file> - <file>delegatemodel/slideshow.qml</file> <file>delegatemodel/dragselection.qml</file> <file>objectmodel/objectmodel.qml</file> <file>views.qml</file> |