QML 从入门到放弃

 

发现了一个问题：

QQuickView only supports loading of root objects that derive from QQuickItem. 

If your example is using QML 2, (such as qmlscene) and the .qml file you 
loaded has 'import QtQuick 1.0' or 'import Qt 4.7', this error will occur. 

To load files with 'import QtQuick 1.0' or 'import Qt 4.7', use the 
QDeclarativeView class in the Qt Quick 1 module. 

QML:

Window
{
    width: 360
    height: 360
    color:"black"
}

 

 

 

如果你发现了你的main.cpp是这个就会爆上面错误。

#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QtQuick2ApplicationViewer viewer;
    viewer.setMainQmlFile(QStringLiteral("qml/QML_V2/main.qml"));
    viewer.showExpanded();

    return app.exec();
}

修改为:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl("qml/QML_V2/main.qml"));
    QObject *topLevel = engine.rootObjects().value(0);
    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
    window->show();
    return app.exec();
}

 

 ..........QML web:直接给跪下了

https://qmlweb.github.io/

 

<1>Simple:

import QtQuick 2.0

Rectangle
{
    id:rootTangle
    width: 360
    height: 360
    color:"red"



    Rectangle
    {
        id:blueRec
        color:"#0000FF"
        opacity: 1
        width:rootTangle.width/2
        height:rootTangle.height/6
        //x:64
        //y:64
        anchors.centerIn: rootTangle
        //anchors.centerIn: parent
        border.color: "black"
        border.width: 5
        radius:20
        //gradient: Gradient
        //{
        //    GradientStop{position:0.0;color:"lightsteelblue"}
        //    GradientStop{position:1.0;color:"blue"}
        //}
    }


    MouseArea
    {
        //anchors.fill: parent //设置区域
        id:blueRectMouseArea
        anchors.fill:
        {
            blueRec
        }
        // 也可以写成anchors.fill:blueRec

        hoverEnabled: true;
        onEntered:
        {
            //blueRec.scale = 1.5
            blueRec.color = "brown"
            //blueRec.rotation = 45
            //ourText.rotation = 45
        }
        onExited:
        {
            //blueRec.scale = 1
            blueRec.color ="#0000FF"
            //blueRec.rotation = 0
            //ourText.rotation = 0
        }

        onClicked:
        {
            console.log(blueRec.color)
            console.log("test our data")
            //Qt.quit();
        }
    }



    Text
    {
        id:ourText
        //anchors.centerIn: parent
        anchors.centerIn: blueRectMouseArea
        text: "你是一个测试"
        //text: "你是一个<b>测试</b>" 设置测试为加黑字体
        color:"white"
        font.pixelSize: Math.round(blueRectMouseArea.height/2.5)
        //width:blueRec.width
        //wrapMode: Text.WordWrap
        //font.bold: true  设置所有的为bold
    }

}

View Code