Einführung in die qml-Grundlagen

Was ist qml

Konzept

Qt的前端语言，可以专注于UI实现，C++实现程序逻辑，实现解耦，便于代码维护。

qml-Codierungsspezifikation

id
属性声明
信号声明
JavaScript函数
对象属性
子对象

Layout-Management

Veranstaltungsmanagement

MouseArea-Komponente

MouseAreaGeerbt vonItem

• acceptedButtonsAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    MouseArea {
    
    
        id: mouseArea
        width: 100
        height: 100
        acceptedButtons: Qt.LeftButton | Qt.RightButton //支持左键和右键
        Rectangle {
    
    
            anchors.fill: parent
            color: "green"
        }
        onClicked: {
    
    
            console.log("onClicked")
        }
        onReleased: {
    
    
            console.log("onReleased")
        }
        onPressed: {
    
    
            var ret = pressedButtons & Qt.LeftButton
            var ret2 = pressedButtons & Qt.RightButton
            console.log(ret ? "left" : ret2 ? "right" : "other")
            console.log("onPressed")
        }
    }
}

• containsMouseAttribut, ContainsPressAttribut

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    MouseArea {
    
    
        id: mouseArea
        width: 100
        height: 100
        acceptedButtons: Qt.LeftButton | Qt.RightButton //支持左键和右键
        hoverEnabled: true    
        cursorShape: Qt.CrossCursor   //十字光标
        Rectangle {
    
    
            anchors.fill: parent
            color: "green"
        }
        onClicked: {
    
    
            console.log("onClicked")
        }

        onHoveredChanged: {
    
    
            console.log("onHoveredChanged")
        }

        onContainsMouseChanged: {
    
    
            console.log("onContainsMouseChanged", containsMouse)
        }

        onContainsPressChanged: {
    
    
            console.log("onContainsPressed", containsPress)
        }
    }
}

• dragAttribute

Ziehen Sie das Steuerelement, um es zu verschieben

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        id: container
        width: 600; height: 200

        Rectangle {
    
    
            id: rect
            width: 50; height: 50
            color: "red"
            opacity: (600.0 - rect.x) / 600

            MouseArea {
    
    
                anchors.fill: parent
                drag.target: rect
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: container.width - rect.width
            }
        }
    }
}

bewegt sich zusammen mit den untergeordneten Steuerelementen, gesteuert durch drag.filterChildren

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        width: 480
        height: 320
        Rectangle {
    
    
            x: 30; y: 30
            width: 300; height: 240
            color: "lightsteelblue"

            MouseArea {
    
    
                anchors.fill: parent
                drag.target: parent;
                drag.axis: "XAxis"
                drag.minimumX: 30
                drag.maximumX: 150
                drag.filterChildren: true

                Rectangle {
    
    
                    color: "yellow"
                    x: 50; y : 50
                    width: 100; height: 100
                    MouseArea {
    
    
                        anchors.fill: parent
                        onClicked: console.log("Clicked")
                    }
                }
            }
        }
    }
}

Tastaturereignisse und Fokusbereich

Timer

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Item {
    
    
        Timer {
    
    
            interval: 1000
            running: true
            repeat: true
            onTriggered: time.text = Date().toString()
        }

        Text {
    
    
            id: time
        }
    }
}

Qt-Schnellsteuerung

Fenster

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
     //root控件，父窗口是主界面
    width: 640
    height: 480
    visible: true

    //相对于父控件的偏移量
    x: 100
    y:100


    minimumWidth: 400   //最小宽度
    minimumHeight: 300  //最小高度
    maximumWidth: 600   //最大宽度
    maximumHeight: 450  //最大高度

    opacity: 0.9 //0-1，窗口透明度

    onWidthChanged: {
    
    
        console.log("width: ", width)
    }

    Button {
    
    
        id: btn1
        width: 80
        height: 80
        focus: true
        objectName: "btn1"
        background: Rectangle {
    
    
            border.color: btn1.focus ? "blue" : "red"
        }
        onClicked: {
    
    
            console.log("btn1 clicked")
        }
        Keys.onRightPressed: {
    
    
            btn2.focus = true
        }
    }

    Button {
    
    
        id: btn2
        x: 120
        width: 80
        height: 80
        objectName: "btn2"
        background: Rectangle {
    
    
            border.color: btn2.focus ? "blue" : "red"
        }
        onClicked: {
    
    
            console.log("btn2 clicked")
        }
        Keys.onLeftPressed: {
    
    
            btn1.focus = true
        }
    }

    //保存了整个窗口中当前获取焦点的控件
    onActiveFocusItemChanged: {
    
    
        console.log("active focus item changed", activeFocusItem, activeFocusItem.objectName)
    }

    title: qsTr("my qml")
}

Artikel und Rechteck

Rectangle-Steuerung: Es hat nicht viele Eigenschaften, aber es erbt von Item, sodass viele Eigenschaften von Item verwendet werden können

• focusAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        x: 100
        y: 100
        z: 1
        width : 100
        height: 50
        color: "red"
        focus: false  //当前控件可获取焦点

        MouseArea {
    
    
            anchors.fill: parent
            onClicked: {
    
    
                console.log("on clicked")
            }
        }

        Keys.onReturnPressed: {
    
    
            console.log("on return pressed")
        }

    }

    Rectangle {
    
    
        x: 120
        y: 120
        width : 100
        height: 50
        color: "green"
    }
}

• anchorAttribute

1. anchors.fill$\to$Erfüllung des Vater-Kontingents

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        id: rect1
        anchors.fill: parent
        color: "red"
    }

    Rectangle {
    
    
        id: rect2
        width : 100
        height: 50
        color: "green"
    }
}

2. anchors.left、anchors.leftMargin、anchors.top、anchors.topMargin

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        id: rect1
        width : 100
        height: 50
        color: "red"
    }

    Rectangle {
    
    
        id: rect2
        width : 100
        height: 50
        anchors.left: rect1.right
        anchors.leftMargin: 20
        color: "green"
    }

    Rectangle {
    
    
        id: rect3
        width : 100
        height: 50
        anchors.top: rect1.bottom
        anchors.topMargin: 20
        color: "blue"
    }
}

3. anchors.centerIn、anchors.horizontalCenter、anchors.verticalCenter

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        id: rect1
        width : 100
        height: 50
        color: "red"
        //anchors.centerIn: parent
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

4.border

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        id: rect1
        x: 320
        y: 240
        width : 100
        height: 100
        color: "red"

        border.color: "blue"
        border.width: 3

		radius: 5
    }
}

5.gradient

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        id: rect1
        x: 320
        y: 240
        width : 100
        height: 100
        color: "red"

        gradient: Gradient {
    
    
                 GradientStop {
    
     position: 0.0; color: "lightsteelblue" }
                 GradientStop {
    
     position: 1.0; color: "blue" }
             }
    }
}

Rechteckiger benutzerdefinierter Rand

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    MyRectangle {
    
    
        x: 200
        y: 200

        myTop: 10
        myBottom: 10
    }
}

MyRectangle.qml

import QtQuick 2.15

Rectangle {
    
    
    id: borderRect
    property int myTop: 0
    property int myBottom: 0
    width: 200
    height: 100
    color: "red"
    Rectangle {
    
    
        id: innerRect
        color: "blue"
        anchors.fill: parent
        anchors.topMargin: myTop
        anchors.bottomMargin: myBottom
        anchors.leftMargin: 5
        anchors.rightMargin: 5
    }
}

Zustände与Übergänge

ItemZwei wichtige Attribute von : states und transitions

Zustandsmaschinestates

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
         id: root
         width: 100; height: 100
         color: "blue"

         state: "normal"

         states: [
             State {
    
    
                 name: "red_color"
                 PropertyChanges {
    
     target: root; color: "red"; width: 200 }
             },
             State {
    
    
                 name: "blue_color"
                 PropertyChanges {
    
     target: root; color: "blue"; height: 200 }
             },
             State {
    
    
                 name: "normal"
                 PropertyChanges {
    
     target: root; color: "black"; height: 200; width: 200 }
             }
         ]

         MouseArea {
    
    
             anchors.fill: parent
             onPressed: {
    
    
                 root.state = "red_color"
             }
             onReleased: {
    
    
                 root.state = "blue_color"
             }
         }
     }
}

transitions

1. Die erste Methode:Direkte Attributanimation

Klicken Sie auf das Steuerelement, um einen Verlaufseffekt zu erzeugen

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
         id: flashingblob
         width: 75; height: 75
         color: "blue"
         opacity: 1.0

         MouseArea {
    
    
             anchors.fill: parent
             onClicked: {
    
    
                 animateColor.start()
                 animateOpacity.start()
             }
         }

         PropertyAnimation {
    
    
             id: animateColor
             target: flashingblob
             properties: "color"
             to: "green"
             duration: 1000   //持续时间（ms）
         }

         NumberAnimation {
    
    
             id: animateOpacity
             target: flashingblob
             properties: "opacity"
             from: 0.5
             to: 1.0
             duration: 1000   //持续时间（ms）
        }
     }
}

Durch Klicken auf das Steuerelement wird ein Dehnungseffekt erzeugt

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
         id: flashingblob
         width: 75; height: 75
         color: "blue"
         opacity: 1.0

         MouseArea {
    
    
             anchors.fill: parent
             onClicked: {
    
    
                 animateOpacity.start()
             }
         }

         NumberAnimation {
    
    
             id: animateOpacity
             target: flashingblob
             properties: "width"
             from: 75
             to: 150
             duration: 3000   //持续时间（ms）
        }
     }
}

2. Zweite Methode:Vordefinierte Ziele und Attribute verwenden

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        id: rect
        width: 100; height: 100
        color: "red"

        PropertyAnimation on x {
    
     //修改当前控件的位置
            to: 100
            duration: 1000
        }

        PropertyAnimation on y {
    
    
            to: 100
            duration: 1000
        }
    }
}

Sie können auch die Ausführungsreihenfolge von Animationen festlegen

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        width: 100; height: 100
        color: "red"

        SequentialAnimation on color {
    
    
            ColorAnimation {
    
     to: "yellow"; duration: 1000 }
            ColorAnimation {
    
     to: "blue"; duration: 1000 }
        }
    }
}

3. Der dritte Typ: Animieren, wenn sich der Status ändert

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
         width: 75; height: 75
         id: button
         state: "RELEASED"

         MouseArea {
    
    
             anchors.fill: parent
             onPressed: button.state = "PRESSED"
             onReleased: button.state = "RELEASED"
         }

         states: [
             State {
    
    
                 name: "PRESSED"
                 PropertyChanges {
    
     target: button; color: "lightblue"}
             },
             State {
    
    
                 name: "RELEASED"
                 PropertyChanges {
    
     target: button; color: "lightsteelblue"}
             }
         ]

         transitions: [
             Transition {
    
    
                 from: "PRESSED"
                 to: "RELEASED"
                 ColorAnimation {
    
     target: button; duration: 1000 }
             },
             Transition {
    
    
                 from: "RELEASED"
                 to: "PRESSED"
                 ColorAnimation {
    
     target: button; duration: 1000 }
             }
         ]
     }
}

4. Typ 4: Buchen Sie gutes Benehmen

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        width: 75; height: 75; radius: width
        id: ball
        color: "salmon"

        MouseArea {
    
    
            anchors.fill: parent
            onClicked: {
    
    
                ball.x += 50
                ball.y += 50
            }
        }

        Behavior on x {
    
    
            NumberAnimation {
    
    
                id: bouncebehavior
                easing {
    
    
                    type: Easing.OutElastic
                    amplitude: 1.0
                    period: 0.5
                }
            }
        }

        Behavior on y {
    
    
            animation: bouncebehavior
        }

        Behavior {
    
    
            ColorAnimation {
    
     target: ball; duration: 100 }
        }
    }
}

Komponente und Lader

qml中window Komponente ist auch eineComponent

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Component.onCompleted: {
    
    
        console.log("onCompleted", width, height, color)
    }

    Component.onDestruction: {
    
    
        console.log("onDestruction")
    }
}

Component wird in Verbindung mit Loader zum Laden des Steuerelements verwendet. Wenn Sie das Steuerelement nach dem Laden ändern möchten, können Sie das Attribut loader.item verwenden um die Steuerung zu ändern

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
    
    
        id: btn
        x: 200; y:0
        width: 50; height: 50
        onClicked: {
    
    
            //loader.sourceComponent = null
            loader.item.width = 50
            loader.item.height = 50
            loader.item.color = "blue"
            console.log("onClicked")
        }
    }

    Component {
    
    
        id: com
        Rectangle {
    
    
            width: 100; height: 100
            color: "red"
        }
    }

    Loader {
    
    
        id: loader
        asynchronous: true     //异步加载
        sourceComponent: com
        source: "./MyRectangle.qml"
        onStatusChanged: {
    
    
            console.log("status: ", loader.status)
        }
    }
}

Bilder laden

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Component {
    
    
        id: com
        Image {
    
    
            id: img
            source: "./asset/image.png"
        }
    }

    Loader {
    
    
        id: loader
        asynchronous: true
        sourceComponent: com
        source: "./MyRectangle.qml"
        onStatusChanged: {
    
    
            console.log("status: ", loader.status)
        }
    }
}

Animation laden

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Component {
    
    
        id: com
        AnimatedImage {
    
    
            id: img
            source: "/asset/test.gif"
            width: 100
            height: 100
        }
    }

    Loader {
    
    
        id: loader
        asynchronous: true
        sourceComponent: com
        source: "./MyRectangle.qml"
        onStatusChanged: {
    
    
            console.log("status: ", loader.status)
        }
    }
}

Schaltflächenkomponente

Button-Steuerelemente erben von AbstractButton, AbstractButton erbt von Control, Control erbt von Item

• autoExclusiveAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
    
    
        id: btn1
        width: 50
        height: 50
        checkable: true
        autoExclusive: true
    }

    Button {
    
    
        id: btn2
        x: 60
        width: 50
        height: 50
        checkable: true
        autoExclusive: true
    }

    Button {
    
    
        id: btn3
        x: 120
        width: 50
        height: 50
        checkable: true
        autoExclusive: true
    }
}

Nur eine Schaltfläche befindet sich gleichzeitig im checkedZustand

• autoRepeat、autoRepeatDelay、autoRepeatInterval

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
    
    
        id: btn1
        width: 50
        height: 50

        autoRepeat: true
        autoRepeatDelay: 3000 //控制第一次重复触发的时间
        autoRepeatInterval: 1000 //重复触发的时间间隔

        onClicked: {
    
    
            console.log("onClicked")
        }
        onReleased: {
    
    
            console.log("onReleased")
        }
        onPressed: {
    
    
            console.log("onPressed")
        }
    }
}

• iconAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
    
    
        id: btn1
        width: 50
        height: 50

        icon.source: "/asset/8666542_save_icon.png"
        icon.color: "black"
    }
}

• textAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
    
    
        id: btn1
        width: 50
        height: 20

        text: "btn"
    }
}

• backgroundAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
    
    
        id: btn1
        width: 50
        height: 20

        background: Rectangle {
    
    
            anchors.fill: btn
            color: "blue"
        }
    }
}

Nutzung von Eigentum

MyRectangle.qml

import QtQuick 2.15

Rectangle {
    
    
    id: borderRect
    width: 200
    height: 200
    color: "red"

    property int myTop: 0
    property int myBottom: 0
    property real myReal: 0.0
    property string myString: "black"
    property color myColor: "red"
    property url myUrl: "/asset/test.jpg"

    required property Component myCom    //外界一定设置才行
    property Rectangle myRect

    property var myVar: "0.0"
    property list<Rectangle> myList

    readonly property int rectWidth: width //外界不可修改
    property alias newInnerRect: innerRect //给子控件取别名

    Rectangle {
    
    
        id: innerRect
        Loader {
    
    
            id: loader
            sourceComponent: myCom
        }
        color: "blue"
        anchors.fill: parent
        anchors.topMargin: myTop
        anchors.bottomMargin: myBottom
        anchors.leftMargin: 5
        anchors.rightMargin: 5
    }
}

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Component {
    
    
        id: com
        Button {
    
    
            width: 50
            height: 50
        }
    }

    MyRectangle {
    
    
        id: rect
        myCom: com
        Component.onCompleted: {
    
    
            newInnerRect.color = "green"
            console.log(rectWidth)
        }
    }
}

CheckBox-Steuerelement

CheckBoxGeerbt vonAbstractButton

• tristate Attribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Column {
    
    
        CheckBox {
    
    
            checked: true
            tristate: true
            text: qsTr("First")
            onCheckStateChanged: {
    
    
                console.log("checkState: ", checkState)
            }
        }
        CheckBox {
    
    
            text: qsTr("Second")
        }
        CheckBox {
    
    
            checked: true
            text: qsTr("Third")
        }
    }
}

Das checkBox-Steuerelement kann das autoExclusive-Attribut nicht zum Implementieren eines Optionsfelds verwenden, es kann jedoch mit einer ButtonGroup implementiert werden.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    ButtonGroup {
    
    
        id: childGroup
        exclusive: true
        buttons: column.children
    }

    Column {
    
    
        id: column
        CheckBox {
    
    
            checked: true
            text: qsTr("First")

        }
        CheckBox {
    
    
            text: qsTr("Second")
        }
        CheckBox {
    
    
            checked: true
            text: qsTr("Third")
        }
    }
}

Das folgende Beispiel zeigt, wie der kombinierte Prüfstatus eines untergeordneten Kontrollkästchens an den Prüfstatus des übergeordneten Kontrollkästchens gebunden wird:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Column {
    
    
        ButtonGroup {
    
    
            id: childGroup
            exclusive: false
            checkState: parentBox.checkState
        }

        CheckBox {
    
    
            id: parentBox
            text: qsTr("Parent")
            checkState: childGroup.checkState
        }

        CheckBox {
    
    
            checked: true
            text: qsTr("Child 1")
            leftPadding: indicator.width
            ButtonGroup.group: childGroup
        }

        CheckBox {
    
    
            text: qsTr("Child 2")
            leftPadding: indicator.width
            ButtonGroup.group: childGroup
        }
    }
}

• nextCheckState

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    CheckBox {
    
    
        tristate: true

        nextCheckState: function() {
    
    
            if (checkState === Qt.Checked)
                return Qt.Unchecked
            else
                return Qt.Checked

        }
    }
}

DelayButton-Steuerelement

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    DelayButton {
    
    
        width: 150
        height: 50
        delay: 3000
        onPressedChanged: {
    
    
            console.log(progress)
        }
    }
}

RadioButton-Steuerelement

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Column {
    
    
        RadioButton {
    
    
            checked: true
            text: qsTr("First")
        }
        RadioButton {
    
    
            text: qsTr("Second")
        }
        RadioButton {
    
    
            text: qsTr("Third")
        }
    }
}

Die RadioButton-Steuerung verfügt über automatische Exklusivität

Schaltersteuerung

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    ButtonGroup {
    
    
        id: btngrp
        exclusive: true
        buttons: column.children
    }

    Column {
    
    
         id: column
         Switch {
    
    
             text: qsTr("Wi-Fi")
             onPositionChanged: {
    
    
                 console.log("pos: ",position)
             }
             onVisualPositionChanged: {
    
    
                 console.log("vis pos: ", visualPosition)
             }
         }
         Switch {
    
    
             text: qsTr("Bluetooth")
         }
     }
}

TabButton-Steuerelement

Wird im Allgemeinen als Taste zum Umschalten von Schnittstellen verwendet

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    TabBar {
    
    
         TabButton {
    
    
             text: qsTr("Home")
         }
         TabButton {
    
    
             text: qsTr("Discover")
             //width: 80
         }
         TabButton {
    
    
             text: qsTr("Activity")
         }
     }
}

Knopfverlängerung

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
    
    
        id: control
        text: qsTr("Button")
        contentItem: Rectangle {
    
    
            color: "transparent" //默认颜色是白色
            Text {
    
    
                text: control.text
                font.pixelSize: 18
                font.bold: true
                font.italic: true
                x: 28; y: 5
            }
            Image {
    
    
                id: img
                source: "/asset/rocket.png"
                width: 25
                height: 25
            }
        }
    }
}

Textkontrolle

• elideAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        width: 80
        height: 30
        anchors.centerIn: parent
        border.color: "red"
        Text {
    
    
            id: txt
            elide: Text.ElideMiddle
            anchors.fill: parent
            text: qsTr("https://example.com/sjdflk/shdlsj/sdflksjf")
        }
    }
}

• fontAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")


    Text {
    
    
        id: txt
        text: qsTr("https://example.com\nhttps://\nsss.com")
        font.bold: true //粗体
        font.family: "Courier New"  //字体
        font.italic: true  //斜体
        font.letterSpacing: 3 //字体间距离
        //font.pixelSize: 36  //字体 像素为单位
        font.pointSize: 20  //字体 磅
        font.underline: true
        lineHeight: 2 //行间距

        Component.onCompleted: {
    
    
            console.log("lineCount: ", lineCount)
        }
    }
}

• textFormatAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")


    Column {
    
    
        Text {
    
    
            font.pointSize: 24
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
    
    
            font.pointSize: 24
            textFormat: Text.RichText
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
    
    
            font.pointSize: 24
            textFormat: Text.PlainText
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
    
    
            font.pointSize: 24
            textFormat: Text.MarkdownText
            text: "**Hello** *World!*"
        }
    }
}

• linkActivatedSignal

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")


    Text {
    
    
            textFormat: Text.RichText
            text: "See the <a href=\"http://qt-project.org\">Qt Project website</a>."

            MouseArea {
    
    
                anchors.fill:  parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                
                onClicked: {
    
    
                    
                }
            }
 
            //将被MouseArea拦截失效
            onLinkActivated: {
    
    
                console.log(link + " link activated")
            }

            onLinkHovered: {
    
    
                console.log("hover", link)
            }

            onHoveredLinkChanged: {
    
    
                console.log("hover link changed: ", hoveredLink)
            }
    }
}

Popup und Overlay

Wenn Popup ein untergeordnetes Steuerelement ist und „visible“ auf „true“ gesetzt ist, kann es weiterhin angezeigt werden.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        width: 100; height: 100
        color: "red"
        visible: false

        Popup {
    
    
            width: 50; height: 50
            visible: true
        }
    }
}

Eine Ausnahme bildet die Z-Reihenfolge des Popups

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
    
    
        width: 100; height: 100
        color: "red"
        visible: true
    }

    //Popup的z顺序为例外
    Popup {
    
    
        width: 50; height: 50
        x: 20; y: 20
        //color: "blue"
        visible: true
        z: -1
    }
}

• closePolicyEigenschaften: Fensterschließlogik

MyPopup.qml

import QtQuick 2.15
import QtQuick.Controls 2.5

Popup {
    
    
    id: popup
    x: 100
    y: 100
    width: 200
    height: 300
    visible: true
    modal: true
    closePolicy: Popup.NoAutoClose
}

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Popup {
    
    
        width: 50; height: 50
        x: 20; y: 20
        //color: "blue"
        visible: true
        z: -1
    }

    MyPopup {
    
    

    }
}

Auf diese Weise führt das Drücken der Esc-Taste oder das Drücken in der Nähe des Popup-Steuerelements nicht dazu, dass das Steuerelement verschwindet.

• modalModale Dialogeigenschaften
• dim: Wird mit Modal verwendet
• enter, exitAttribute

import QtQuick 2.15
import QtQuick.Controls 2.5

Popup {
    
    
    id: popup
    x: 100
    y: 100
    width: 200
    height: 300
    visible: true
    modal: true
    dim: true
    //closePolicy: Popup.NoAutoClose

    enter: Transition {
    
     //打开的时候
             NumberAnimation {
    
     property: "opacity"; from: 0.0; to: 1.0 }
    }

    exit: Transition {
    
     //推出的时候
             NumberAnimation {
    
     property: "opacity"; from: 1.0; to: 0.0 }
    }
}

• contentItemAttribute

import QtQuick 2.15
import QtQuick.Controls 2.5

Popup {
    
    
    id: popup
    x: 100; y: 100
    width: 400; height: 300
    visible: true
    modal: true
    dim: true
    //closePolicy: Popup.NoAutoClose

    enter: Transition {
    
     //打开的时候
             NumberAnimation {
    
     property: "opacity"; from: 0.0; to: 1.0 }
    }

    exit: Transition {
    
     //推出的时候
             NumberAnimation {
    
     property: "opacity"; from: 1.0; to: 0.0 }
    }

    contentItem: Rectangle {
    
    
        anchors.fill: parent
        Text {
    
    
            id: txt
            text: qsTr("Message Box popup")
        }
    }

    Button {
    
    
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 30
        text: "cancel"
    }

    Button {
    
    
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 150
        text: "ok"
    }
}

• overlayAttribute

import QtQuick 2.15
import QtQuick.Controls 2.5

Popup {
    
    
    id: popup
    x: 100; y: 100
    width: 400; height: 300
    visible: true
    modal: true
    dim: true
    //closePolicy: Popup.NoAutoClose

    enter: Transition {
    
     //打开的时候
             NumberAnimation {
    
     property: "opacity"; from: 0.0; to: 1.0 }
    }

    exit: Transition {
    
     //推出的时候
             NumberAnimation {
    
     property: "opacity"; from: 1.0; to: 0.0 }
    }

    contentItem: Rectangle {
    
    
        anchors.fill: parent
        Text {
    
    
            id: txt
            text: qsTr("Message Box popup")
        }
    }

    Button {
    
    
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 30
        text: "cancel"
    }

    Button {
    
    
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 150
        text: "ok"
    }

    Overlay.modal: Rectangle {
    
    
        color: "#33000000"
    }

    Overlay.modeless: Rectangle {
    
    
        color: "blue"
    }
}

Reapter

modelAttribute

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Row {
    
    
        Repeater {
    
    
            model: 3 //模型， 数字表示有几个控件
            Rectangle {
    
    
                width: 100; height: 40
                border.width: 1
                color: "yellow"
            }
        }
    }
}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Repeater {
    
    
        model: ["Button", "Rectangle", "MouseArea"]

        Button {
    
    
            y: index * 50
            width: 100; height: 40
            text: modelData
        }
    }
}

Combbox-Steuerung

Combox-Steuerelement erbt vonControl, Control erbt vonItem

MyComboBox.qml

import QtQuick 2.5
import QtQuick.Controls 2.5

ComboBox {
    
    
    editable: true
    model: ListModel {
    
    
        id: model
        ListElement {
    
     text: "Banana" }
        ListElement {
    
     text: "Apple" }
        ListElement {
    
     text: "Coconut" }
    }
    onAccepted: {
    
    
        if (find(editText) === -1)
            model.append({
    
    text: editText})
    }
}

• currentText、currentValue

import QtQuick 2.5
import QtQuick.Controls 2.15

ComboBox {
    
    
    textRole: "text"
    valueRole: "name"
    displayText: currentText + " " + currentValue

    model: [
        {
    
     value: 100, text: qsTr("No modifier"), name: "lindong" },
        {
    
     value: 200, text: qsTr("Shift") , name: "xiaoyan" },
        {
    
     value: 300, text: qsTr("Control"), name: "muchen" }
    ]

    onCurrentTextChanged: {
    
    
        console.log("text: ", currentText)
    }

    onCurrentValueChanged: {
    
    
        console.log("value: ", currentValue)
    }
}

• validator

Diese Eigenschaft enthält den Eingabetextvalidator für das bearbeitbare Kombinationsfeld. Nach dem Festlegen des Validators akzeptiert das Textfeld nur Eingaben, die die Texteigenschaft in einem Zwischenzustand belassen. Die Annahme wird nur signalisiert, wenn der Text beim Drücken der Eingabetaste oder der Eingabetaste in einem akzeptablen Zustand ist.

import QtQuick 2.5
import QtQuick.Controls 2.15

ComboBox {
    
    
    model: 10
    editable: true
//    validator: IntValidator {
    
    
//        top: 9
//        bottom: 0
//    }

    validator: RegExpValidator {
    
    
        regExp: /[0-9A-F]+/
    }

    onAcceptableInputChanged: {
    
      //当前有没有匹配validator验证器
        console.log(acceptableInput)
    }
}

Benutzerdefinierte ComboBox

• indicator

Diese Eigenschaft enthält das Platzierungsindikatorelement.

import QtQuick 2.12
import QtQuick.Controls 2.12

ComboBox {
    
    
    id: control
    model: ["First", "Second", "Third"]

    delegate: ItemDelegate {
    
     //针对model中 每一项的具体绘制
        width: control.width
        contentItem: Text {
    
    
            text: modelData
            color: "red"
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index
    }

    indicator: Canvas {
    
    
        id: canvas
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "2d"

        Connections {
    
    
            target: control
            function onPressedChanged() {
    
     canvas.requestPaint(); }
        }

        onPaint: {
    
    
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
            context.fill();
        }
    }

    contentItem: Text {
    
     //控件显示内容
        leftPadding: 0
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font: control.font
        color: control.pressed ? "red" : "blue"
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
    
      //控件背景
        implicitWidth: 120
        implicitHeight: 40
        border.color: control.pressed ? "#17a81a" : "#21be2b"
        border.width: control.visualFocus ? 2 : 1
        radius: 3
    }

    popup: Popup {
    
      //绘制整个下拉控件
        y: control.height - 1
        width: control.width
        implicitHeight: contentItem.implicitHeight
        padding: 1

        contentItem: ListView {
    
    
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex

            ScrollIndicator.vertical: ScrollIndicator {
    
     }
        }

        background: Rectangle {
    
    
            border.color: "gray"
            radius: 2
        }
    }
}

Modelle und Ansichten

Listenansicht

MyListView.qml

import QtQuick 2.15
import QtQuick.Controls 2.5

ListView {
    
    
    width: 180; height: 200

    model: ['Button', 'Rectangle', "List", "CheckBox"]        //数字， 控制所有数据
    spacing: 10

    delegate: Button {
    
     //控制每一项数据如何绘制
        text: modelData
    }
}

Sie können dazu auch ListModel verwenden

import QtQuick 2.15
import QtQuick.Controls 2.5

ListView {
    
    
    width: 180; height: 200

    model:  ListModel {
    
    
        ListElement {
    
    
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
    
    
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
    
    
            name: "Sam Wise"
            number: "555 0473"
        }
    }//控制所有数据
    spacing: 10

    delegate: Button {
    
     //控制每一项数据如何绘制
        text: name + ": " + number
    }
}

• highlightAttribute

import QtQuick 2.5
import QtQuick.Controls 2.5

ListView {
    
    
    id: list
    width: 180; height: 200

    model:  ListModel {
    
    
        ListElement {
    
    
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
    
    
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
    
    
            name: "Sam Wise"
            number: "555 0473"
        }
    }//控制所有数据
    spacing: 15

    highlight: Rectangle {
    
    
        color: "lightsteelblue"
        //radius: 5
    }

    delegate: Rectangle {
    
     //控制每一项数据如何绘制
        width: 80
        height: 15
        color: "transparent"

        Text {
    
    
            id: txt
            text: name
        }

        MouseArea {
    
    
            anchors.fill: parent
            onClicked: {
    
    
                currentIndex = index
                console.log(index)
            }
        }
    }
}

• headUndfoot

import QtQuick 2.5
import QtQuick.Controls 2.5

Rectangle {
    
    
    width: 400
    height: 200

    border.color: "black"
    anchors.centerIn: parent

    ListView {
    
    
        id: list
        width: 180; height: 200

        model:  ListModel {
    
    
            ListElement {
    
    
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
    
    
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
    
    
                name: "Sam Wise"
                number: "555 0473"
            }
        }//控制所有数据

        header: Rectangle {
    
    
            width: 180
            height: 20

            color: "red"
        }

        footer: Rectangle {
    
    
            width: 180
            height: 20

            color: "blue"
        }

        spacing: 15

        highlight: Rectangle {
    
    
            color: "lightsteelblue"
            //radius: 5
        }

        delegate: Rectangle {
    
     //控制每一项数据如何绘制
            width: 80
            height: 15
            color: "transparent"

            Text {
    
    
                id: txt
                text: name
            }

            MouseArea {
    
    
                anchors.fill: parent
                onClicked: {
    
    
                    list.currentIndex = index
                    console.log(index)
                }
            }
        }
    }
}

• section

import QtQuick 2.5
import QtQuick.Controls 2.5

Rectangle {
    
    
    width: 400
    height: 200

    border.color: "black"
    anchors.centerIn: parent

    ListView {
    
    
        id: list
        width: 180; height: 200

        Component {
    
    
            id: sectionHeading
            Rectangle {
    
    
                width: 400
                height: childrenRect.height
                color: "blue"

                required property string section

                Text {
    
    
                    text: parent.section
                    font.bold: true
                    font.pixelSize: 20
                }
            }
        }

        model:  ListModel {
    
    
            ListElement {
    
    
                name: "Bill Smith"
                number: "555 3264"
                size: "s"
            }
            ListElement {
    
    
                name: "John Brown"
                number: "555 8426"
                size: "l"
            }
            ListElement {
    
    
                name: "Sam Wise"
                number: "555 0473"
                size: "xl"
            }
        }//控制所有数据

//        header: Rectangle {
    
    
//            width: 180
//            height: 20

//            color: "red"
//        }

//        footer: Rectangle {
    
    
//            width: 180
//            height: 20

//            color: "blue"
//        }

        spacing: 15

        highlight: Rectangle {
    
    
            color: "lightsteelblue"
            //radius: 5
        }

        delegate: Rectangle {
    
     //控制每一项数据如何绘制
            width: 80
            height: 15
            color: "transparent"

            Text {
    
    
                id: txt
                text: name
            }

            MouseArea {
    
    
                anchors.fill: parent
                onClicked: {
    
    
                    list.currentIndex = index
                    console.log(index)
                }
            }
        }

        section.property: "size"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeading  //每一个property如何绘制
    }
}

StackView

Kann zur Verwaltung von Anwendungen mit mehreren Seiten verwendet werden

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    
    
     title: qsTr("Hello World")
     width: 640
     height: 480
     visible: true

     StackView {
    
    
         id: stack
         initialItem: mainView
         anchors.fill: parent
     }

     Component {
    
    
         id: mainView

         Row {
    
    
             spacing: 10

             Button {
    
    
                 text: "Push"
                 onClicked: stack.push(mainView)
             }
             Button {
    
    
                 text: "Pop"
                 enabled: stack.depth > 1
                 onClicked: stack.pop()

             }
             Text {
    
    
                 text: stack.depth
             }
         }
     }
 }

Benutzerdefiniertes Modell

ListViewAnzeigedaten müssen die entsprechende Modellklasse erstellen, von der sie geerbt werdenQAbstractListModel

mylistmodel.h

#ifndef MYLISTMODEL_H
#define MYLISTMODEL_H

#include <QAbstractListModel>
#include <QJsonObject>
#include <QJsonArray>
#include <QJsonDocument>
#include <QJsonValue>

class MyListModel : public QAbstractListModel
{
    
    
    Q_OBJECT

public:
    enum MyRoleName {
    
    
        Name = Qt::DisplayRole + 1,
    };

    explicit MyListModel(QObject *parent = nullptr);
    static MyListModel* instance();

    // Basic functionality:
    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
    QHash<int, QByteArray> roleNames() const override;

private:

    QList<QString> m_data;
};

#endif // MYLISTMODEL_H

mylistmodel.cpp

#include "mylistmodel.h"

MyListModel::MyListModel(QObject *parent)
    : QAbstractListModel(parent)
{
    
    
    m_data.append("韩立 200");
    m_data.append("银月 666");
    m_data.append("紫灵 111");
}

MyListModel *MyListModel::instance()
{
    
    
    static MyListModel* obj = new MyListModel;
    return obj;
}

int MyListModel::rowCount(const QModelIndex &parent) const
{
    
    
    // For list models only the root node (an invalid parent) should return the list's size. For all
    // other (valid) parents, rowCount() should return 0 so that it does not become a tree model.
    if (parent.isValid())
        return 0;

    return m_data.count();
    // FIXME: Implement me!
}

QVariant MyListModel::data(const QModelIndex &index, int role) const
{
    
    
    if (!index.isValid())
        return QVariant();

    if (role == MyRoleName::Name) {
    
    
        return m_data[index.row()];
    }

    // FIXME: Implement me!
    return QVariant();
}

QHash<int, QByteArray> MyListModel::roleNames() const
{
    
    
    QHash<int, QByteArray> roles;
    roles.insert(MyRoleName::Name, "name");
    return roles;
}

Registrieren Sie die Modellklasse in main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "mylistmodel.h"

int main(int argc, char *argv[])
{
    
    
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("MyListModel", MyListModel::instance());
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
        &app, [url](QObject *obj, const QUrl &objUrl) {
    
    
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

Verwenden Sie ListView zur Anzeige in qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ListView {
    
    
        width: 200
        height: 300

        model: MyListModel

        delegate: Text {
    
    
            id: txt;
            text: name
        }
    }
}

Layout

Ankerlayout

Locator

Reihe

Spalte

Layoutmanager

Zeilenlayout

ColumnLayout

Benutzerdefinierte Attributverwendung von C++-Klassen

Nicht-Singleton-Klasse

Verwenden Sie das SchlüsselwortQ_PROPERTY, um Attribute in der C++-Klasse anzupassen und sie an den allgemeinen Prozess auf der qml-Seite zu binden:

1. Deklarieren Sie in der -Klasse, die von der QObject-Klasse erbt:MyObject

Q_PROPERTY(QString path READ path WRITE setPath NOTIFY pathChanged)

Weil das Eigenschaftensystem nur verwendet werden kann, wenn es vonQObject erbt

2. FürNicht-Singleton-Klassen registrieren Sie sie im Metaobjektsystem

qmlRegisterType<MyObject>("sy", 1, 0, "MyObject");

3. FürNicht-Singleton-Klasse ist beim Aufrufen der C++-Attributmethode auf der QML-Seite erforderlich instanziiert werden< /span>

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import sy 1.0

ApplicationWindow {
    
    
    visible: true
    width: 400
    height: 200
    title: "Using C++ Property in QML"

    MyObject {
    
    
        id: myCppObject
    }

    Column {
    
    
        anchors.centerIn: parent
        spacing: 10

        Text {
    
    
            text: "Name from C++: " + myObject.path
        }

        TextField {
    
    
            placeholderText: "Enter new name"
            onTextChanged: myObject.path = text
        }
    }
}

Singleton-Klasse

1. Die Art und Weise, wie eine Singleton-Klasse im Metaobjektsystem registriert wird, ist

qmlRegisterSingletonInstance("sy", 1, 0, "MyObject", MyObject::instance());

2. Für Singleton-Klasse ist beim Aufrufen der C++-Attributmethode auf der qml-Seite nicht erforderlich Instanziierung< /span>

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import sy 1.0

Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Column {
    
    
        anchors.centerIn: parent
        spacing: 10

        Text {
    
    
            text: "Name from C++: " + MyObject.path
        }

        TextField {
    
    
            placeholderText: "Enter new name"
            onTextChanged: MyObject.path = text
        }
    }
}

Aufrufen von C++-Funktionen auf der qml-Seite

Unabhängig davon, ob es sich um Attribute oder Methoden in C++ handelt, müssen C++-Klassen hauptsächlich auf drei Arten im Metaobjektsystem registriert werden.

C++-Klasseninstanzen werden als Kontextobjekte in den QML-Code eingebettet

1. Q_INVOKABLEMakros deklarieren C++-Funktionen als vom Metaobjektsystem aufrufbare Funktionen

Q_INVOKABLE int getValue();

2. Registrieren Sie Objekte im Metaobjektsystem

MyObject obj;
engine.rootContext()->setContextProperty("myQml", &obj);

3. qml-Aufruf:Keine Instanziierung oder Import erforderlich

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    
    
    visible: true
    width: 400
    height: 200
    title: "Using C++ function in QML"

    Button{
    
    
        id:btn
        height: 48
        width: 120
        text: "1"
        anchors.centerIn: parent

        Component.onCompleted: {
    
    
            text = myQml.getValue()
            console.log(text)
        }
    }
}

Nicht-Singleton-Klassen werden mithilfe von qmlRegisterType als instanziierbarer QML-Typ registriert

1. registrieren

qmlRegisterType<MyObject>("sy", 1, 0, "myQml");

2. Auf der qml-Seite:Muss nach der Instanziierung des Objekts importiert und aufgerufen werden

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import sy 1.0

ApplicationWindow {
    
    
    visible: true
    width: 400
    height: 200
    title: "Using C++ function in QML"

    MyObject {
    
    
        id: myQml
    }

    Button{
    
    
        id:btn
        height: 48
        width: 120
        text: "1"
        anchors.centerIn: parent

        Component.onCompleted: {
    
    
            text = myQml.getValue()
            console.log(text)
        }
    }
}

Die Singleton-Klasse wird mit qmlRegisterSingletonInstance als Singleton-Typ registriert

1. registrieren

qmlRegisterSingletonInstance("sy", 1, 0, "myQml", MyObject::instance());

2. Erfordert Import, aber keine Instanziierung

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import sy 1.0

ApplicationWindow {
    
    
    visible: true
    width: 400
    height: 200
    title: "Using C++ function in QML"

    MyObject {
    
    
        id: myQml
    }

    Button{
    
    
        id:btn
        height: 48
        width: 120
        text: "1"
        anchors.centerIn: parent

        Component.onCompleted: {
    
    
            text = myQml.getValue()
            console.log(text)
        }
    }
}

Signale und Slots

C++ deklariert Signale und Slots

1. Signalaussage

写在signals下
返回值是void，只需声明，无需实现
可以有参数
可以重载（一般不用重载）

2. Deklaration der Slot-Funktion

写在public slots下
返回值是void，需声明，需实现
可以有参数
可以重载（一般不用重载）

3. Signal- und Slotbindung für C++-Objekte

connect(信号的发送者，发送的信号(函数地址)，信号的接受者，处理的槽函数(函数地址));

qml-Signale und Signalprozessoren

1. Signalaussage

siganl mouseReleased()
signal actionCanceled(string action)

Manuelle Signalübertragung:

对象id.mouseReleased()

QML-Typen bieten nicht nur die Möglichkeit, eigene Signale zu definieren, sondern auch ein integriertes Eigenschaftswertänderungssignal. QML sendet dieses Signal automatisch aus, wenn sich der Eigenschaftswert ändert.

2. Signalprozessor

当在QML对象中添加一个信号时，会自动添加一个对应的信号处理器

Beispiel:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import sy 1.0

Window {
    
    
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    signal modify()

    Column {
    
    
        anchors.centerIn: parent
        spacing: 10

        Text {
    
    
            text: "Name from C++: " + MyObject.path
        }

        TextField {
    
    
            placeholderText: "Enter new name"
            onTextChanged: {
    
    
                MyObject.path = text
                root.modify()
            }
        }
    }

    onModify: {
    
    
        console.log("text is modified.")
    }
}

3. Verwenden Sie connect, um ein Signal mit einer Methode oder einem anderen Signal zu verbinden

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import sy 1.0

Window {
    
    
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    signal sigModify()

    function onModify()
    {
    
    
        console.log("modify")
    }

    Column {
    
    
        anchors.centerIn: parent
        spacing: 10

        Text {
    
    
            text: "Name from C++: " + MyObject.path
        }

        TextField {
    
    
            id: textField
            placeholderText: "Enter new name"
            onTextChanged: {
    
    
                MyObject.path = text
                root.sigModify()
            }
        }
    }

    Component.onCompleted: {
    
    
        root.sigModify.connect(onModify)
    }
}

4. Verwenden SieConnections, um eine Signalverarbeitung außerhalb des Objekts durchzuführen, das das Signal aussendet

Beispiel

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import sy 1.0

Window {
    
    
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Column {
    
    
        anchors.centerIn: parent
        spacing: 10

        Text {
    
    
            text: "Name from C++: " + MyObject.path
        }

        TextField {
    
    
            id: textField
            placeholderText: "Enter new name"
        }
    }

    Connections {
    
    
        target: textField
        function onTextChanged() {
    
    
            console.log("modify")
            MyObject.path = text
        }
    }
}

C++-Signalbindung an qml

Im Allgemeinen werden benutzerdefinierte Attribute in C++ an die qml-Seite gebunden. Wenn das Attributänderungssignal gesendet wird, können sowohl die C++- als auch die qml-Seite reagieren.

Zweitens können benutzerdefinierte C++-Signale durch Bindung an die JavaScript-Funktion auf der qml-Seite über connect verarbeitet werden.

qml-Signalbindung an C++

Im Allgemeinen klicken Sie auf das vom qml-Steuerelement ausgegebene Signal, verarbeiten es mit dem Signalprozessor auf der qml-Seite und rufen dann die C++-Funktion im Signalprozessor auf.