277 lines
9.3 KiB
QML
277 lines
9.3 KiB
QML
import QtQuick 2.7
|
|
import QtQuick.Layouts 1.3
|
|
import QtQuick.Controls 2.1
|
|
import QtQuick.Controls.Material 2.1
|
|
import QtQuick.Controls.Universal 2.1
|
|
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 {
|
|
sequence: "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: "./pages/BusyIndicatorPage.qml" }
|
|
ListElement { title: "Button"; source: "./pages/ButtonPage.qml" }
|
|
ListElement { title: "CheckBox"; source: "./pages/CheckBoxPage.qml" }
|
|
ListElement { title: "ComboBox"; source: "./pages/ComboBoxPage.qml" }
|
|
ListElement { title: "DelayButton"; source: "./pages/DelayButtonPage.qml" }
|
|
ListElement { title: "Dial"; source: "./pages/DialPage.qml" }
|
|
ListElement { title: "Dialog"; source: "./pages/DialogPage.qml" }
|
|
ListElement { title: "Delegates"; source: "./pages/DelegatePage.qml" }
|
|
ListElement { title: "Frame"; source: "./pages/FramePage.qml" }
|
|
ListElement { title: "GroupBox"; source: "./pages/GroupBoxPage.qml" }
|
|
ListElement { title: "PageIndicator"; source: "./pages/PageIndicatorPage.qml" }
|
|
ListElement { title: "ProgressBar"; source: "./pages/ProgressBarPage.qml" }
|
|
ListElement { title: "RadioButton"; source: "./pages/RadioButtonPage.qml" }
|
|
ListElement { title: "RangeSlider"; source: "./pages/RangeSliderPage.qml" }
|
|
ListElement { title: "ScrollBar"; source: "./pages/ScrollBarPage.qml" }
|
|
ListElement { title: "ScrollIndicator"; source: "./pages/ScrollIndicatorPage.qml" }
|
|
ListElement { title: "Slider"; source: "./pages/SliderPage.qml" }
|
|
ListElement { title: "SpinBox"; source: "./pages/SpinBoxPage.qml" }
|
|
ListElement { title: "StackView"; source: "./pages/StackViewPage.qml" }
|
|
ListElement { title: "SwipeView"; source: "./pages/SwipeViewPage.qml" }
|
|
ListElement { title: "Switch"; source: "./pages/SwitchPage.qml" }
|
|
ListElement { title: "TabBar"; source: "./pages/TabBarPage.qml" }
|
|
ListElement { title: "TextArea"; source: "./pages/TextAreaPage.qml" }
|
|
ListElement { title: "TextField"; source: "./pages/TextFieldPage.qml" }
|
|
ListElement { title: "ToolTip"; source: "./pages/ToolTipPage.qml" }
|
|
ListElement { title: "Tumbler"; source: "./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
|
|
}
|
|
}
|
|
}
|
|
}
|