• Qt官方示例：Qt Quick Controls - Gallery

    这个示例演示常用的Qt Quick控件。

    主窗口代码：

    1. import QtQuick
    2. import QtQuick.Layouts
    3. import QtQuick.Controls
    4. import Qt.labs.settings
    5.  
    6. import "." as App
    7.  
    8. ApplicationWindow
    9. {
    10.     id: window
    11.     width: 360
    12.     height: 520
    13.     visible: true
    14.     title: "Qt Quick 控件"
    15.  
    16.     function help()
    17.     {
    18.         let displayingControl = listView.currentIndex !== -1
    19.         let currentControlName = displayingControl
    20.             ? listView.model.get(listView.currentIndex).title.toLowerCase() : ""
    21.         let url = "https://doc.qt.io/qt-5/" + (displayingControl ? "qml-qtquick-controls2-" + currentControlName + ".html"
    22.                                                                  : "qtquick-controls2-qmlmodule.html");
    23.         Qt.openUrlExternally(url)
    24.     }
    25.  
    26.     required property var builtInStyles
    27.  
    28.     Settings
    29.     {
    30.         id: settings
    31.         property string style
    32.     }
    33.  
    34.     Shortcut
    35.     {
    36.         sequences: ["Esc", "Back"]
    37.         enabled: stackView.depth > 1
    38.         onActivated: navigateBackAction.trigger()
    39.     }
    40.  
    41.     Shortcut
    42.     {
    43.         sequence: StandardKey.HelpContents
    44.         onActivated: help()
    45.     }
    46.  
    47.     Action
    48.     {
    49.         id: navigateBackAction
    50.         icon.name: stackView.depth > 1 ? "back" : "drawer"
    51.         onTriggered:
    52.         {
    53.             if (stackView.depth > 1)
    54.             {
    55.                 stackView.pop()
    56.                 listView.currentIndex = -1
    57.             } else {
    58.                 drawer.open()
    59.             }
    60.         }
    61.     }
    62.  
    63.     Shortcut
    64.     {
    65.         sequence: "Menu"
    66.         onActivated: optionsMenuAction.trigger()
    67.     }
    68.  
    69.     Action
    70.     {
    71.         id: optionsMenuAction
    72.         icon.name: "menu"
    73.         onTriggered: optionsMenu.open()
    74.     }
    75.  
    76.     header: ToolBar
    77.     {
    78.         RowLayout
    79.         {
    80.             spacing: 20
    81.             anchors.fill: parent
    82.  
    83.             ToolButton
    84.             {
    85.                 action: navigateBackAction
    86.             }
    87.  
    88.             Label
    89.             {
    90.                 id: titleLabel
    91.                 text: listView.currentItem ? listView.currentItem.text : "Gallery"
    92.                 font.pixelSize: 20
    93.                 elide: Label.ElideRight
    94.                 horizontalAlignment: Qt.AlignHCenter
    95.                 verticalAlignment: Qt.AlignVCenter
    96.                 Layout.fillWidth: true
    97.             }
    98.  
    99.             ToolButton
    100.             {
    101.                 action: optionsMenuAction
    102.  
    103.                 Menu
    104.                 {
    105.                     id: optionsMenu
    106.                     x: parent.width - width
    107.                     transformOrigin: Menu.TopRight
    108.  
    109.                     Action
    110.                     {
    111.                         text: "设置"
    112.                         onTriggered: settingsDialog.open()
    113.                     }
    114.                     Action
    115.                     {
    116.                         text: "帮助"
    117.                         onTriggered: help()
    118.                     }
    119.                     Action
    120.                     {
    121.                         text: "关于"
    122.                         onTriggered: aboutDialog.open()
    123.                     }
    124.                 }
    125.             }
    126.         }
    127.     }
    128.  
    129.     Drawer
    130.     {
    131.         id: drawer
    132.         width: Math.min(window.width, window.height) / 3 * 2
    133.         height: window.height
    134.         interactive: stackView.depth === 1
    135.  
    136.         ListView
    137.         {
    138.             id: listView
    139.  
    140.             focus: true
    141.             currentIndex: -1
    142.             anchors.fill: parent
    143.  
    144.             delegate: ItemDelegate
    145.             {
    146.                 width: listView.width
    147.                 text: model.title
    148.                 highlighted: ListView.isCurrentItem
    149.                 onClicked:
    150.                 {
    151.                     listView.currentIndex = index
    152.                     stackView.push(model.source)
    153.                     drawer.close()
    154.                 }
    155.             }
    156.  
    157.             model: ListModel
    158.             {
    159.                 ListElement { title: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
    160.                 ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
    161.                 ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" }
    162.                 ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" }
    163.                 ListElement { title: "DelayButton"; source: "qrc:/pages/DelayButtonPage.qml" }
    164.                 ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" }
    165.                 ListElement { title: "Dialog"; source: "qrc:/pages/DialogPage.qml" }
    166.                 ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" }
    167.                 ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" }
    168.                 ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" }
    169.                 ListElement { title: "PageIndicator"; source: "qrc:/pages/PageIndicatorPage.qml" }
    170.                 ListElement { title: "ProgressBar"; source: "qrc:/pages/ProgressBarPage.qml" }
    171.                 ListElement { title: "RadioButton"; source: "qrc:/pages/RadioButtonPage.qml" }
    172.                 ListElement { title: "RangeSlider"; source: "qrc:/pages/RangeSliderPage.qml" }
    173.                 ListElement { title: "ScrollBar"; source: "qrc:/pages/ScrollBarPage.qml" }
    174.                 ListElement { title: "ScrollIndicator"; source: "qrc:/pages/ScrollIndicatorPage.qml" }
    175.                 ListElement { title: "Slider"; source: "qrc:/pages/SliderPage.qml" }
    176.                 ListElement { title: "SpinBox"; source: "qrc:/pages/SpinBoxPage.qml" }
    177.                 ListElement { title: "StackView"; source: "qrc:/pages/StackViewPage.qml" }
    178.                 ListElement { title: "SwipeView"; source: "qrc:/pages/SwipeViewPage.qml" }
    179.                 ListElement { title: "Switch"; source: "qrc:/pages/SwitchPage.qml" }
    180.                 ListElement { title: "TabBar"; source: "qrc:/pages/TabBarPage.qml" }
    181.                 ListElement { title: "TextArea"; source: "qrc:/pages/TextAreaPage.qml" }
    182.                 ListElement { title: "TextField"; source: "qrc:/pages/TextFieldPage.qml" }
    183.                 ListElement { title: "ToolTip"; source: "qrc:/pages/ToolTipPage.qml" }
    184.                 ListElement { title: "Tumbler"; source: "qrc:/pages/TumblerPage.qml" }
    185.             }
    186.  
    187.             ScrollIndicator.vertical: ScrollIndicator { }
    188.         }
    189.     }
    190.  
    191.     StackView
    192.     {
    193.         id: stackView
    194.         anchors.fill: parent
    195.  
    196.         initialItem: Pane
    197.         {
    198.             id: pane
    199.  
    200.             Image
    201.             {
    202.                 id: logo
    203.                 width: pane.availableWidth / 2
    204.                 height: pane.availableHeight / 2
    205.                 anchors.centerIn: parent
    206.                 anchors.verticalCenterOffset: -50
    207.                 fillMode: Image.PreserveAspectFit
    208.                 source: "images/qt-logo.png"
    209.             }
    210.  
    211.             Label
    212.             {
    213.                 text: "Qt Quick Controls 提供了一组控件，可用于在 Qt Quick 中构建完整的界面"
    214.                 anchors.margins: 20
    215.                 anchors.top: logo.bottom
    216.                 anchors.left: parent.left
    217.                 anchors.right: parent.right
    218.                 anchors.bottom: arrow.top
    219.                 horizontalAlignment: Label.AlignHCenter
    220.                 verticalAlignment: Label.AlignVCenter
    221.                 wrapMode: Label.Wrap
    222.             }
    223.  
    224.             Image
    225.             {
    226.                 id: arrow
    227.                 source: "images/arrow.png"
    228.                 anchors.left: parent.left
    229.                 anchors.bottom: parent.bottom
    230.             }
    231.         }
    232.     }
    233.  
    234.     Dialog
    235.     {
    236.         id: settingsDialog
    237.         x: Math.round((window.width - width) / 2)
    238.         y: Math.round(window.height / 6)
    239.         width: Math.round(Math.min(window.width, window.height) / 3 * 2)
    240.         modal: true
    241.         focus: true
    242.         title: "Settings"
    243.  
    244.         standardButtons: Dialog.Ok | Dialog.Cancel
    245.         onAccepted:
    246.         {
    247.             settings.style = styleBox.displayText
    248.             settingsDialog.close()
    249.         }
    250.         onRejected:
    251.         {
    252.             styleBox.currentIndex = styleBox.styleIndex
    253.             settingsDialog.close()
    254.         }
    255.  
    256.         contentItem: ColumnLayout
    257.         {
    258.             id: settingsColumn
    259.             spacing: 20
    260.  
    261.             RowLayout
    262.             {
    263.                 spacing: 10
    264.  
    265.                 Label
    266.                 {
    267.                     text: "Style:"
    268.                 }
    269.  
    270.                 ComboBox
    271.                 {
    272.                     id: styleBox
    273.                     property int styleIndex: -1
    274.                     model: window.builtInStyles
    275.                     Component.onCompleted:
    276.                     {
    277.                         styleIndex = find(settings.style, Qt.MatchFixedString)
    278.                         if (styleIndex !== -1)
    279.                             currentIndex = styleIndex
    280.                     }
    281.                     Layout.fillWidth: true
    282.                 }
    283.             }
    284.  
    285.             Label
    286.             {
    287.                 text: "Restart required"
    288.                 color: "#e41e25"
    289.                 opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
    290.                 horizontalAlignment: Label.AlignHCenter
    291.                 verticalAlignment: Label.AlignVCenter
    292.                 Layout.fillWidth: true
    293.                 Layout.fillHeight: true
    294.             }
    295.         }
    296.     }
    297.  
    298.     Dialog
    299.     {
    300.         id: aboutDialog
    301.         modal: true
    302.         focus: true
    303.         title: "About"
    304.         x: (window.width - width) / 2
    305.         y: window.height / 6
    306.         width: Math.min(window.width, window.height) / 3 * 2
    307.         contentHeight: aboutColumn.height
    308.  
    309.         Column
    310.         {
    311.             id: aboutColumn
    312.             spacing: 20
    313.  
    314.             Label
    315.             {
    316.                 width: aboutDialog.availableWidth
    317.                 text: "Qt Quick Controls 模块提供了基于 Qt Quick 的下一代用户界面控件。"
    318.                 wrapMode: Label.Wrap
    319.                 font.pixelSize: 12
    320.             }
    321.  
    322.             Label
    323.             {
    324.                 width: aboutDialog.availableWidth
    325.                 text: "与 Qt Quick Controls 1 相比，Qt Quick Controls 更简单、更轻量级、更快"
    326.                 wrapMode: Label.Wrap
    327.                 font.pixelSize: 12
    328.             }
    329.         }
    330.     }
    331. }

    界面结构：

    左边的侧面板

    1.     Drawer
    2.     {
    3.         id: drawer
    4.         width: Math.min(window.width, window.height) / 3 * 2
    5.         height: window.height
    6.         interactive: stackView.depth === 1
    7.  
    8.         ListView
    9.         {
    10.             id: listView
    11.  
    12.             focus: true
    13.             currentIndex: -1
    14.             anchors.fill: parent
    15.  
    16.             delegate: ItemDelegate
    17.             {
    18.                 width: listView.width
    19.                 text: model.title
    20.                 highlighted: ListView.isCurrentItem
    21.                 onClicked:
    22.                 {
    23.                     listView.currentIndex = index
    24.                     stackView.push(model.source)
    25.                     drawer.close()
    26.                 }
    27.             }
    28.  
    29.             model: ListModel
    30.             {
    31.                 ListElement { title: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
    32.                 ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
    33.                 ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" }
    34.                 ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" }
    35.                 ListElement { title: "DelayButton"; source: "qrc:/pages/DelayButtonPage.qml" }
    36.                 ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" }
    37.                 ListElement { title: "Dialog"; source: "qrc:/pages/DialogPage.qml" }
    38.                 ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" }
    39.                 ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" }
    40.                 ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" }
    41.                 ListElement { title: "PageIndicator"; source: "qrc:/pages/PageIndicatorPage.qml" }
    42.                 ListElement { title: "ProgressBar"; source: "qrc:/pages/ProgressBarPage.qml" }
    43.                 ListElement { title: "RadioButton"; source: "qrc:/pages/RadioButtonPage.qml" }
    44.                 ListElement { title: "RangeSlider"; source: "qrc:/pages/RangeSliderPage.qml" }
    45.                 ListElement { title: "ScrollBar"; source: "qrc:/pages/ScrollBarPage.qml" }
    46.                 ListElement { title: "ScrollIndicator"; source: "qrc:/pages/ScrollIndicatorPage.qml" }
    47.                 ListElement { title: "Slider"; source: "qrc:/pages/SliderPage.qml" }
    48.                 ListElement { title: "SpinBox"; source: "qrc:/pages/SpinBoxPage.qml" }
    49.                 ListElement { title: "StackView"; source: "qrc:/pages/StackViewPage.qml" }
    50.                 ListElement { title: "SwipeView"; source: "qrc:/pages/SwipeViewPage.qml" }
    51.                 ListElement { title: "Switch"; source: "qrc:/pages/SwitchPage.qml" }
    52.                 ListElement { title: "TabBar"; source: "qrc:/pages/TabBarPage.qml" }
    53.                 ListElement { title: "TextArea"; source: "qrc:/pages/TextAreaPage.qml" }
    54.                 ListElement { title: "TextField"; source: "qrc:/pages/TextFieldPage.qml" }
    55.                 ListElement { title: "ToolTip"; source: "qrc:/pages/ToolTipPage.qml" }
    56.                 ListElement { title: "Tumbler"; source: "qrc:/pages/TumblerPage.qml" }
    57.             }
    58.  
    59.             ScrollIndicator.vertical: ScrollIndicator { }
    60.         }
    61.     }

    中间放置一个列表视图，视图有一个垂直的指示器。

    当按下视图中的项目时，对应的页面进入栈视图。

    点击工具栏中左边的按钮时，当前页面出栈：

    1.     Action
    2.     {
    3.         id: navigateBackAction
    4.         icon.name: stackView.depth > 1 ? "back" : "drawer"
    5.         onTriggered:
    6.         {
    7.             if (stackView.depth > 1)
    8.             {
    9.                 stackView.pop()
    10.                 listView.currentIndex = -1
    11.             } else {
    12.                 drawer.open()
    13.             }
    14.         }
    15.     }

    切换主题功能

    在载入主界面的qml文件时赋予初始化属性。

    这个示例能值得一说的点就这些。

    涉及到的类型和知识点：

  • 相关阅读:
    spring复习：（61）自定义CustomAutowireConfigurer
    WRFDA资料同化实践技术应用
    人脸比对CNN设计
    【Python基础入门技能树笔记】数据类型-基本数据类型
    渗透实战靶机3wp
    【计算机网络】传输层协议——TCP(中)
    #循循渐进学51单片机#UART串口通信#not.10
    2023年软件测试之功能测试（完整版）
    学内核之八：Linux内核的smp_processor_id是如何实现的
    Promise的面试题考点
  • 原文地址：https://blog.csdn.net/kenfan1647/article/details/125494201