371 lines
13 KiB
QML
371 lines
13 KiB
QML
// Copyright (C) 2022 The Qt Company Ltd.
|
|
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
|
|
|
pragma ComponentBehavior: Bound
|
|
|
|
import QtCore
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
|
|
import "." as App
|
|
|
|
ApplicationWindow {
|
|
id: window
|
|
width: 360
|
|
height: 520
|
|
visible: true
|
|
title: qsTr("Qt Quick Controls")
|
|
|
|
//! [orientation]
|
|
readonly property bool portraitMode: !orientationCheckBox.checked || window.width < window.height
|
|
//! [orientation]
|
|
|
|
function help() {
|
|
let displayingControl = listView.currentIndex !== -1
|
|
let currentControlName = displayingControl
|
|
? listView.model.get(listView.currentIndex).title.toLowerCase() : ""
|
|
let url = "https://doc.qt.io/qt-6/"
|
|
+ (displayingControl
|
|
? "qml-qtquick-controls2-" + currentControlName + ".html"
|
|
: "qtquick-controls2-qmlmodule.html");
|
|
Qt.openUrlExternally(url)
|
|
}
|
|
|
|
required property var builtInStyles
|
|
|
|
Settings {
|
|
id: settings
|
|
property string style
|
|
}
|
|
|
|
Shortcut {
|
|
sequences: ["Esc", "Back"]
|
|
enabled: stackView.depth > 1
|
|
onActivated: navigateBackAction.trigger()
|
|
}
|
|
|
|
Shortcut {
|
|
sequences: [StandardKey.HelpContents]
|
|
onActivated: window.help()
|
|
}
|
|
|
|
Action {
|
|
id: navigateBackAction
|
|
icon.name: stackView.depth > 1 ? "back" : "drawer"
|
|
onTriggered: {
|
|
if (stackView.depth > 1) {
|
|
stackView.pop()
|
|
listView.currentIndex = -1
|
|
} else {
|
|
drawer.open()
|
|
}
|
|
}
|
|
}
|
|
|
|
Action {
|
|
id: optionsMenuAction
|
|
icon.name: "menu"
|
|
onTriggered: optionsMenu.open()
|
|
}
|
|
|
|
header: App.ToolBar {
|
|
RowLayout {
|
|
spacing: 20
|
|
anchors.fill: parent
|
|
anchors.leftMargin: !window.portraitMode ? drawer.width : undefined
|
|
|
|
ToolButton {
|
|
action: navigateBackAction
|
|
visible: window.portraitMode
|
|
}
|
|
|
|
Label {
|
|
id: titleLabel
|
|
text: listView.currentItem ? (listView.currentItem as ItemDelegate).text : qsTr("Gallery")
|
|
font.pixelSize: 20
|
|
elide: Label.ElideRight
|
|
horizontalAlignment: Qt.AlignHCenter
|
|
verticalAlignment: Qt.AlignVCenter
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
ToolButton {
|
|
action: optionsMenuAction
|
|
|
|
Menu {
|
|
id: optionsMenu
|
|
x: parent.width - width
|
|
transformOrigin: Menu.TopRight
|
|
|
|
Action {
|
|
text: qsTr("Settings")
|
|
onTriggered: settingsDialog.open()
|
|
}
|
|
Action {
|
|
text: qsTr("Help")
|
|
onTriggered: window.help()
|
|
}
|
|
Action {
|
|
text: qsTr("About")
|
|
onTriggered: aboutDialog.open()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Drawer {
|
|
id: drawer
|
|
|
|
width: Math.min(window.width, window.height) / 3 * 2
|
|
height: window.height
|
|
modal: window.portraitMode
|
|
interactive: window.portraitMode ? (stackView.depth === 1) : false
|
|
position: window.portraitMode ? 0 : 1
|
|
visible: !window.portraitMode
|
|
|
|
ListView {
|
|
id: listView
|
|
|
|
focus: true
|
|
currentIndex: -1
|
|
anchors.fill: parent
|
|
|
|
model: ListModel {
|
|
ListElement { title: qsTr("BusyIndicator"); source: "qrc:/pages/BusyIndicatorPage.qml" }
|
|
ListElement { title: qsTr("Button"); source: "qrc:/pages/ButtonPage.qml" }
|
|
ListElement { title: qsTr("CheckBox"); source: "qrc:/pages/CheckBoxPage.qml" }
|
|
ListElement { title: qsTr("ComboBox"); source: "qrc:/pages/ComboBoxPage.qml" }
|
|
ListElement { title: qsTr("DelayButton"); source: "qrc:/pages/DelayButtonPage.qml" }
|
|
ListElement { title: qsTr("Dial"); source: "qrc:/pages/DialPage.qml" }
|
|
ListElement { title: qsTr("Dialog"); source: "qrc:/pages/DialogPage.qml" }
|
|
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("PageIndicator"); source: "qrc:/pages/PageIndicatorPage.qml" }
|
|
ListElement { title: qsTr("ProgressBar"); source: "qrc:/pages/ProgressBarPage.qml" }
|
|
ListElement { title: qsTr("RadioButton"); source: "qrc:/pages/RadioButtonPage.qml" }
|
|
ListElement { title: qsTr("RangeSlider"); source: "qrc:/pages/RangeSliderPage.qml" }
|
|
ListElement { title: qsTr("ScrollBar"); source: "qrc:/pages/ScrollBarPage.qml" }
|
|
ListElement { title: qsTr("ScrollIndicator"); source: "qrc:/pages/ScrollIndicatorPage.qml" }
|
|
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("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("TextArea"); source: "qrc:/pages/TextAreaPage.qml" }
|
|
ListElement { title: qsTr("TextField"); source: "qrc:/pages/TextFieldPage.qml" }
|
|
ListElement { title: qsTr("ToolTip"); source: "qrc:/pages/ToolTipPage.qml" }
|
|
ListElement { title: qsTr("Tumbler"); source: "qrc:/pages/TumblerPage.qml" }
|
|
}
|
|
|
|
delegate: ItemDelegate {
|
|
id: delegateItem
|
|
width: ListView.view.width
|
|
text: title
|
|
highlighted: ListView.isCurrentItem
|
|
|
|
required property int index
|
|
required property var model
|
|
required property string title
|
|
required property string source
|
|
|
|
onClicked: {
|
|
if (stackView.depth > 1)
|
|
return
|
|
|
|
listView.currentIndex = index
|
|
stackView.push(source)
|
|
if (window.portraitMode)
|
|
drawer.close()
|
|
}
|
|
}
|
|
|
|
ScrollIndicator.vertical: ScrollIndicator { }
|
|
}
|
|
}
|
|
|
|
StackView {
|
|
id: stackView
|
|
|
|
anchors.fill: parent
|
|
anchors.leftMargin: !window.portraitMode ? drawer.width : undefined
|
|
|
|
initialItem: Pane {
|
|
id: pane
|
|
|
|
Image {
|
|
id: logo
|
|
width: pane.availableWidth / 2
|
|
height: pane.availableHeight / 2
|
|
anchors.centerIn: parent
|
|
anchors.verticalCenterOffset: -50
|
|
fillMode: Image.PreserveAspectFit
|
|
source: "images/qt-logo.png"
|
|
}
|
|
|
|
Label {
|
|
text: qsTr("Qt Quick Controls provides a set of controls that can be used to build complete interfaces in Qt Quick.")
|
|
anchors.margins: 20
|
|
anchors.top: logo.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: arrow.top
|
|
horizontalAlignment: Label.AlignHCenter
|
|
verticalAlignment: Label.AlignVCenter
|
|
wrapMode: Label.Wrap
|
|
}
|
|
|
|
Image {
|
|
id: arrow
|
|
source: "images/arrow.png"
|
|
anchors.left: parent.left
|
|
anchors.bottom: parent.bottom
|
|
visible: window.portraitMode
|
|
}
|
|
}
|
|
}
|
|
|
|
Dialog {
|
|
id: settingsDialog
|
|
x: Math.round((window.width - width) / 2)
|
|
y: Math.round(window.height / 6)
|
|
modal: true
|
|
focus: true
|
|
title: qsTr("Settings")
|
|
|
|
standardButtons: Dialog.Ok | Dialog.Cancel
|
|
onAccepted: {
|
|
settings.style = styleBox.displayText
|
|
GalleryConfig.disabled = disableControlsCheckBox.checked
|
|
settingsDialog.close()
|
|
}
|
|
onRejected: {
|
|
styleBox.currentIndex = styleBox.styleIndex
|
|
settingsDialog.close()
|
|
}
|
|
|
|
contentItem: ColumnLayout {
|
|
id: settingsColumn
|
|
spacing: 20
|
|
|
|
RowLayout {
|
|
spacing: 10
|
|
|
|
Label {
|
|
text: qsTr("Style:")
|
|
}
|
|
|
|
ComboBox {
|
|
id: styleBox
|
|
property int styleIndex: -1
|
|
model: window.builtInStyles
|
|
Component.onCompleted: {
|
|
styleIndex = find(settings.style, Qt.MatchFixedString)
|
|
if (styleIndex !== -1)
|
|
currentIndex = styleIndex
|
|
}
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
id: colorSchemes
|
|
// Some Qt Quick styles prioritize the respective design system guidelines
|
|
// over the system palette.
|
|
enabled: ["FluentWinUI3", "Fusion", "iOS", "Basic"].includes(styleBox.currentText)
|
|
CheckBox {
|
|
id: autoColorScheme
|
|
checked: true
|
|
text: qsTr("Auto")
|
|
}
|
|
CheckBox {
|
|
id: darkColorScheme
|
|
text: qsTr("Dark Mode")
|
|
}
|
|
CheckBox {
|
|
id: lightColorScheme
|
|
text: qsTr("Light Mode")
|
|
}
|
|
ButtonGroup {
|
|
exclusive: true
|
|
buttons: colorSchemes.children
|
|
onCheckedButtonChanged: {
|
|
let scheme;
|
|
switch (checkedButton) {
|
|
case autoColorScheme:
|
|
scheme = Qt.Unknown
|
|
break;
|
|
case darkColorScheme:
|
|
scheme = Qt.Dark
|
|
break;
|
|
case lightColorScheme:
|
|
scheme = Qt.Light
|
|
break;
|
|
}
|
|
Qt.styleHints.colorScheme = scheme
|
|
}
|
|
}
|
|
}
|
|
|
|
CheckBox {
|
|
id: orientationCheckBox
|
|
text: qsTr("Enable Landscape")
|
|
checked: false
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
CheckBox {
|
|
id: disableControlsCheckBox
|
|
checked: GalleryConfig.disabled
|
|
text: qsTr("Disable Controls")
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
Label {
|
|
text: qsTr("Restart required")
|
|
color: "#e41e25"
|
|
opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
|
|
horizontalAlignment: Label.AlignHCenter
|
|
verticalAlignment: Label.AlignVCenter
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
}
|
|
}
|
|
}
|
|
|
|
Dialog {
|
|
id: aboutDialog
|
|
modal: true
|
|
focus: true
|
|
title: qsTr("About")
|
|
x: (window.width - width) / 2
|
|
y: window.height / 6
|
|
width: Math.min(window.width, window.height) / 3 * 2
|
|
contentHeight: aboutColumn.height
|
|
|
|
Column {
|
|
id: aboutColumn
|
|
spacing: 20
|
|
|
|
Label {
|
|
width: aboutDialog.availableWidth
|
|
text: qsTr("The Qt Quick Controls module delivers the next generation user interface controls based on Qt Quick.")
|
|
wrapMode: Label.Wrap
|
|
font.pixelSize: 12
|
|
}
|
|
|
|
Label {
|
|
width: aboutDialog.availableWidth
|
|
text: qsTr("In comparison to Qt Quick Controls 1, Qt Quick Controls "
|
|
+ "are an order of magnitude simpler, lighter, and faster.")
|
|
wrapMode: Label.Wrap
|
|
font.pixelSize: 12
|
|
}
|
|
}
|
|
}
|
|
}
|