qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 <mitch.curtis@qt.io>
This commit is contained in:
MohammadHossein Qanbari 2025-05-23 10:23:27 +02:00
parent 691dab42c3
commit 3315f44c4c
10 changed files with 549 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/quickcontrols/gallery/CMakeLists.txt
View File

@ -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"

6
examples/quickcontrols/gallery/gallery.qml
View File

@ -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" }
}

37
examples/quickcontrols/gallery/pages/ButtonPage.qml
View File

@ -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
}
}
}
}

42
examples/quickcontrols/gallery/pages/MenuBarPage.qml Normal file
View File

@ -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.")
}
}

102
examples/quickcontrols/gallery/pages/MonthGridPage.qml Normal file
View File

@ -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
}
}
}
}
}

10
examples/quickcontrols/gallery/pages/ScrollBarPage.qml
View File

@ -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
}
}

73
examples/quickcontrols/gallery/pages/SplitViewPage.qml Normal file
View File

@ -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
}
}
}
}
}

90
examples/quickcontrols/gallery/pages/TableViewPage.qml Normal file
View File

@ -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")
}
]
}
}

74
examples/quickcontrols/gallery/pages/ToolBarPage.qml Normal file
View File

@ -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" }
}
}
}

113
examples/quickcontrols/gallery/pages/TreeViewPage.qml Normal file
View File

@ -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") }
]
}
]
}
}