1, Qt Quick Controls Basics
QT5.1 released a new module of Qt Quick: Qt Quick Controls. Qt Quick Controls module provides a large number of reusable components similar to Qt Widgets module.
In order to develop programs based on Qt Quick Controls, you need to create an application of Qt Quick Application type. When selecting component sets, pay attention to Qt Quick Controls.
2, Qt Quick Controls component
Qt Quick Controls provides a variety of components.
1. Application window
An application window is a component that describes the basic window properties of an application.
| ApplicationWindow | Corresponding to QMainWindow, the top-level application window is provided |
| MenuBar | Corresponding to QMenuBar, the horizontal menu bar at the top of the window is provided |
| StatusBar | Corresponding to QStatusBar, the status bar is provided |
| ToolBar | Corresponding to QToolBar, toolbar is provided, and toolbuttons and other components can be added |
| Action | Corresponding to QAction, it provides abstract user interface actions that can be bound to navigation and view |
2. Navigation and view
It is convenient for users to manage and display other components in one layout
| ScrollView | Corresponding to QScrollView, rolling view is provided |
| SplitView | Corresponding to QSplitter, it provides a draggable split view layout |
| StackView | Corresponding to QStackedWidget, stack based cascading layout is provided |
| TabView | Corresponding to QTabView, stack based cascading layout with labels is provided |
| TableView | Corresponding to QTableView, a table with scroll bar, style and header is provided |
| TreeView | Corresponding to QTreeView, a table with scroll bar, style and header is provided |
3. Controls
Control is used to represent or accept user input
| BusyIndicator | Provide busy and other schematic components |
| Button | Corresponding to QPushButton, provide button components |
| CheckBox | Corresponding to QCheckBox, a check box is provided |
| ComboBox | Corresponding to QComboBox, a drop-down box is provided |
| GroupBox | Corresponding to QGroupBox, provide container with title and border |
| Label | Corresponding to QLabel, provide label components |
| ProgressBar | Corresponding to qpprogressbar, provide progress bar component |
| RadioButton | Corresponding to QRadioButton, radio buttons are provided |
| Slider | Corresponding to QSlider, sliding components are provided |
| SpinBox | Corresponding to QSpinBox, fine tuning components are provided |
| Switch | Provide switch assembly similar to radio button |
| TextArea | Corresponding to QTextEdit, a rich text edit box that can display multiple lines of text is provided |
| TextField | Corresponding to QTextLine, a plain text edit box is provided to display single line text |
| ToolButton | Corresponding to QToolButton, the tool button displayed on the toolbar is provided |
| ExclusiveGroup | Provide mutual exclusion |
4. Menu
Components for building menus
| Menu | Corresponding to QMenu, menus, submenus, pop-up menus, etc. are provided |
| MenuSeparator | Provide menu separator |
| MenuItem | Provides menu items added to the menu bar or menu |
| StatusBar | Corresponding to QStatusBar, the status bar is provided |
| ToolBar | Corresponding to QToolBar, toolbar is provided, and toolbuttons and other components can be added |
3, Qt Quick Controls application instance
Main.qml file:
import QtQuick 2.6
import QtQuick.Controls 1.4
ApplicationWindow
{
title: qsTr("NotePad")
width: 640
height: 480
Action
{
id: exitAction
text: qsTr("E&xit")
onTriggered: Qt.quit()
}
Action
{
id: newAction
text: qsTr("New")
iconSource: "images/new.png"
onTriggered:
{
textArea.text = "";
}
}
Action
{
id: cutAction
text: qsTr("Cut")
iconSource: "images/cut.png"
onTriggered: textArea.cut()
}
Action
{
id: copyAction
text: qsTr("Copy")
iconSource: "images/copy.png"
onTriggered: textArea.copy()
}
Action
{
id: pasteAction
text: qsTr("Paste")
iconSource: "images/paste.png"
onTriggered: textArea.paste()
}
Action
{
id: selectAllAction
text: qsTr("Select All")
onTriggered: textArea.selectAll()
}
menuBar: MenuBar
{
Menu
{
title: qsTr("&File")
MenuItem { action: newAction }
MenuItem { action: exitAction }
}
Menu
{
title: qsTr("&Edit")
MenuItem { action: cutAction }
MenuItem { action: copyAction }
MenuItem { action: pasteAction }
MenuSeparator {}
MenuItem { action: selectAllAction }
}
}
toolBar: ToolBar
{
Row
{
anchors.fill: parent
ToolButton { action: newAction }
ToolButton { action: cutAction }
ToolButton { action: copyAction }
ToolButton { action: pasteAction }
}
}
TextArea
{
id: textArea
anchors.fill: parent
}
}ApplicationWindow is the main window of an application and provides many predefined functions, such as menus, toolbars, etc. The qsTr() function is similar to the tr() function and is used for internationalization.
Menubar and toolBar are both properties provided by ApplicationWindow. Menubar is of type menubar. Menubar has a hierarchical structure, which is realized through the nesting of menus. Each Menu item is implemented with MenuItem; The separator between Menu items uses the MenuSeparator control.
The toolbar is of type Item, and the toolbar control is usually used. The toolbar does not provide a layout by default. You must set a layout for it. A Row is directly added as the layout of the horizontal toolbar. The toolbar should fill the parent window horizontally, and set the anchor point as anchors fill: parent. Although the toolbar is set to fill the entire parent window, if the toolbar has only one child element (such as Row here), the height of the toolbar will be set to the implicitHeight attribute of the child element, which is very useful for use in combination with layout.
Each MenuItem and ToolButton adds an action attribute.
Use the iconSource property to specify the icon. The icon can only be located in the file system, and the icon in the resource file cannot be loaded (if the whole QML document is placed in the resource file, the icon in the resource file can be loaded directly). When directly using the "images/new.png" path, note that QML is interpreted at runtime, and this path is relative to the QML file. The icon needs to be placed with main The QML file is in the images directory under the same directory.
The ontrigged attribute is a signal processing function that can be followed by JavaScript statements. If there are multiple statements, braces can be used, such as ontrigged of newAction. QML components can send signals. Different from C + +, the signals of QML components do not need special connection statements, but use the form of "on signal name". If an Action has a signal named triggered, its signal processing function is ontrigged. The limitation of this simple signal slot implementation is that the same signal can only have a signal processing function with a fixed name. Of course, you can also use the connect statement.