QML import 使用攻略（1）

爱被打了一巴掌 2022-09-05 00:08 368阅读 0赞

Qt Quick模块提供图形基元类型。只有当QML文档导入QtQuick名称空间时，这些类型才可用。  
导入格式如下:

import QtQuick 2.4

但是Qt有很多版本，不同的人使用的Qt版本不一样，那么他们在导入Qt Quick时填写的版本号也要对应上。下图是我查到的Qt版本和QtQuick版本的对应关系表（来自Qt官网）：

![20210815215145110.png][]

当然这里的版本有点新，早于Qt5.7版本的没有相关的信息。不过没关系，有很多方法可以找到的，下面将会介绍。

我们可以打开Qt的帮助手册，也就是Qt助手，如下图：

![20210815215851906.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1][]

我们在左边选择QML Types后可以看到如下内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2][]

上面这段话的意思是：

Qt Quick包含几个子模块，这些子模块包含额外的类型。

*  XML List Model - 包含从XML数据创建模型的类型
 *  Local Storage - 一个子模块，包含用于SQLite数据库的JavaScript接口
 *  Particles - 为QML应用程序提供一个粒子系统
 *  Window - 包含用于创建顶级窗口和访问屏幕信息的类型
 *  Dialogs - 包含用于创建和与系统对话框交互的类型
 *  Controls - 提供一组可重用的UI组件
 *  Layouts - 包含用于在用户界面中排列项目的类型
 *  Tests - 用于测试QML应用程序的类型

上面绿色标识的单词都是连接，随便点一个，可以看到这个子模块的详细介绍，在介绍页面就有“**导入声明**”，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 5][]

在刚才的页面翻到顶部，还可以看到QtQuick的版本，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 6][]

下面展示一下 Qt Quick Controls部分包含的控件类型列表（可直接点击链接跳转到详情介绍页面）：

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-abstractbutton.html" rel="nofollow">AbstractButton</a> </td> 
 <td> Abstract base type providing functionality common to buttons </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-action.html" rel="nofollow">Action</a> </td> 
 <td> Abstract user interface action </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-actiongroup.html" rel="nofollow">ActionGroup</a> </td> 
 <td> Groups actions together </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-applicationwindow.html" rel="nofollow">ApplicationWindow</a> </td> 
 <td> Styled top-level window with support for a header and footer </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-busyindicator.html" rel="nofollow">BusyIndicator</a> </td> 
 <td> Indicates background activity, for example, while content is being loaded </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-button.html" rel="nofollow">Button</a> </td> 
 <td> Push-button that can be clicked to perform a command or answer a question </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-buttongroup.html" rel="nofollow">ButtonGroup</a> </td> 
 <td> Mutually-exclusive group of checkable buttons </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-checkbox.html" rel="nofollow">CheckBox</a> </td> 
 <td> Check button that can be toggled on or off </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-checkdelegate.html" rel="nofollow">CheckDelegate</a> </td> 
 <td> Item delegate with a check indicator that can be toggled on or off </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-combobox.html" rel="nofollow">ComboBox</a> </td> 
 <td> Combined button and popup list for selecting options </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-container.html" rel="nofollow">Container</a> </td> 
 <td> Abstract base type providing functionality common to containers </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-control.html" rel="nofollow">Control</a> </td> 
 <td> Abstract base type providing functionality common to all controls </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-delaybutton.html" rel="nofollow">DelayButton</a> </td> 
 <td> Check button that triggers when held down long enough </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-dial.html" rel="nofollow">Dial</a> </td> 
 <td> Circular dial that is rotated to set a value </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-dialog.html" rel="nofollow">Dialog</a> </td> 
 <td> Popup dialog with standard buttons and a title, used for short-term interaction with the user </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-dialogbuttonbox.html" rel="nofollow">DialogButtonBox</a> </td> 
 <td> A button box used in dialogs </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-drawer.html" rel="nofollow">Drawer</a> </td> 
 <td> Side panel that can be opened and closed using a swipe gesture </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-frame.html" rel="nofollow">Frame</a> </td> 
 <td> Visual frame for a logical group of controls </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-groupbox.html" rel="nofollow">GroupBox</a> </td> 
 <td> Visual frame and title for a logical group of controls </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-horizontalheaderview.html" rel="nofollow">HorizontalHeaderView</a> </td> 
 <td> Provides a horizontal header view to accompany a TableView </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-itemdelegate.html" rel="nofollow">ItemDelegate</a> </td> 
 <td> Basic item delegate that can be used in various views and controls </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-label.html" rel="nofollow">Label</a> </td> 
 <td> Styled text label with inherited font </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-menu.html" rel="nofollow">Menu</a> </td> 
 <td> Popup that can be used as a context menu or popup menu </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-menubar.html" rel="nofollow">MenuBar</a> </td> 
 <td> Provides a window menu bar </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-menubaritem.html" rel="nofollow">MenuBarItem</a> </td> 
 <td> Presents a drop-down menu within a MenuBar </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-menuitem.html" rel="nofollow">MenuItem</a> </td> 
 <td> Presents an item within a Menu </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-menuseparator.html" rel="nofollow">MenuSeparator</a> </td> 
 <td> Separates a group of items in a menu from adjacent items </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-overlay.html" rel="nofollow">Overlay</a> </td> 
 <td> A window overlay for popups </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-page.html" rel="nofollow">Page</a> </td> 
 <td> Styled page control with support for a header and footer </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-pageindicator.html" rel="nofollow">PageIndicator</a> </td> 
 <td> Indicates the currently active page </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-pane.html" rel="nofollow">Pane</a> </td> 
 <td> Provides a background matching with the application style and theme </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-popup.html" rel="nofollow">Popup</a> </td> 
 <td> Base type of popup-like user interface controls </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-progressbar.html" rel="nofollow">ProgressBar</a> </td> 
 <td> Indicates the progress of an operation </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-radiobutton.html" rel="nofollow">RadioButton</a> </td> 
 <td> Exclusive radio button that can be toggled on or off </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-radiodelegate.html" rel="nofollow">RadioDelegate</a> </td> 
 <td> Exclusive item delegate with a radio indicator that can be toggled on or off </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-rangeslider.html" rel="nofollow">RangeSlider</a> </td> 
 <td> Used to select a range of values by sliding two handles along a track </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-roundbutton.html" rel="nofollow">RoundButton</a> </td> 
 <td> A push-button control with rounded corners that can be clicked by the user </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-scrollbar.html" rel="nofollow">ScrollBar</a> </td> 
 <td> Vertical or horizontal interactive scroll bar </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-scrollindicator.html" rel="nofollow">ScrollIndicator</a> </td> 
 <td> Vertical or horizontal non-interactive scroll indicator </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-scrollview.html" rel="nofollow">ScrollView</a> </td> 
 <td> Scrollable view </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-slider.html" rel="nofollow">Slider</a> </td> 
 <td> Used to select a value by sliding a handle along a track </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-spinbox.html" rel="nofollow">SpinBox</a> </td> 
 <td> Allows the user to select from a set of preset values </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-splithandle.html" rel="nofollow">SplitHandle</a> </td> 
 <td> Provides attached properties for SplitView handles </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-splitview.html" rel="nofollow">SplitView</a> </td> 
 <td> Lays out items with a draggable splitter between each item </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-stackview.html" rel="nofollow">StackView</a> </td> 
 <td> Provides a stack-based navigation model </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-swipedelegate.html" rel="nofollow">SwipeDelegate</a> </td> 
 <td> Swipable item delegate </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-swipeview.html" rel="nofollow">SwipeView</a> </td> 
 <td> Enables the user to navigate pages by swiping sideways </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-switch.html" rel="nofollow">Switch</a> </td> 
 <td> Button that can be toggled on or off </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-switchdelegate.html" rel="nofollow">SwitchDelegate</a> </td> 
 <td> Item delegate with a switch indicator that can be toggled on or off </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-tabbar.html" rel="nofollow">TabBar</a> </td> 
 <td> Allows the user to switch between different views or subtasks </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-tabbutton.html" rel="nofollow">TabButton</a> </td> 
 <td> Button with a look suitable for a TabBar </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-textarea.html" rel="nofollow">TextArea</a> </td> 
 <td> Multi-line text input area </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-textfield.html" rel="nofollow">TextField</a> </td> 
 <td> Single-line text input field </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-toolbar.html" rel="nofollow">ToolBar</a> </td> 
 <td> Container for context-sensitive controls </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-toolbutton.html" rel="nofollow">ToolButton</a> </td> 
 <td> Button with a look suitable for a ToolBar </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-toolseparator.html" rel="nofollow">ToolSeparator</a> </td> 
 <td> Separates a group of items in a toolbar from adjacent items </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-tooltip.html" rel="nofollow">ToolTip</a> </td> 
 <td> Provides tool tips for any control </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-tumbler.html" rel="nofollow">Tumbler</a> </td> 
 <td> Spinnable wheel of items that can be selected </td> 
 </tr> 
 <tr> 
 <td> <a href="https://doc.qt.io/qt-6/qml-qtquick-controls2-verticalheaderview.html" rel="nofollow">VerticalHeaderView</a> </td> 
 <td> Provides a vertical header view to accompany a TableView </td> 
 </tr> 
 </tbody> 
</table>

[20210815215145110.png]: /images/20220829/3a5d4ae84af64ee59a013dd788d5827a.png
[20210815215851906.png]: /images/20220829/ccf38fc4a8004962801290cd7d6a48c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70]: /images/20220829/da1fdfdd3b2c4af79a08ed4f1e7216bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1]: /images/20220829/1dade23858bc4836b0508a163d44388e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2]: /images/20220829/98ae7f23f4be4c7ea96f043e671cdaef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3]: /images/20220829/005cd5bdff8b4104a6c9ca14d4bf9a79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 4]: /images/20220829/8e9d55aaee16443e9cde576ee46b6b26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 5]: /images/20220829/c8863b360abd42b39b83233e41d72a3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 6]: /images/20220829/12254a39d18e40df92e4018fc818c5e9.png