283 lines
9.4 KiB
QML
283 lines
9.4 KiB
QML
|
|
||
|
|
import QtQuick 2.0
|
||
|
|
import QtQuick.Window 2.2
|
||
|
|
import QtQuick.Controls 1.4
|
||
|
|
import QtQuick.Layouts 1.3
|
||
|
|
|
||
|
|
import Qt.labs.controls 1.0
|
||
|
|
import Qt.labs.controls.material 1.0
|
||
|
|
|
||
|
|
import Qt.labs.settings 1.0
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
ApplicationWindow {
|
||
|
|
id: window
|
||
|
|
width: 360
|
||
|
|
height: 520
|
||
|
|
visible: true
|
||
|
|
title: "Qt Quick Controls 2"
|
||
|
|
|
||
|
|
Settings {
|
||
|
|
id: settings
|
||
|
|
property string style: "Default"
|
||
|
|
}
|
||
|
|
|
||
|
|
Shortcut {
|
||
|
|
sequences: ["Esc", "Back"]
|
||
|
|
enabled: stackView.depth > 1
|
||
|
|
onActivated: {
|
||
|
|
stackView.pop()
|
||
|
|
listView.currentIndex = -1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Shortcut {
|
||
|
|
sequence: "Menu"
|
||
|
|
onActivated: optionsMenu.open()
|
||
|
|
}
|
||
|
|
|
||
|
|
header: ToolBar {
|
||
|
|
Material.foreground: "white"
|
||
|
|
|
||
|
|
RowLayout {
|
||
|
|
spacing: 20
|
||
|
|
anchors.fill: parent
|
||
|
|
|
||
|
|
ToolButton {
|
||
|
|
contentItem: Image {
|
||
|
|
fillMode: Image.Pad
|
||
|
|
horizontalAlignment: Image.AlignHCenter
|
||
|
|
verticalAlignment: Image.AlignVCenter
|
||
|
|
source: stackView.depth > 1 ? "images/back.png" : "images/drawer.png"
|
||
|
|
}
|
||
|
|
onClicked: {
|
||
|
|
if (stackView.depth > 1) {
|
||
|
|
stackView.pop()
|
||
|
|
listView.currentIndex = -1
|
||
|
|
} else {
|
||
|
|
drawer.open()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Label {
|
||
|
|
id: titleLabel
|
||
|
|
text: listView.currentItem ? listView.currentItem.text : "Gallery"
|
||
|
|
font.pixelSize: 20
|
||
|
|
elide: Label.ElideRight
|
||
|
|
horizontalAlignment: Qt.AlignHCenter
|
||
|
|
verticalAlignment: Qt.AlignVCenter
|
||
|
|
Layout.fillWidth: true
|
||
|
|
}
|
||
|
|
|
||
|
|
ToolButton {
|
||
|
|
contentItem: Image {
|
||
|
|
fillMode: Image.Pad
|
||
|
|
horizontalAlignment: Image.AlignHCenter
|
||
|
|
verticalAlignment: Image.AlignVCenter
|
||
|
|
source: "images/menu.png"
|
||
|
|
}
|
||
|
|
onClicked: optionsMenu.open()
|
||
|
|
|
||
|
|
Menu {
|
||
|
|
id: optionsMenu
|
||
|
|
x: parent.width - width
|
||
|
|
transformOrigin: Menu.TopRight
|
||
|
|
|
||
|
|
MenuItem {
|
||
|
|
text: "Settings"
|
||
|
|
onTriggered: settingsDialog.open()
|
||
|
|
}
|
||
|
|
MenuItem {
|
||
|
|
text: "About"
|
||
|
|
onTriggered: aboutDialog.open()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Drawer {
|
||
|
|
id: drawer
|
||
|
|
width: Math.min(window.width, window.height) / 3 * 2
|
||
|
|
height: window.height
|
||
|
|
interactive: stackView.depth === 1
|
||
|
|
|
||
|
|
ListView {
|
||
|
|
id: listView
|
||
|
|
|
||
|
|
focus: true
|
||
|
|
currentIndex: -1
|
||
|
|
anchors.fill: parent
|
||
|
|
|
||
|
|
delegate: ItemDelegate {
|
||
|
|
width: parent.width
|
||
|
|
text: model.title
|
||
|
|
highlighted: ListView.isCurrentItem
|
||
|
|
onClicked: {
|
||
|
|
listView.currentIndex = index
|
||
|
|
stackView.push(model.source)
|
||
|
|
drawer.close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
model: ListModel {
|
||
|
|
ListElement { title: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
|
||
|
|
ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
|
||
|
|
ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" }
|
||
|
|
ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" }
|
||
|
|
ListElement { title: "DelayButton"; source: "qrc:/pages/DelayButtonPage.qml" }
|
||
|
|
ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" }
|
||
|
|
ListElement { title: "Dialog"; source: "qrc:/pages/DialogPage.qml" }
|
||
|
|
ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" }
|
||
|
|
ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" }
|
||
|
|
ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" }
|
||
|
|
ListElement { title: "PageIndicator"; source: "qrc:/pages/PageIndicatorPage.qml" }
|
||
|
|
ListElement { title: "ProgressBar"; source: "qrc:/pages/ProgressBarPage.qml" }
|
||
|
|
ListElement { title: "RadioButton"; source: "qrc:/pages/RadioButtonPage.qml" }
|
||
|
|
ListElement { title: "RangeSlider"; source: "qrc:/pages/RangeSliderPage.qml" }
|
||
|
|
ListElement { title: "ScrollBar"; source: "qrc:/pages/ScrollBarPage.qml" }
|
||
|
|
ListElement { title: "ScrollIndicator"; source: "qrc:/pages/ScrollIndicatorPage.qml" }
|
||
|
|
ListElement { title: "Slider"; source: "qrc:/pages/SliderPage.qml" }
|
||
|
|
ListElement { title: "SpinBox"; source: "qrc:/pages/SpinBoxPage.qml" }
|
||
|
|
ListElement { title: "StackView"; source: "qrc:/pages/StackViewPage.qml" }
|
||
|
|
ListElement { title: "SwipeView"; source: "qrc:/pages/SwipeViewPage.qml" }
|
||
|
|
ListElement { title: "Switch"; source: "qrc:/pages/SwitchPage.qml" }
|
||
|
|
ListElement { title: "TabBar"; source: "qrc:/pages/TabBarPage.qml" }
|
||
|
|
ListElement { title: "TextArea"; source: "qrc:/pages/TextAreaPage.qml" }
|
||
|
|
ListElement { title: "TextField"; source: "qrc:/pages/TextFieldPage.qml" }
|
||
|
|
ListElement { title: "ToolTip"; source: "qrc:/pages/ToolTipPage.qml" }
|
||
|
|
ListElement { title: "Tumbler"; source: "qrc:/pages/TumblerPage.qml" }
|
||
|
|
}
|
||
|
|
|
||
|
|
ScrollIndicator.vertical: ScrollIndicator { }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
StackView {
|
||
|
|
id: stackView
|
||
|
|
anchors.fill: parent
|
||
|
|
|
||
|
|
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: "Qt Quick Controls 2 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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Dialog {
|
||
|
|
id: settingsDialog
|
||
|
|
x: Math.round((window.width - width) / 2)
|
||
|
|
y: Math.round(window.height / 6)
|
||
|
|
width: Math.round(Math.min(window.width, window.height) / 3 * 2)
|
||
|
|
modal: true
|
||
|
|
focus: true
|
||
|
|
title: "Settings"
|
||
|
|
|
||
|
|
standardButtons: Dialog.Ok | Dialog.Cancel
|
||
|
|
onAccepted: {
|
||
|
|
settings.style = styleBox.displayText
|
||
|
|
settingsDialog.close()
|
||
|
|
}
|
||
|
|
onRejected: {
|
||
|
|
styleBox.currentIndex = styleBox.styleIndex
|
||
|
|
settingsDialog.close()
|
||
|
|
}
|
||
|
|
|
||
|
|
contentItem: ColumnLayout {
|
||
|
|
id: settingsColumn
|
||
|
|
spacing: 20
|
||
|
|
|
||
|
|
RowLayout {
|
||
|
|
spacing: 10
|
||
|
|
|
||
|
|
Label {
|
||
|
|
text: "Style:"
|
||
|
|
}
|
||
|
|
|
||
|
|
ComboBox {
|
||
|
|
id: styleBox
|
||
|
|
property int styleIndex: -1
|
||
|
|
model: availableStyles
|
||
|
|
Component.onCompleted: {
|
||
|
|
styleIndex = find(settings.style, Qt.MatchFixedString)
|
||
|
|
if (styleIndex !== -1)
|
||
|
|
currentIndex = styleIndex
|
||
|
|
}
|
||
|
|
Layout.fillWidth: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Label {
|
||
|
|
text: "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: "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: "The Qt Quick Controls 2 module delivers the next generation user interface controls based on Qt Quick."
|
||
|
|
wrapMode: Label.Wrap
|
||
|
|
font.pixelSize: 12
|
||
|
|
}
|
||
|
|
|
||
|
|
Label {
|
||
|
|
width: aboutDialog.availableWidth
|
||
|
|
text: "In comparison to the desktop-oriented Qt Quick Controls 1, Qt Quick Controls 2 "
|
||
|
|
+ "are an order of magnitude simpler, lighter and faster, and are primarily targeted "
|
||
|
|
+ "towards embedded and mobile platforms."
|
||
|
|
wrapMode: Label.Wrap
|
||
|
|
font.pixelSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|