From 3315f44c4c11bf225b46a56eae5d59f8c9176f87 Mon Sep 17 00:00:00 2001 From: MohammadHossein Qanbari Date: Fri, 23 May 2025 10:23:27 +0200 Subject: [PATCH] Gallery example: Add missing controls The previous gallery example was missing several controls, which limited its usefulness for demonstration and testing purposes. This patch adds the missing controls, ensuring the example now provides a comprehensive overview. Pick-to: 6.10 Change-Id: I79115bfffd581ca20af1c2a206a145c5362311bb Reviewed-by: Mitch Curtis --- examples/quickcontrols/gallery/CMakeLists.txt | 6 + examples/quickcontrols/gallery/gallery.qml | 6 + .../gallery/pages/ButtonPage.qml | 37 +++++- .../gallery/pages/MenuBarPage.qml | 42 +++++++ .../gallery/pages/MonthGridPage.qml | 102 ++++++++++++++++ .../gallery/pages/ScrollBarPage.qml | 10 +- .../gallery/pages/SplitViewPage.qml | 73 +++++++++++ .../gallery/pages/TableViewPage.qml | 90 ++++++++++++++ .../gallery/pages/ToolBarPage.qml | 74 ++++++++++++ .../gallery/pages/TreeViewPage.qml | 113 ++++++++++++++++++ 10 files changed, 549 insertions(+), 4 deletions(-) create mode 100644 examples/quickcontrols/gallery/pages/MenuBarPage.qml create mode 100644 examples/quickcontrols/gallery/pages/MonthGridPage.qml create mode 100644 examples/quickcontrols/gallery/pages/SplitViewPage.qml create mode 100644 examples/quickcontrols/gallery/pages/TableViewPage.qml create mode 100644 examples/quickcontrols/gallery/pages/ToolBarPage.qml create mode 100644 examples/quickcontrols/gallery/pages/TreeViewPage.qml diff --git a/examples/quickcontrols/gallery/CMakeLists.txt b/examples/quickcontrols/gallery/CMakeLists.txt index 86ddccc09a..144d0d88ba 100644 --- a/examples/quickcontrols/gallery/CMakeLists.txt +++ b/examples/quickcontrols/gallery/CMakeLists.txt @@ -32,6 +32,8 @@ qt_add_qml_module(galleryexample "pages/FramePage.qml" "pages/GalleryConfig.qml" "pages/GroupBoxPage.qml" + "pages/MenuBarPage.qml" + "pages/MonthGridPage.qml" "pages/PageIndicatorPage.qml" "pages/ProgressBarPage.qml" "pages/RadioButtonPage.qml" @@ -42,13 +44,17 @@ qt_add_qml_module(galleryexample "pages/SearchFieldPage.qml" "pages/SliderPage.qml" "pages/SpinBoxPage.qml" + "pages/SplitViewPage.qml" "pages/StackViewPage.qml" "pages/SwipeViewPage.qml" "pages/SwitchPage.qml" "pages/TabBarPage.qml" + "pages/TableViewPage.qml" "pages/TextAreaPage.qml" "pages/TextFieldPage.qml" + "pages/ToolBarPage.qml" "pages/ToolTipPage.qml" + "pages/TreeViewPage.qml" "pages/TumblerPage.qml" RESOURCES "icons/gallery/20x20/back.png" diff --git a/examples/quickcontrols/gallery/gallery.qml b/examples/quickcontrols/gallery/gallery.qml index 38501d5adc..e1a61bd583 100644 --- a/examples/quickcontrols/gallery/gallery.qml +++ b/examples/quickcontrols/gallery/gallery.qml @@ -143,6 +143,8 @@ ApplicationWindow { ListElement { title: qsTr("Delegates"); source: "qrc:/pages/DelegatePage.qml" } ListElement { title: qsTr("Frame"); source: "qrc:/pages/FramePage.qml" } ListElement { title: qsTr("GroupBox"); source: "qrc:/pages/GroupBoxPage.qml" } + ListElement { title: qsTr("MenuBar"); source: "qrc:/pages/MenuBarPage.qml" } + ListElement { title: qsTr("MonthGrid"); source: "qrc:/pages/MonthGridPage.qml" } ListElement { title: qsTr("PageIndicator"); source: "qrc:/pages/PageIndicatorPage.qml" } ListElement { title: qsTr("ProgressBar"); source: "qrc:/pages/ProgressBarPage.qml" } ListElement { title: qsTr("RadioButton"); source: "qrc:/pages/RadioButtonPage.qml" } @@ -152,13 +154,17 @@ ApplicationWindow { ListElement { title: qsTr("SearchField"); source: "qrc:/pages/SearchFieldPage.qml" } ListElement { title: qsTr("Slider"); source: "qrc:/pages/SliderPage.qml" } ListElement { title: qsTr("SpinBox"); source: "qrc:/pages/SpinBoxPage.qml" } + ListElement { title: qsTr("SplitView"); source: "qrc:/pages/SplitViewPage.qml" } ListElement { title: qsTr("StackView"); source: "qrc:/pages/StackViewPage.qml" } ListElement { title: qsTr("SwipeView"); source: "qrc:/pages/SwipeViewPage.qml" } ListElement { title: qsTr("Switch"); source: "qrc:/pages/SwitchPage.qml" } ListElement { title: qsTr("TabBar"); source: "qrc:/pages/TabBarPage.qml" } + ListElement { title: qsTr("TableView"); source: "qrc:/pages/TableViewPage.qml" } ListElement { title: qsTr("TextArea"); source: "qrc:/pages/TextAreaPage.qml" } ListElement { title: qsTr("TextField"); source: "qrc:/pages/TextFieldPage.qml" } + ListElement { title: qsTr("ToolBar"); source: "qrc:/pages/ToolBarPage.qml" } ListElement { title: qsTr("ToolTip"); source: "qrc:/pages/ToolTipPage.qml" } + ListElement { title: qsTr("TreeView"); source: "qrc:/pages/TreeViewPage.qml" } ListElement { title: qsTr("Tumbler"); source: "qrc:/pages/TumblerPage.qml" } } diff --git a/examples/quickcontrols/gallery/pages/ButtonPage.qml b/examples/quickcontrols/gallery/pages/ButtonPage.qml index 7393588470..a5aab7d33b 100644 --- a/examples/quickcontrols/gallery/pages/ButtonPage.qml +++ b/examples/quickcontrols/gallery/pages/ButtonPage.qml @@ -12,6 +12,24 @@ ScrollablePage { spacing: 40 width: parent.width + Row { + CheckBox { + id: checkedCheckBox + text: qsTr("Checked") + } + + CheckBox { + id: flatCheckBox + text: qsTr("Flat") + } + + CheckBox { + id: pressedCheckBox + enabled: !GalleryConfig.disabled + text: qsTr("Pressed") + } + } + Label { width: parent.width wrapMode: Label.Wrap @@ -25,17 +43,30 @@ ScrollablePage { anchors.horizontalCenter: parent.horizontalCenter Button { - text: qsTr("First") enabled: !GalleryConfig.disabled + text: qsTr("Button") + checked: checkedCheckBox.checked + flat: flatCheckBox.checked + down: pressedCheckBox.checked ? true : undefined Layout.fillWidth: true } Button { - id: button - text: qsTr("Second") enabled: !GalleryConfig.disabled + text: qsTr("Highlighted") + checked: checkedCheckBox.checked + flat: flatCheckBox.checked + down: pressedCheckBox.checked ? true : undefined highlighted: true Layout.fillWidth: true } + RoundButton { + enabled: !GalleryConfig.disabled + text: qsTr("RoundButton") + checked: checkedCheckBox.checked + flat: flatCheckBox.checked + down: pressedCheckBox.checked ? true : undefined + Layout.fillWidth: true + } } } } diff --git a/examples/quickcontrols/gallery/pages/MenuBarPage.qml b/examples/quickcontrols/gallery/pages/MenuBarPage.qml new file mode 100644 index 0000000000..a59f536f78 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/MenuBarPage.qml @@ -0,0 +1,42 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls + +Page { + id: page + enabled: !GalleryConfig.disabled + + header: MenuBar { + Menu { + title: qsTr("&File") + Action { text: qsTr("&New...") } + Action { text: qsTr("&Open...") } + Action { text: qsTr("&Save") } + Action { text: qsTr("Save &As...") } + MenuSeparator { } + Action { text: qsTr("&Quit") } + } + Menu { + title: qsTr("&Edit") + Action { text: qsTr("Cu&t") } + Action { text: qsTr("&Copy") } + Action { text: qsTr("&Paste") } + } + Menu { + title: qsTr("&Help") + Action { text: qsTr("&About") } + } + } + + Label { + anchors.verticalCenter: parent.verticalCenter + width: parent.width + wrapMode: Label.Wrap + horizontalAlignment: Qt.AlignHCenter + text: qsTr("MenuBar provides a horizontal bar with drop-down menus, " + + "allowing users to access grouped commands and actions " + + "within an application.") + } +} diff --git a/examples/quickcontrols/gallery/pages/MonthGridPage.qml b/examples/quickcontrols/gallery/pages/MonthGridPage.qml new file mode 100644 index 0000000000..bd99967b59 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/MonthGridPage.qml @@ -0,0 +1,102 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +Page { + id: page + enabled: !GalleryConfig.disabled + + Column { + spacing: 40 + width: parent.width + + Label { + width: parent.width + wrapMode: Label.Wrap + horizontalAlignment: Qt.AlignHCenter + text: qsTr("MonthGrid presents a calendar month as a grid of days, " + + "calculated for a specific month, year, and locale.") + } + + ColumnLayout { + spacing: 20 + anchors.horizontalCenter: parent.horizontalCenter + + RowLayout { + spacing: 10 + Layout.fillWidth: true + + Button { + implicitWidth: height + enabled: !GalleryConfig.disabled + flat: true + text: qsTr("<") + onClicked: { + const new_month = monthGrid.month - 1 + if (new_month < 0) { + monthGrid.month = 11 + --monthGrid.year + } else { + monthGrid.month = new_month + } + } + } + Item { + Layout.fillHeight: true + Layout.fillWidth: true + Label { + anchors.centerIn: parent + text: qsTr("%1 %2").arg(monthGrid.locale.monthName(monthGrid.month)) + .arg(monthGrid.year) + } + } + Button { + implicitWidth: height + enabled: !GalleryConfig.disabled + flat: true + text: qsTr(">") + onClicked: { + const new_month = monthGrid.month + 1 + if (new_month >= 12) { + monthGrid.month = 0 + ++monthGrid.year + } else { + monthGrid.month = new_month + } + } + } + } + + GridLayout { + columns: 2 + Layout.fillWidth: true + Layout.fillHeight: true + + DayOfWeekRow { + locale: monthGrid.locale + Layout.fillWidth: true + Layout.column: 1 + } + + WeekNumberColumn { + locale: monthGrid.locale + year: monthGrid.year + month: monthGrid.month + Layout.fillHeight: true + } + + MonthGrid { + id: monthGrid + locale: Qt.locale("en_US") + year: currentDate.getFullYear() + month: currentDate.getMonth() + readonly property date currentDate: new Date() + Layout.fillWidth: true + } + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/ScrollBarPage.qml b/examples/quickcontrols/gallery/pages/ScrollBarPage.qml index a81fc3f867..04bd8c7703 100644 --- a/examples/quickcontrols/gallery/pages/ScrollBarPage.qml +++ b/examples/quickcontrols/gallery/pages/ScrollBarPage.qml @@ -19,6 +19,12 @@ Flickable { spacing: 40 width: parent.width + CheckBox { + id: alwaysOnCheckBox + width: parent.width + text: qsTr("Always on") + } + Label { width: parent.width wrapMode: Label.Wrap @@ -36,5 +42,7 @@ Flickable { } } - ScrollBar.vertical: ScrollBar { } + ScrollBar.vertical: ScrollBar { + policy: alwaysOnCheckBox.checked ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded + } } diff --git a/examples/quickcontrols/gallery/pages/SplitViewPage.qml b/examples/quickcontrols/gallery/pages/SplitViewPage.qml new file mode 100644 index 0000000000..b04e0bb7fa --- /dev/null +++ b/examples/quickcontrols/gallery/pages/SplitViewPage.qml @@ -0,0 +1,73 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +Page { + id: page + enabled: !GalleryConfig.disabled + + ColumnLayout { + anchors.fill: parent + spacing: 40 + + CheckBox { + id: orientationCheckBox + text: qsTr("Vertical") + } + + Label { + wrapMode: Label.Wrap + horizontalAlignment: Qt.AlignHCenter + text: qsTr("SplitView provides a container that arranges items horizontally " + + "or vertically, separated by draggable splitters, allowing users " + + "to interactively resize adjacent views within an application.") + Layout.fillWidth: true + } + + SplitView { + orientation: orientationCheckBox.checked ? Qt.Vertical : Qt.Horizontal + Layout.fillHeight: true + Layout.fillWidth: true + + Rectangle { + implicitWidth: 200 + implicitHeight: 100 + color: "lightblue" + SplitView.maximumWidth: 400 + + Label { + text: "View 1" + anchors.centerIn: parent + } + } + + Rectangle { + id: centerItem + color: "lightgray" + SplitView.minimumWidth: 50 + SplitView.minimumHeight: 50 + SplitView.fillWidth: true + SplitView.fillHeight: true + + Label { + text: "View 2" + anchors.centerIn: parent + } + } + + Rectangle { + implicitWidth: 200 + implicitHeight: 100 + color: "lightgreen" + + Label { + text: "View 3" + anchors.centerIn: parent + } + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/TableViewPage.qml b/examples/quickcontrols/gallery/pages/TableViewPage.qml new file mode 100644 index 0000000000..e9ebfea64e --- /dev/null +++ b/examples/quickcontrols/gallery/pages/TableViewPage.qml @@ -0,0 +1,90 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import Qt.labs.qmlmodels + +Page { + id: page + enabled: !GalleryConfig.disabled + + GridLayout { + anchors.fill: parent + + Label { + wrapMode: Label.Wrap + horizontalAlignment: Qt.AlignHCenter + text: qsTr("TableView provides a scrollable grid that displays data from " + + "a model in rows and columns, allowing users to view and interact " + + "with structured information within an application.") + Layout.fillWidth: true + Layout.columnSpan: 2 + } + + HorizontalHeaderView { + clip: true + syncView: tableView + model: tableModel.headerModel + Layout.column: 1 + Layout.row: 1 + Layout.fillWidth: true + } + + VerticalHeaderView { + clip: true + syncView: tableView + Layout.column: 0 + Layout.row: 2 + Layout.fillHeight: true + } + + TableView { + id: tableView + columnSpacing: 1 + rowSpacing: 1 + clip: true + + selectionModel: ItemSelectionModel {} + model: tableModel + + Layout.column: 1 + Layout.row: 2 + Layout.fillWidth: true + Layout.fillHeight: true + + delegate: TableViewDelegate { + implicitWidth: 100 + implicitHeight: 50 + Component.onCompleted: { + if (contentItem as Label) { + contentItem.horizontalAlignment = Qt.AlignHCenter + contentItem.verticalAlignment = Qt.AlignVCenter + } + } + } + } + } + + TableModel { + id: tableModel + property var headerModel: [qsTr("Name"), qsTr("Color")] + TableModelColumn { display: "name" } + TableModelColumn { display: "color" } + rows: [ + { + "name": qsTr("cat"), + "color": qsTr("black") + }, + { + "name": qsTr("dog"), + "color": qsTr("brown") + }, + { + "name": qsTr("bird"), + "color": qsTr("white") + } + ] + } +} diff --git a/examples/quickcontrols/gallery/pages/ToolBarPage.qml b/examples/quickcontrols/gallery/pages/ToolBarPage.qml new file mode 100644 index 0000000000..b4b2cc8d3c --- /dev/null +++ b/examples/quickcontrols/gallery/pages/ToolBarPage.qml @@ -0,0 +1,74 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +Page { + id: page + enabled: !GalleryConfig.disabled + + header: ToolBar { + RowLayout { + anchors.fill: parent + + Item { + Layout.fillHeight: true + Layout.preferredWidth: height + } + + Label { + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + text: qsTr("Header") + + Layout.fillHeight: true + Layout.fillWidth: true + } + + ToolSeparator { } + + ToolButton { text: "\u2699" } + } + } + + Label { + anchors.centerIn: parent + width: parent.width - 20 + wrapMode: Label.Wrap + horizontalAlignment: Qt.AlignHCenter + text: qsTr("ToolBar provides a horizontal container for application-wide " + + "and context-sensitive controls, such as navigation buttons and " + + "search fields, typically used as a header or footer within an " + + "application window") + } + + footer: ToolBar { + RowLayout { + anchors.fill: parent + + Label { + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + text: "\u2139" + + Layout.fillHeight: true + Layout.preferredWidth: height + } + + Label { + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + text: qsTr("Footer") + + Layout.fillHeight: true + Layout.fillWidth: true + } + + ToolSeparator { } + + ToolButton { text: "\u2630" } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/TreeViewPage.qml b/examples/quickcontrols/gallery/pages/TreeViewPage.qml new file mode 100644 index 0000000000..b7ee2b270a --- /dev/null +++ b/examples/quickcontrols/gallery/pages/TreeViewPage.qml @@ -0,0 +1,113 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import Qt.labs.qmlmodels + +Page { + id: page + + GridLayout { + anchors.fill: parent + anchors.margins: 10 + + Label { + wrapMode: Label.Wrap + horizontalAlignment: Qt.AlignHCenter + text: qsTr("TreeView provides a hierarchical view for displaying and " + + "navigating tree-structured data, allowing users to expand and " + + "collapse nodes to explore parent-child relationships within a model") + + Layout.fillWidth: true + Layout.columnSpan: 2 + } + + Item { + implicitHeight: 40 + + Layout.columnSpan: 2 + Layout.row: 1 + } + + HorizontalHeaderView { + clip: true + enabled: !GalleryConfig.disabled + syncView: treeView + model: [qsTr("Location")] + + Layout.column: 1 + Layout.row: 2 + Layout.fillWidth: true + } + + VerticalHeaderView { + clip: true + enabled: !GalleryConfig.disabled + syncView: treeView + model: Array.from({length: treeView.rows}, (v, k) => k + 1) + + Layout.column: 0 + Layout.row: 3 + Layout.fillHeight: true + } + + TreeView { + id: treeView + clip: true + enabled: !GalleryConfig.disabled + rowSpacing: 2 + model: treeModel + + Layout.column: 1 + Layout.row: 3 + Layout.fillWidth: true + Layout.fillHeight: true + + selectionModel: ItemSelectionModel {} + delegate: TreeViewDelegate { } + + columnWidthProvider: (column) => column === 0 ? treeView.width : 0 + + Component.onCompleted: expandRecursively() + } + } + + TreeModel { + id: treeModel + + TableModelColumn { display: "location" } + + rows: [ + { + location: qsTr("America"), + rows: [ + { location: qsTr("Brazil") }, + { + location: qsTr("Canada"), + rows: [ + { location: qsTr("Calgary") }, + { location: qsTr("Vancouver") } + ] + } + ] + }, + { location: qsTr("Asia") }, + { + location: qsTr("Europe"), + rows: [ + { + location: qsTr("Italy"), + rows: [ + { location: qsTr("Milan") }, + { location: qsTr("Rome") } + ] + }, + { location: qsTr("Portugal") } + ] + } + + ] + } +}