Hello Qt-—Qt Quick Controls

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.

Keywords: Qt

Added by arpowers on Sat, 05 Mar 2022 18:29:46 +0200