Contents - Qt 框架 Menu - Qt 框架 Expand - Qt 框架 Light mode - Qt 框架 Dark mode - Qt 框架 Auto light/dark mode - Qt 框架
Qt for Python
Logo
Qt for Python
  • 快速入门
  • 商业用途
  • 入门指南
  • 模块API
  • 工具
  • 教程
  • 示例
    • 扩展QML - 添加类型示例
    • 扩展QML(高级)- 生日派对基础项目
    • 扩展QML(高级)- 继承和强制转换
    • 扩展QML(高级)- 默认属性
    • 扩展QML(高级)- 分组属性
    • 扩展QML(高级)- 附加属性
    • 扩展QML(高级)- 属性值来源
    • 扩展QML - 绑定示例
    • 扩展QML - 创建新类型
    • 扩展QML - 连接到C++方法和信号
    • 扩展QML - 添加属性绑定
    • 扩展QML - 使用自定义属性类型
    • 扩展QML - 使用列表属性类型
    • 扩展QML - 插件示例
    • QAbstractListModel在QML中
    • 扩展QML - 扩展对象示例
    • 扩展QML - 方法示例
    • 扩展QML - 对象和列表属性类型示例
    • examples/qml/signals/pytoqml1
    • examples/qml/signals/pytoqml2
    • examples/qml/signals/qmltopy1
    • examples/qml/signals/qmltopy2
    • examples/qml/signals/qmltopy3
    • examples/qml/signals/qmltopy4
    • 文本属性示例
    • 使用模型示例
    • 对象列表模型示例
    • 在QML下使用OpenGL绘制Squircle
    • 场景图绘制项示例
    • QQuickRenderControl OpenGL示例
    • 场景图 - 自定义几何形状
    • 字符串列表模型示例
    • Qt Quick示例 - 窗口和屏幕
    • Qt Quick Controls 2 - 画廊
    • Qt Quick Controls - 联系人列表
    • Qt Quick Controls - 文件系统浏览者
    • 小部件画廊示例
    • 地址簿示例
    • 地址簿示例
    • examples/widgets/graphicsview/anchorlayout
    • 动画瓷砖示例
    • 应用程序选择器示例
    • examples/widgets/mainwindows/application
    • 基本绘图示例
    • examples/widgets/itemviews/basicfiltermodel
    • 基本布局示例
    • 模糊选择器效果示例
    • 边框布局示例
    • 大炮示例
    • 字符映射表示例
    • 类向导示例
    • examples/widgets/graphicsview/collidingmice
    • 同心圆示例
    • examples/widgets/graphicsview/diagramscene
    • 数字时钟示例
    • 目录查看器示例
    • 浮动窗口部件示例
    • examples/widgets/graphicsview/dragdroprobot
    • examples/widgets/draganddrop/draggabletext
    • 释放站点示例
    • 动态布局示例
    • 缓动示例
    • 可编辑树模型示例
    • examples/widgets/graphicsview/elasticnodes
    • examples/widgets/dialogs/extension
    • examples/widgets/itemviews/fetchmore
    • 流动布局示例
    • GNU gettext示例
    • examples/widgets/imageviewer
    • JSON模型示例
    • 许可证向导示例
    • examples/widgets/effects/lighting
    • Qt Linguist示例
    • examples/widgets/mainwindows/mdi
    • 模型视图教程示例
    • examples/widgets/richtext/orderform
    • 绘图工具示例
    • 绘图示例
    • QRegularExpression示例
    • 屏幕截图示例
    • 简化的RHI小部件示例
    • 滚动框委托示例
    • examples/widgets/dialogs/standarddialogs
    • 星星委托示例
    • 状态示例
    • 语法高亮示例
    • examples/widgets/desktop/systray
    • 标签对话框示例
    • 俄罗斯方块
    • 文本编辑器示例
    • 文本对象示例
    • examples/widgets/thread_signals
    • examples/widgets/dialogs/trivialwizard
    • 任务菜单扩展示例
    • examples/uitools/uiloader
    • MIME类型浏览器示例
    • 设置编辑器示例
    • examples/corelib/ipc/sharedmemory
    • 曼德布罗特线程示例
    • 异步“埃拉托斯特尼”示例
    • 异步“最小”示例
    • examples/network/blockingfortuneclient
    • 下载示例
    • examples/network/fortuneclient
    • examples/network/fortuneserver
    • Google Suggest 示例
    • 回环示例
    • examples/network/threadedfortuneserver
    • SQL 书籍示例
    • examples/dbus/listnames
    • examples/dbus/pingpong
    • DOM 书签示例
    • 模拟时钟窗口示例
    • RHI 窗口示例
    • 上下文信息示例
    • Hello GL2 示例
    • 纹理示例
    • 线程化的 QOpenGLWidget 示例
    • 示例绑定示例
    • 使用 CMake
    • 可脚本化应用程序示例
    • 晃动控件示例
    • 媒体播放器示例
    • RESTful API 客户端
    • 文档查看器示例
    • 部件画廊
    • HelloGraphs 示例
    • 图表画廊
    • 表面图表画廊
    • 3D 柱状图示例
    • 表面示例
    • 表面示例
    • 表面示例
    • 面积图示例
    • 音频示例
    • 柱状图示例
    • 提示示例
    • 图表主题示例
    • 饼状图细分示例
    • 动态样条图示例
    • 图例示例
    • 线和柱状图示例
    • 线图示例
    • 对数轴示例
    • 内存使用示例
    • 模型数据示例
    • 嵌套饼状图示例
    • 百分比柱状图示例
    • 饼状图示例
    • 选定点配置示例
    • 光标记和点选择示例
    • QML 极坐标图示例
    • 温度记录示例
    • 音频输出示例
    • 音频源示例
    • 摄像机示例
    • 播放器示例
    • 屏幕捕获示例
    • 纳米浏览器示例
    • examples/webenginewidgets/markdowneditor
    • WebEngine 通知示例
    • 简单浏览器
    • Qt Widgets 纳米浏览器示例
    • Ax 查看器示例
    • 蓝牙扫描器示例
    • 低功耗蓝牙心率游戏
    • 低功耗蓝牙心率服务器
    • 低功耗蓝牙扫描器示例
    • Networkx 查看器示例
    • OpenCV 人脸检测示例
    • Pandas 简单示例
    • Scikit 图像示例
    • Matplotlib 小部件 3D 示例
    • Matplotlib 小部件高斯示例
    • 地图查看器示例
    • Reddit 示例
    • PDF 查看器示例
    • PDF 查看器示例
    • 自定义几何形状示例
    • Qt Quick 3D 简介示例
    • 过程纹理示例
    • examples/remoteobjects/modelview
    • 空间音频 entitled 示例
    • Hello Speak
    • 简单的 Qt 3D 示例
    • CAN 总线示例
    • Modbus 客户端示例
    • 终端示例
    • 移动块示例
    • examples/statemachine/ping_pong
    • examples/statemachine/rogue
    • 交通信号灯示例
    • WebChannel 独立示例
    • 简单 CoAP 客户端示例
    • 简单 MQTT 客户端示例
    • Qt OPC UA 查看器示例
  • 视频
  • 部署
  • 注意事项
  • 开发者注释
  • 模块索引
返回顶部

Qt Quick Controls 2 - 画廊#

标签: Android

画廊示例是一个简单的应用程序,包含一个抽屉菜单,其中包含所有 Qt Quick Controls 2。每个菜单项都会打开一个页面,显示控件的图形外观,允许您与控件交互,并解释在哪些情况下使用此控件是方便的。

下载 此 示例

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

"""
The gallery example is a simple application with a drawer menu that contains
all the Qt Quick Controls. Each menu item opens a page that shows the
graphical appearance of a control, allows you to interact with the control,
and explains in which circumstances it is handy to use this control.
"""

import os
import sys
import platform

from PySide6.QtGui import QGuiApplication, QIcon
from PySide6.QtCore import QSettings, QUrl
from PySide6.QtQml import QQmlApplicationEngine
from PySide6.QtQuickControls2 import QQuickStyle

import rc_gallery  # noqa: F401

if __name__ == "__main__":
    QGuiApplication.setApplicationName("Gallery")
    QGuiApplication.setOrganizationName("QtProject")

    app = QGuiApplication()
    QIcon.setThemeName("gallery")

    settings = QSettings()
    if not os.environ.get("QT_QUICK_CONTROLS_STYLE"):
        style_name = settings.value("style")
        if style_name:
            QQuickStyle.setStyle(style_name)

    engine = QQmlApplicationEngine()

    built_in_styles = ["Basic", "Fusion", "Imagine", "Material", "Universal"]
    if platform.system() == "Darwin":
        built_in_styles.append("macOS")
    elif platform.system() == "Windows":
        built_in_styles.append("Windows")
    engine.setInitialProperties({"builtInStyles": built_in_styles})

    engine.load(QUrl.fromLocalFile(":/gallery.qml"))
    rootObjects = engine.rootObjects()
    if not rootObjects:
        sys.exit(-1)

    window = rootObjects[0]
    window.setIcon(QIcon(':/qt-project.org/logos/pysidelogo.png'))

    sys.exit(app.exec())
// Copyright (C) 2021 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: "Qt Quick Controls"

    //! [orientation]
    readonly property bool portraitMode: 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.ac.cn/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 {
        sequence: 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()
            }
        }
    }

    Shortcut {
        sequence: "Menu"
        onActivated: optionsMenuAction.trigger()
    }

    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 : "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: "Settings"
                        onTriggered: settingsDialog.open()
                    }
                    Action {
                        text: "Help"
                        onTriggered: window.help()
                    }
                    Action {
                        text: "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: "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" }
            }

            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: {
                    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: "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)
        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: window.builtInStyles
                    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 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 Qt Quick Controls 1, Qt Quick Controls "
                    + "are an order of magnitude simpler, lighter, and faster."
                wrapMode: Label.Wrap
                font.pixelSize: 12
            }
        }
    }
}
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
  <file>+Material/ToolBar.qml</file>
  <file>ToolBar.qml</file>
  <file>gallery.qml</file>
  <file>icons/gallery/20x20/back.png</file>
  <file>icons/gallery/20x20/drawer.png</file>
  <file>icons/gallery/20x20/menu.png</file>
  <file>icons/gallery/20x20@2/back.png</file>
  <file>icons/gallery/20x20@2/drawer.png</file>
  <file>icons/gallery/20x20@2/menu.png</file>
  <file>icons/gallery/20x20@3/back.png</file>
  <file>icons/gallery/20x20@3/drawer.png</file>
  <file>icons/gallery/20x20@3/menu.png</file>
  <file>icons/gallery/20x20@4/back.png</file>
  <file>icons/gallery/20x20@4/drawer.png</file>
  <file>icons/gallery/20x20@4/menu.png</file>
  <file>icons/gallery/index.theme</file>
  <file>images/arrow.png</file>
  <file>images/arrow@2x.png</file>
  <file>images/arrow@3x.png</file>
  <file>images/arrow@4x.png</file>
  <file>images/arrows.png</file>
  <file>images/arrows@2x.png</file>
  <file>images/arrows@3x.png</file>
  <file>images/arrows@4x.png</file>
  <file>images/qt-logo.png</file>
  <file>images/qt-logo@2x.png</file>
  <file>images/qt-logo@3x.png</file>
  <file>images/qt-logo@4x.png</file>
  <file>pages/BusyIndicatorPage.qml</file>
  <file>pages/ButtonPage.qml</file>
  <file>pages/CheckBoxPage.qml</file>
  <file>pages/ComboBoxPage.qml</file>
  <file>pages/DelayButtonPage.qml</file>
  <file>pages/DelegatePage.qml</file>
  <file>pages/DialPage.qml</file>
  <file>pages/DialogPage.qml</file>
  <file>pages/FramePage.qml</file>
  <file>pages/GroupBoxPage.qml</file>
  <file>pages/PageIndicatorPage.qml</file>
  <file>pages/ProgressBarPage.qml</file>
  <file>pages/RadioButtonPage.qml</file>
  <file>pages/RangeSliderPage.qml</file>
  <file>pages/ScrollBarPage.qml</file>
  <file>pages/ScrollIndicatorPage.qml</file>
  <file>pages/ScrollablePage.qml</file>
  <file>pages/SliderPage.qml</file>
  <file>pages/SpinBoxPage.qml</file>
  <file>pages/StackViewPage.qml</file>
  <file>pages/SwipeViewPage.qml</file>
  <file>pages/SwitchPage.qml</file>
  <file>pages/TabBarPage.qml</file>
  <file>pages/TextAreaPage.qml</file>
  <file>pages/TextFieldPage.qml</file>
  <file>pages/ToolTipPage.qml</file>
  <file>pages/TumblerPage.qml</file>
  <file>qmldir</file>
  <file>qtquickcontrols2.conf</file>
</qresource>
</RCC>
module App
[Material]
Primary=#41cd52
Accent=#41cd52
Theme=System

[Universal]
Accent=#41cd52
Theme=System
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick.Controls

ToolBar {}
// Copyright (C) 2020 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick.Controls.Material

ToolBar {
    Material.foreground: "white"
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "ComboBox is a combined button and popup list. It presents "
                + "a list of options to the user that occupies minimal screen space."
        }

        ComboBox {
            model: ["First", "Second", "Third"]
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "ComboBox can be made \l editable. An editable combo box auto-"
                + "completes its text based on what is available in the model."
        }

        ComboBox {
            id: comboBox

            editable: true
            model: ListModel {
                ListElement { text: "Banana" }
                ListElement { text: "Apple" }
                ListElement { text: "Coconut" }
            }
            onAccepted: {
                if (find(editText) === -1)
                    comboBox.model.append({text: comboBox.editText})
            }
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2))

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Frame is used to layout a logical group of controls together, within a visual frame."
        }

        Frame {
            anchors.horizontalCenter: parent.horizontalCenter

            Column {
                spacing: 20
                width: page.itemWidth

                RadioButton {
                    text: "First"
                    checked: true
                    width: parent.width
                }
                RadioButton {
                    id: button
                    text: "Second"
                    width: parent.width
                }
                RadioButton {
                    text: "Third"
                    width: parent.width
                }
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Slider is used to select a value by sliding a handle along a track."
        }

        Slider {
            id: slider
            value: 0.5
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Slider {
            orientation: Qt.Vertical
            value: 0.5
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Tumbler is used to select a value by spinning a wheel."
        }

        Tumbler {
            model: 10
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "SpinBox allows the user to choose an integer value by clicking the up or down indicator buttons, "
                + "by pressing up or down on the keyboard, or by entering a text value in the input field."
        }

        SpinBox {
            id: box
            value: 50
            anchors.horizontalCenter: parent.horizontalCenter
            editable: true
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "ProgressBar indicates the progress of an operation. It can be set in an "
                + "indeterminate mode to indicate that the length of the operation is unknown."
        }

        ProgressBar {
            id: bar
            value: 0.5
            anchors.horizontalCenter: parent.horizontalCenter
        }

        ProgressBar {
            indeterminate: true
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

Pane {
    ColumnLayout {
        spacing: 40
        anchors.fill: parent
        anchors.topMargin: 20

        Label {
            Layout.fillWidth: true
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Delegate controls are used as delegates in views such as ListView."
        }

        ListView {
            id: listView
            clip: true
            section.property: "type"
            section.delegate: Pane {
                id: sectionPane
                required property string section
                width: ListView.view.width
                height: sectionLabel.implicitHeight + 20
                Label {
                    id: sectionLabel
                    text: sectionPane.section
                    anchors.centerIn: parent
                }
            }

            Layout.fillWidth: true
            Layout.fillHeight: true

            readonly property var delegateComponentMap: {
                "ItemDelegate": itemDelegateComponent,
                "SwipeDelegate": swipeDelegateComponent,
                "CheckDelegate": checkDelegateComponent,
                "RadioDelegate": radioDelegateComponent,
                "SwitchDelegate": switchDelegateComponent
            }

            Component {
                id: itemDelegateComponent

                ItemDelegate {
                    // qmllint disable unqualified
                    text: value
                    // qmllint enable unqualified
                    width: parent.width
                }
            }

            Component {
                id: swipeDelegateComponent

                SwipeDelegate {
                    id: swipeDelegate
                    // qmllint disable unqualified
                    text: value
                    // qmllint enable unqualified
                    width: parent.width

                    Component {
                        id: removeComponent

                        Rectangle {
                            color: SwipeDelegate.pressed ? "#333" : "#444"
                            width: parent.width
                            height: parent.height
                            clip: true

                            SwipeDelegate.onClicked: {
                                // qmllint disable unqualified
                                view.model.remove(ourIndex)
                                // qmllint enable unqualified
                            }

                            Label {
                                // qmllint disable unqualified
                                font.pixelSize: swipeDelegate.font.pixelSize
                                // qmllint enable unqualified
                                text: "Remove"
                                color: "white"
                                anchors.centerIn: parent
                            }
                        }
                    }

                    SequentialAnimation {
                        id: removeAnimation

                        PropertyAction {
                            // qmllint disable unqualified
                            target: delegateItem
                            // qmllint enable unqualified
                            property: "ListView.delayRemove"
                            value: true
                        }
                        NumberAnimation {
                            // qmllint disable unqualified
                            target: delegateItem.item
                            // qmllint enable unqualified
                            property: "height"
                            to: 0
                            easing.type: Easing.InOutQuad
                        }
                        PropertyAction {
                            // qmllint disable unqualified
                            target: delegateItem
                            // qmllint enable unqualified
                            property: "ListView.delayRemove"
                            value: false
                        }
                    }

                    swipe.left: removeComponent
                    swipe.right: removeComponent
                    ListView.onRemove: removeAnimation.start()
                }
            }

            Component {
                id: checkDelegateComponent

                CheckDelegate {
                    // qmllint disable unqualified
                    text: value
                    // qmllint enable unqualified
                }
            }

            ButtonGroup {
                id: radioButtonGroup
            }

            Component {
                id: radioDelegateComponent

                RadioDelegate {
                    // qmllint disable unqualified
                    text: value
                    ButtonGroup.group: radioButtonGroup
                    // qmllint enable unqualified
                }
            }

            Component {
                id: switchDelegateComponent

                SwitchDelegate {
                    // qmllint disable unqualified
                    text: value
                    // qmllint enable unqualified
                }
            }

            model: ListModel {
                ListElement { type: "ItemDelegate"; value: "ItemDelegate1" }
                ListElement { type: "ItemDelegate"; value: "ItemDelegate2" }
                ListElement { type: "ItemDelegate"; value: "ItemDelegate3" }
                ListElement { type: "SwipeDelegate"; value: "SwipeDelegate1" }
                ListElement { type: "SwipeDelegate"; value: "SwipeDelegate2" }
                ListElement { type: "SwipeDelegate"; value: "SwipeDelegate3" }
                ListElement { type: "CheckDelegate"; value: "CheckDelegate1" }
                ListElement { type: "CheckDelegate"; value: "CheckDelegate2" }
                ListElement { type: "CheckDelegate"; value: "CheckDelegate3" }
                ListElement { type: "RadioDelegate"; value: "RadioDelegate1" }
                ListElement { type: "RadioDelegate"; value: "RadioDelegate2" }
                ListElement { type: "RadioDelegate"; value: "RadioDelegate3" }
                ListElement { type: "SwitchDelegate"; value: "SwitchDelegate1" }
                ListElement { type: "SwitchDelegate"; value: "SwitchDelegate2" }
                ListElement { type: "SwitchDelegate"; value: "SwitchDelegate3" }
            }

            delegate: Loader {
                id: delegateLoader
                width: ListView.view.width
                // qmllint disable unqualified
                sourceComponent: listView.delegateComponentMap[type]
                // qmllint enable unqualified

                required property string value
                required property string type
                required property var model
                required property int index

                property Loader delegateItem: delegateLoader
                // qmllint disable unqualified
                property ListView view: listView
                // qmllint enable unqualified
                property int ourIndex: index
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Controls

StackView {
    id: stackView
    initialItem: page

    Component {
        id: page

        Pane {
            id: pane
            width: parent ? parent.width : 0 // TODO: fix null parent on destruction

            Column {
                spacing: 40
                width: parent.width

                Label {
                    width: parent.width
                    wrapMode: Label.Wrap
                    horizontalAlignment: Qt.AlignHCenter
                    text: "StackView provides a stack-based navigation model which can be used with a set of interlinked pages. "
                    + "Items are pushed onto the stack as the user navigates deeper into the material, and popped off again "
                    + "when he chooses to go back."
                }

                Button {
                    id: button
                    text: "Push"
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
                    onClicked: stackView.push(page)
                }

                Button {
                    text: "Pop"
                    enabled: stackView.depth > 1
                    width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: stackView.pop()
                }

                Label {
                    width: parent.width
                    wrapMode: Label.Wrap
                    horizontalAlignment: Qt.AlignHCenter
                    text: "Stack Depth: " + stackView.depth
                }
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "The Dial is similar to a traditional dial knob that is found on devices such as "
                + "stereos or industrial equipment. It allows the user to specify a value within a range."
        }

        Dial {
            value: 0.5
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "PageIndicator is used to indicate the currently active page in a container of pages."
        }

        PageIndicator {
            count: 5
            currentIndex: 2
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

Pane {
    id: pane

    SwipeView {
        id: view
        currentIndex: 1
        anchors.fill: parent

        Repeater {
            model: 3

            Pane {
                width: SwipeView.view.width
                height: SwipeView.view.height

                Column {
                    spacing: 40
                    width: parent.width

                    Label {
                        width: parent.width
                        wrapMode: Label.Wrap
                        horizontalAlignment: Qt.AlignHCenter
                        text: "SwipeView provides a navigation model that simplifies horizontal paged scrolling. "
                        + "The page indicator on the bottom shows which is the presently active page."
                    }

                    Image {
                        source: "../images/arrows.png"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
            }
        }
    }

    PageIndicator {
        count: view.count
        currentIndex: view.currentIndex
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

Page {
    id: page

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Repeater {
            model: 3

            Pane {
                width: SwipeView.view.width
                height: SwipeView.view.height

                Column {
                    spacing: 40
                    width: parent.width

                    Label {
                        width: parent.width
                        wrapMode: Label.Wrap
                        horizontalAlignment: Qt.AlignHCenter
                        text: "TabBar is a bar with icons or text which allows the user "
                              + "to switch between different subtasks, views, or modes."
                    }

                    Image {
                        source: "../images/arrows.png"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
            }
        }
    }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex

        TabButton {
            text: "First"
        }
        TabButton {
            text: "Second"
        }
        TabButton {
            text: "Third"
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "TextField is a single-line text editor."
        }

        TextField {
            id: field
            placeholderText: "TextField"
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2))

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "A GroupBox provides a frame, a title on top of it, and a logical group of controls within that frame."
        }

        GroupBox {
            title: "Title"
            anchors.horizontalCenter: parent.horizontalCenter

            Column {
                spacing: 20
                width: page.itemWidth

                RadioButton {
                    text: "First"
                    checked: true
                    width: parent.width
                }
                RadioButton {
                    id: button
                    text: "Second"
                    width: parent.width
                }
                RadioButton {
                    text: "Third"
                    width: parent.width
                }
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "RadioButton presents an option button that can be toggled on or off. "
                + "Radio buttons are typically used to select one option from a set of options."
        }

        Column {
            spacing: 20
            anchors.horizontalCenter: parent.horizontalCenter

            RadioButton {
                text: "First"
            }
            RadioButton {
                text: "Second"
                checked: true
            }
            RadioButton {
                text: "Third"
                enabled: false
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Button presents a push-button that can be pushed or clicked by the user. "
                + "Buttons are normally used to perform an action, or to answer a question."
        }

        ColumnLayout {
            spacing: 20
            anchors.horizontalCenter: parent.horizontalCenter

            Button {
                text: "First"
                Layout.fillWidth: true
            }
            Button {
                id: button
                text: "Second"
                highlighted: true
                Layout.fillWidth: true
            }
            Button {
                text: "Third"
                enabled: false
                Layout.fillWidth: true
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

Flickable {
    id: flickable

    contentHeight: pane.height

    Pane {
        id: pane
        width: flickable.width
        height: flickable.height * 1.25

        Column {
            id: column
            spacing: 40
            width: parent.width

            Label {
                width: parent.width
                wrapMode: Label.Wrap
                horizontalAlignment: Qt.AlignHCenter
                text: "ScrollIndicator is a non-interactive indicator that indicates the current scroll position. "
                    + "A scroll indicator can be either vertical or horizontal, and can be attached to any Flickable, "
                    + "such as ListView and GridView."
            }

            Image {
                rotation: 90
                source: "../images/arrows.png"
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }

    ScrollIndicator.vertical: ScrollIndicator { }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

Page {
    id: page

    default property alias content: pane.contentItem

    Flickable {
        anchors.fill: parent
        contentHeight: pane.implicitHeight
        flickableDirection: Flickable.AutoFlickIfNeeded

        Pane {
            id: pane
            width: parent.width
        }

        ScrollIndicator.vertical: ScrollIndicator { }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

ScrollablePage {
    id: page

    readonly property int buttonWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, page.availableWidth / 3))

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Dialog is a popup that is mostly used for short-term tasks "
                + "and brief communications with the user."
        }

        Button {
            text: "Message"
            anchors.horizontalCenter: parent.horizontalCenter
            width: page.buttonWidth
            onClicked: messageDialog.open()

            Dialog {
                id: messageDialog

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2

                title: "Message"

                Label {
                    text: "Lorem ipsum dolor sit amet..."
                }
            }
        }

        Button {
            id: button
            text: "Confirmation"
            anchors.horizontalCenter: parent.horizontalCenter
            width: page.buttonWidth
            onClicked: confirmationDialog.open()

            Dialog {
                id: confirmationDialog

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2
                parent: Overlay.overlay

                modal: true
                title: "Confirmation"
                standardButtons: Dialog.Yes | Dialog.No

                Column {
                    spacing: 20
                    anchors.fill: parent
                    Label {
                        text: "The document has been modified.\nDo you want to save your changes?"
                    }
                    CheckBox {
                        text: "Do not ask again"
                        anchors.right: parent.right
                    }
                }
            }
        }

        Button {
            text: "Content"
            anchors.horizontalCenter: parent.horizontalCenter
            width: page.buttonWidth
            onClicked: contentDialog.open()

            Dialog {
                id: contentDialog

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2
                width: Math.min(page.width, page.height) / 3 * 2
                contentHeight: logo.height * 2
                parent: Overlay.overlay

                modal: true
                title: "Content"
                standardButtons: Dialog.Close

                Flickable {
                    id: flickable
                    clip: true
                    anchors.fill: parent
                    contentHeight: column.height

                    Column {
                        id: column
                        spacing: 20
                        width: parent.width

                        Image {
                            id: logo
                            width: parent.width / 2
                            anchors.horizontalCenter: parent.horizontalCenter
                            fillMode: Image.PreserveAspectFit
                            source: "../images/qt-logo.png"
                        }

                        Label {
                            width: parent.width
                            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus "
                                + "in est quis laoreet. Interdum et malesuada fames ac ante ipsum primis "
                                + "in faucibus. Curabitur eget justo sollicitudin enim faucibus bibendum. "
                                + "Suspendisse potenti. Vestibulum cursus consequat mauris id sollicitudin. "
                                + "Duis facilisis hendrerit consectetur. Curabitur sapien tortor, efficitur "
                                + "id auctor nec, efficitur et nisl. Ut venenatis eros in nunc placerat, "
                                + "eu aliquam enim suscipit."
                            wrapMode: Label.Wrap
                        }
                    }

                    ScrollIndicator.vertical: ScrollIndicator {
                        parent: contentDialog.contentItem
                        anchors.top: flickable.top
                        anchors.bottom: flickable.bottom
                        anchors.right: parent.right
                        anchors.rightMargin: -contentDialog.rightPadding + 1
                    }
                }
            }
        }

        Button {
            text: "Input"
            anchors.horizontalCenter: parent.horizontalCenter
            width: page.buttonWidth
            onClicked: inputDialog.open()

            Dialog {
                id: inputDialog

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2
                parent: Overlay.overlay

                focus: true
                modal: true
                title: "Input"
                standardButtons: Dialog.Ok | Dialog.Cancel

                ColumnLayout {
                    spacing: 20
                    anchors.fill: parent
                    Label {
                        elide: Label.ElideRight
                        text: "Please enter the credentials:"
                        Layout.fillWidth: true
                    }
                    TextField {
                        focus: true
                        placeholderText: "Username"
                        Layout.fillWidth: true
                    }
                    TextField {
                        placeholderText: "Password"
                        echoMode: TextField.PasswordEchoOnEdit
                        Layout.fillWidth: true
                    }
                }
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "A tool tip is a short piece of text that informs the user of a control's function."
        }

        Button {
            text: "Tip"
            anchors.horizontalCenter: parent.horizontalCenter

            ToolTip.timeout: 5000
            ToolTip.visible: pressed
            ToolTip.text: "This is a tool tip."
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "CheckBox presents an option button that can be toggled on or off. "
                + "Check boxes are typically used to select one or more options from a set of options."
        }

        Column {
            spacing: 20
            anchors.horizontalCenter: parent.horizontalCenter

            CheckBox {
                text: "First"
                checked: true
            }
            CheckBox {
                text: "Second"
            }
            CheckBox {
                text: "Third"
                checked: true
                enabled: false
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "TextArea is a multi-line text editor."
        }

        TextArea {
            width: page.availableWidth / 3
            anchors.horizontalCenter: parent.horizontalCenter

            wrapMode: TextArea.Wrap
            text: "TextArea\n...\n...\n..."
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "RangeSlider is used to select a range specified by two values, by sliding each handle along a track."
        }

        RangeSlider {
            id: slider
            first.value: 0.25
            second.value: 0.75
            anchors.horizontalCenter: parent.horizontalCenter
        }

        RangeSlider {
            orientation: Qt.Vertical
            first.value: 0.25
            second.value: 0.75
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "DelayButton is a checkable button that incorporates a delay before the "
                + "button is activated. This delay prevents accidental presses."
        }

        DelayButton {
            text: "DelayButton"
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Switch is an option button that can be dragged or toggled on or off. "
                + "Switches are typically used to select between two states."
        }

        Column {
            spacing: 20
            anchors.horizontalCenter: parent.horizontalCenter

            Switch {
                text: "First"
            }
            Switch {
                text: "Second"
                checked: true
            }
            Switch {
                text: "Third"
                enabled: false
            }
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

Flickable {
    id: flickable

    contentHeight: pane.height

    Pane {
        id: pane
        width: flickable.width
        height: flickable.height * 1.25

        Column {
            id: column
            spacing: 40
            width: parent.width

            Label {
                width: parent.width
                wrapMode: Label.Wrap
                horizontalAlignment: Qt.AlignHCenter
                text: "ScrollBar is an interactive bar that can be used to scroll to a specific position. "
                    + "A scroll bar can be either vertical or horizontal, and can be attached to any Flickable, "
                    + "such as ListView and GridView."
            }

            Image {
                rotation: 90
                source: "../images/arrows.png"
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }

    ScrollBar.vertical: ScrollBar { }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "BusyIndicator is used to indicate activity while content is being loaded,"
                  + " or when the UI is blocked waiting for a resource to become available."
        }

        BusyIndicator {
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
下一页
Qt Quick 控件 - 联系人列表
上一页
Qt Quick 示例 - 窗口和屏幕
版权所有 © 2024 Qt 公司有限. 本文档中包含的贡献由各自的所有者拥有版权。本文档提供的内容根据GNU自由文档许可协议版本1.3(https://gnu.ac.cn/licenses/fdl.html)许可,由自由软件基金会发布。Qt及相关标志是芬兰以及全球其他国家的Qt公司商标。所有其他商标均属于其各自所有者。
使用Sphinx及@pradyunsg的Furo制作