QML杂记

1.QML编写可视化元素，运行后程序窗口上无显示。检查电脑的显卡是否支持OpenGL,如果支持请更新显卡驱动。

  

    QQuickView 提供了一个窗体用于显示UI
    QQmlEngine 提供QML运行的环境
    QQuickWindow 显示窗体，以及对item对象的管理及用户交互

 

  如果用 QQmlApplicationEngine,根节点必须是Window,否则无窗体显示

   例如：

     Rectangle {

    width: 360

    height: 360

    color: "red"

     visible: true
}

Window {

 visible: true

    width: 360

    height: 360

    flags:"FramelessWindowHint"

    Rectangle {

    width: 360

    height: 360

    color: "red"

     visible: true
}
}

 

2.加载图片显示QML Image: Cannot open。解决在qml.qrc右击添加文件目录，把图片的文件夹添加进去。图片就能正常显示。   

 Image{
        id:image
        width: parent.width
        height: parent.height
        source: "images/background.png"
    }

3.组件，一个文件就是一个基础组件，一个以文件为基础的组件在文件中创建了一个QML元素，并且将文件以元素类型来命名（例如Button.qml）。你可以像任何其它的QtQuick模块中使用元素一样来使用这个组件。我们在根级导出了文本和点击信号。通常我们命名根元素为root让引用更加方便。我们使用了QML的alias（别名）的功能，它可以将内部嵌套的QML元素的属性导出到外面使用。有一点很重要，只有根级目录的属性才能够被其它文件的组件访问。

import QtQuick 2.0
//MyButton.qml
Item {
    id: root
    width: 116; height: 26

    // export button properties
    property alias text: label.text
    signal clicked

    Rectangle {
        anchors.fill: parent
        color: "lightsteelblue"
        border.color: "slategrey"
    }

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}

import QtQuick 2.7
import QtQuick.Window 2.2
import QtMultimedia 5.5
import QtQuick.Controls 2.0

//main.qml

Window {

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

    MyButton{
        id:button
        x:20;y:20
        text:"Start"
        onClicked: {
            status.text="button clicked!"
        }
    }

    Text{
        id:status
        x:20;y:76
        width: 116;height: 26
        text:"waiting..."
        horizontalAlignment: Text.AlignVCenter
    }





}