qml基础入门

已于 2024-01-24 10:04:50 修改
阅读量440 收藏 2
点赞数
分类专栏： Qt/MFC 文章标签： qml
于 2023-10-09 18:02:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Star_ID/article/details/132169011
版权

qml是什么

概念

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

qml编码规范

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

布局管理

事件管理

MouseArea组件

MouseArea继承自Item

  • acceptedButtons属性
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")
        }
    }
}
  • containsMouse属性、ContainsPress属性
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)
        }
    }
}
  • drag属性

拖动控件移动

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
            }
        }
    }
}

连同子控件一起移动，由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")
                    }
                }
            }
        }
    }
}

键盘事件和焦点作用域

定时器

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 Quick控件

window

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")
}

在这里插入图片描述

Item与Rectangle

Rectangle控件：自身属性不多，但它继承自Item，因此Item的诸多属性可以使用

  • focus属性
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"
    }
}
  • anchor属性
  1. anchors.fill → \to →填充父控件
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"
    }
}

在这里插入图片描述

  1. 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" }
             }
    }
}

在这里插入图片描述

Rectangle自定义边框

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
    }
}

在这里插入图片描述

states与transitions

Item的两个重要属性：states与transitions

状态机states

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. 第一种方法：直接属性动画

点击控件产生渐变效果

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）
        }
     }
}

点击控件产生伸长效果

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）
        }
     }
}
  1. 第二种方法：使用预定义的目标与属性
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
        }
    }
}

还可以定义动画的执行顺序

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 }
        }
    }
}
  1. 第三种：在状态改变的时候做动画
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 }
             }
         ]
     }
}
  1. 第四种：预定好行为
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 }
        }
    }
}

Component和Loader

qml中window组件也是一个Component

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与Loader配合使用加载控件，在加载控件完成后想对控件进行修改，可使用loader.item属性对控件进行修改

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)
        }
    }
}

加载图片

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)
        }
    }
}

在这里插入图片描述
加载动图

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)
        }
    }
}

Button组件

Button控件继承自AbstractButton，AbstractButton继承自Control，Control继承自Item

  • autoExclusive属性
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
    }
}

同一时间只有一个按钮处于checked状态

在这里插入图片描述

  • 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")
        }
    }
}
  • icon属性
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"
    }
}

在这里插入图片描述

  • text属性
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"
    }
}

在这里插入图片描述

  • background属性
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"
        }
    }
}

在这里插入图片描述

Property的使用

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控件

CheckBox继承自AbstractButton

  • tristate 属性
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")
        }
    }
}

checkBox控件无法用autoExclusive属性实现单选框，但可用ButtonGroup来实现

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")
        }
    }
}

在这里插入图片描述

以下示例说明了如何将子项的组合检查状态绑定到父复选框的检查状态

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控件

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控件

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")
        }
    }
}

RadioButton控件具有自动排他性

在这里插入图片描述

Switch控件

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控件

一般用作切换界面的按钮

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")
         }
     }
}

在这里插入图片描述

Button扩展

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
            }
        }
    }
}

在这里插入图片描述

Text控件

  • elide属性
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")
        }
    }
}

在这里插入图片描述

  • font属性
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)
        }
    }
}

在这里插入图片描述

  • textFormat属性
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!*"
        }
    }
}

在这里插入图片描述

  • linkActivated信号
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)
            }
    }
}

在这里插入图片描述

Label控件

Label继承自Text，专门用于单行展示文字。

Popup和Overlay

在这里插入图片描述

当Popup为子控件时，且设置visible为true时，仍然可以显示

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
        }
    }
}

在这里插入图片描述

Popup的z顺序是个例外

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
    }
}

在这里插入图片描述

  • closePolicy属性：窗口关闭逻辑

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 {

    }
}

如此，按下Esc或者在Popup控件周围按下不会让控件消失

在这里插入图片描述

  • modal模态对话框属性
  • dim：配合modal使用
  • enter、exit属性
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 }
    }
}
  • contentItem属性
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属性
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

model属性

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
        }
    }
}

在这里插入图片描述

Combox控件

Combox控件继承自Control，Control继承自Item

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

此属性保存可编辑组合框的输入文本验证器。设置验证器后，文本字段将仅接受使文本属性处于中间状态的输入。仅当按下 Return 或 Enter 键时文本处于可接受状态时，才会发出接受的信号。

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)
    }
}

自定义ComboBox

  • indicator

此属性保存放置指示器项。

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
        }
    }
}

Shape控件

与ShapePath结合使用可以绘制曲线

模型和视图

ListView

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
    }
}

在这里插入图片描述
还可以用ListModel这么搞

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
    }
}

在这里插入图片描述

  • highlight属性
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)
            }
        }
    }
}

在这里插入图片描述

  • head和foot
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

可用于管理具有多个页面的应用程序

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
             }
         }
     }
 }

在这里插入图片描述

自定义Model

ListView显示数据必须构造相应的模型类，继承自QAbstractListModel

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;
}

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();
}

qml当中用ListView显示

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
        }
    }
}

在这里插入图片描述

布局

锚点布局

定位器

Row

Column

布局管理器

RowLayout

ColumnLayout

C++类的自定义属性使用

非单例类

在C++类中利用Q_PROPERTY关键字自定义属性，并绑定到qml端的通用流程：

  1. 在继承自QObject类的MyObject类中声明：
Q_PROPERTY(QString path READ path WRITE setPath NOTIFY pathChanged)

因为只有继承自QObject才能使用属性系统

  1. 对于非单例类，将其注册到元对象系统中
qmlRegisterType<MyObject>("sy", 1, 0, "MyObject");
  1. 对于非单例类，在qml端的调用C++属性方法，需要实例化
// 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
        }
    }
}

在这里插入图片描述

单例类

  1. 单例类注册到元对象系统的方式为
qmlRegisterSingletonInstance("sy", 1, 0, "MyObject", MyObject::instance());
  1. 对于单例类，在qml端的调用C++属性方法，不需要实例化
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
        }
    }
}

在qml侧调用C++的函数

无论是C++中的属性还是方法，都需要将C++的类注册到元对象系统中，主要是三种方法。

C++类实例作为上下文对象嵌入到qml代码中

  1. Q_INVOKABLE宏将C++函数申明为元对象系统可调用的函数
Q_INVOKABLE int getValue();
  1. 注册对象至元对象系统中
MyObject obj;
engine.rootContext()->setContextProperty("myQml", &obj);
  1. qml调用：无需实例化，也无需import
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)
        }
    }
}

在这里插入图片描述

非单例类使用qmlRegisterType注册为一个可实例化的qml类型

  1. 注册
qmlRegisterType<MyObject>("sy", 1, 0, "myQml");
  1. 在qml侧：需要import并且实例化对象后调用
// 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)
        }
    }
}

单例类使用qmlRegisterSingletonInstance注册为单例类型

  1. 注册
qmlRegisterSingletonInstance("sy", 1, 0, "myQml", MyObject::instance());
  1. 需要import，但不需要实例化
// 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)
        }
    }
}

信号与槽

C++声明信号与槽

  1. 信号声明
写在signals下
返回值是void，只需声明，无需实现
可以有参数
可以重载（一般不用重载）
  1. 槽函数声明
写在public slots下
返回值是void，需声明，需实现
可以有参数
可以重载（一般不用重载）
  1. C++对象的信号槽绑定
connect(信号的发送者，发送的信号(函数地址)，信号的接受者，处理的槽函数(函数地址));

qml的信号与信号处理器

  1. 信号声明
siganl mouseReleased()
signal actionCanceled(string action)

手动发射信号：

对象id.mouseReleased()

除了可以自己定义信号，QML类型提供了一种内建的属性值改变信号。当属性值改变时，QML会自动发出该信号。

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

范例：

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.")
    }
}
  1. 使用connect将信号连接到一个方法或另一个信号
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)
    }
}
  1. 用Connections在发射信号的对象外部进行信号处理

范例

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++信号绑定到qml

一般来讲，C++中自定义的属性会绑定到qml侧，当属性改变信号发出时，C++和qml端都能响应。

其次，C++自定义的信号可以通过connect绑定到qml端的JavaScript函数进行处理。

qml信号绑定到C++

一般点击qml控件上发出的信号，在qml侧使用信号处理器处理，然后在信号处理器中调用C++函数就可以了。

Star_ID
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt Quick/QML入门到精通_专栏demo对应文章目录(目前50个左右demo/长期更新)
抵抗时间扭曲，坚持做一件有意义的事
09-01 1万+
自定义图标下拉列表框的效果如下所示:自定义三态按钮的效果如下所示:传送门:53.qt quick-自定义三态按钮、自定义图标下拉列表框_诺谦的博客-CSDN博客传送门:59.qt quick-qml调色板(颜色取色器)实现、自定义QQuickStyle样式_诺谦的博客-CSDN博客63.qt quick-QML侧边滑动栏(不需要任何图片资源,支持自定义左右方向和大小)_诺谦的博客-CSDN博客_qt实现好看侧边栏。...
Qt Quick 4小时入门
06-08
Qt Quick（QML）是Qt 5里推荐的UI开发框架，能够为各种设备搭建流畅且绚丽的用户界面。本课程删繁就简，精心选择主题，通过短短的几节课，即可让大家跨越Qt Quick的入门门槛，为进一步学习奠定坚实基础。
《qt5编程入门》源码
04-25
QT 5 编程入门是基于Qt 5的QML和Qt Quick入门书籍，详细介绍了QML语言的语法和编写Qt Quick程序需要用到的基本知识点。本书内容主要包括Qt 5的介绍、QML语法、Qt Quick基础知识以及在图形动画、数据处理和多媒体方面的应用等。 本资源为《Qt5编程入门》（霍亚飞）（第1版）源码
QML学习及实战
最新发布
qq_44891434的博客
06-14 702
QML学习笔记，及其日常用的一些ui实战，以及QML和C++之间的相互通信；
QML学习【一】QML语言基础
qq_51214753的博客
11-07 1万+
QML语言基础
Qt之QML学习（一）——初步认识QML
热门推荐
疯狂挖掘机的博客
09-01 1万+
市面上书籍不多，我推荐《qt quick核心编程》，需要电子档可以私信我。前后我看了好几篇，手头工具书，说的还是很全.
QML学习笔记
fangqi20170515的博客
07-13 1492
QML是与HTML类似的一种标记语言。QML文件采用.qml作为文件格式后缀。作为一种标记语言（类似HTML）一个QML文档有且只有一个根元素。示例：在这个例子中使用Image元素作为根元素，这个元素的宽度、高度与"images/background.png"图像相同。QML中不限制根元素类型，在上面这段代码中我们设置了Image元素的source属性作为我们的背景图像，它也是我们的根元素。
QML简介与快速入门
世界需要程序员，而我就是其中一员！
04-02 1382
Qt QML模块为使用QML语言开发应用程序和库提供了一个框架。它定义并实现了语言和引擎基础设施，并提供了一个API，使应用程序开发人员能够使用自定义类型扩展QML语言，并将QML代码与JavaScript和C++集成。Qt QML模块同时提供QML API和C++API。虽然Qt QML模块为QML应用程序提供了语言和基础设施，Qt Quick模块为构建用户界面提供了许多视觉组件、模型视图支持、动画框架等。
Qml入门培训
10-25
本文档介绍了qml入门的知识，尤其还对于qml的渲染机制和传统的qt的渲染机制做了对比
QML入门教程
01-18
QML 入门教程 QML 是一种描述性的脚本语言，文件格式以 .qml 结尾。语法格式非常像 CSS，但又支持 JavaScript 形式的编程控制。它结合了 Qt Designer UI 和 QtScript 的优点。 QML 的基本概念 * QML 文件格式：....
QT5的QML&QUICK;编程入门
06-04
1. **QML基础**：包括QML文件结构、元素类型、属性、方法、信号和槽、数据绑定等基础知识。 2. **基本元素**：学习如何创建和使用如Rectangle、Text、Image等基本元素，以及如何进行布局管理。 3. **状态和过渡**：...
QML塞班开发入门源码。
03-28
在"QML塞班开发入门源码"中，`WebNavigator`是一个示例项目，它展示了如何在QML中创建一个简单的Web浏览器。这个项目对于初学者来说是很好的学习资源，因为它涵盖了几个关键的QML概念和技术。 1. **QML的基本结构**...
QML介绍文档
05-08
《QML内部培训资料（Nokia）.pdf》是一份很好的QML学习资料，它可能包含了QML的基础概念、语法特性、组件库介绍以及实践示例，对于初学者来说是一份宝贵的入门指南。 总的来说，QML提供了一个强大且灵活的UI开发...
QML学习笔记【02】：QML快速入门
hurryddd
12-31 2970
QML语法（QML Syntax） QML是一种描述用户界面的声明式语言。它将用户界面分解成一些更小的元素，这些元素能够结合成一个组件。QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript来提供修饰，或者增加更加复杂的逻辑
QML入门
博客
05-08 2722
文章目录基本语法基本类型布局函数定义与调用自定义信号基本可视元素事件动画1.动画作为属性值的来源2.行为动画3.信号处理器中的动画4.独立动画5.状态切换6.属性动画元素7.组合动画QML与C++混合编程1.利用QQuickView2.qml使用C++函数3.C++调用qml中的函数4. qml中信号出发cpp中槽函数 基本语法 import QtQuick 2.0 //导入内建qml的类型 //Item就像Qt中QtObject一样，属于一个基类 Item { width: 500 he
QML 快速入门
m0_73482095的博客
12-12 432
qml是一种描述性的脚本语言，语法类似css, 可以在脚本中创建图像对象，并支持各种特效，并且文件是以.qml结尾。qml文档描述 了一个对象树。各个元素可以以嵌套的方式来组合成复杂的图形功能。qml是Qt quick的核心组件之一。qml是运行时解释，不需要重新编译。qml支持自定义属性，调用自定义属性值显示文本信息qml文件中，自定义属性以关键字property开始，然后是说明类型，最后是属性的名称和值。qml没有提供直接的圆形组件，所以，这里自定义圆形组件。
Qt QML 第五章第一、二节：快速入门、QML 语法
申徒嘉的专栏
11-05 1621
QML 提供了一种称为“动态范围界定”的机制，其中稍后加载的文档会覆盖先前加载的文档中的元素 ID。元素是通过使用它们的元素名称来声明的，但是是通过使用它们的属性或创建自定义属性来定义的。对于图书内容，我们删除这个可选的版本号，正常情况下，您会自动从您选择的 Qt 工具包中选择可用的最新版本。QML: (binding)和 JavaScript = (assignment)之间的区别在于绑定是一个契约，并且在绑定的生命周期内保持为真，而 JavaScript 赋值(=)是一次性的值赋值。
最好的 QML 教程，让你的代码飞起来！
青春不老，奋斗不止！
02-28 8619
想必大家都知道，亮哥一直深耕于 CSDN，坚持了好很多年，目前为止，原创已经 500 多篇了，一路走来相当不易。
《快速掌握QML》第一章 初识QML
热爱代码
07-04 2216
在本章，我们会学习如何快速搭建QML开发环境，并通过一个简单的QML程序了解它的神奇之处。相信在阅读完本章后，我们会感受到用QML开发的快乐。
qml入门教程pdf
07-28
QML入门教程是一本关于QML编程语言的指导手册，主要旨在帮助初学者快速上手和了解该语言的基本概念和特性。QML是Qt Quick框架的一部分，在开发用户界面时常常用到。下面将简要说明这本教程所涵盖的内容。 教程首先介绍了QML的基本概念和语法，包括如何定义对象、属性和信号等。它详细解释了QML的层次结构，以及如何通过编写QML文件来组织和布局用户界面。同时，教程还教授了如何使用QML中的基本元素和组件，例如文本框、按钮和图像等，以及如何处理用户输入和交互。 接下来，教程讲解了QML的动态性和可定制性。它说明了如何使用动画和过渡效果来增强用户体验，以及如何创建自定义组件和样式来实现个性化的界面设计。此外，教程还介绍了QML中的状态和过渡，帮助开发者实现复杂的场景切换和界面更新。 最后，教程还提供了一些实例和案例研究，以帮助读者理解QML的实际应用。这些案例涵盖了不同领域的应用，例如移动应用程序、游戏界面和嵌入式系统等。通过这些实例，读者可以更好地掌握QML的技巧和技巧，并将其应用到实际项目中。 总而言之，QML入门教程是一本全面介绍QML编程语言和Qt Quick框架的指导手册。它适合那些想要学习和掌握QML的初学者，无论是作为职业开发者还是个人爱好者。通过学习这本教程，读者可以快速获得QML编程的基础知识，并能够开始开发自己的QML应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值