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. 

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

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

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

import QtQuick 2.0 import QtQuick.Window 2.0 import QtQuick.Controls 1.1 Window { id:root width: 360 height: 360 title:"Gearslogy" Column { Row { id:tools Button { id:button_01 text:"Reset1" onClicked: { display.fillMode = Image.Stretch display.width = display.sourceSize.width display.height = display.sourceSize.height display.anchors.centerIn = viewPort display.clip = false console.log("Reset button"); } } Button { id:button_02 text:"fit to window" onClicked: { display.fillMode = Image.Stretch display.width = root.width display.height = root.height console.log("Reset button"); } } } Rectangle { id:viewPort width: root.width height: root.height AnimatedImage { id:display anchors.centerIn: viewPort source:"images/img.gif" } } } }

import QtQuick.Window 2.0 import QtQuick 2.2 Window { width: 136 height: 120 color: "linen" Rectangle { color: "lightsteelblue" border.color: "gray" anchors.fill: parent anchors.margins: 4 radius:5 TextEdit { anchors.fill: parent id: input focus: true text: "Text Edit" anchors.margins: 4 } } }

import QtQuick.Window 2.0 import QtQuick 2.2 Window { width: 500 height: 500 color: "linen" Rectangle { id:root anchors.fill: parent color:"#333333" Rectangle { id:rec x:20 y:20 width:40 height:40 color:"#339900" border.color: "yellow" border.width: 2 } Keys.onLeftPressed: { //console.log("left button") rec.x -= 8 } focus: true Keys.onRightPressed: rec.x += 8 Keys.onUpPressed: rec.y -= 8 Keys.onDownPressed: rec.y += 8 Keys.onPressed: { switch(event.key) { case Qt.Key_Plus: rec.scale += 0.2 break; case Qt.Key_Minus: rec.scale -= 0.2 break; } } } }

import QtQuick 2.5 import QtQuick.Window 2.2 Item { id:flicks width: Screen.width/2 height:Screen.height/2  Flickable { width:parent.width height: parent.height contentHeight: img.height + img2.height contentWidth: img.width boundsBehavior:Flickable.DragOverBounds Image { id:img //anchors.fill: parent source: "ttt.jpg" } Image { anchors.top: img.bottom id:img2 //anchors.fill: parent source: "tt2.png" } } }

import QtQuick 2.0 Item { id:defNode property int dwidth property int dheight property string dname property string bgcolor property string dtext : "bad news" property int radius: 8 width: dwidth height: dheight // main bound rect  Rectangle { id:rect anchors.fill: parent border.color: "#FFFFFF" border.width: 1 color:bgcolor radius:defNode.radius opacity: 0.9 scale:parent.scale } // header rect  Rectangle { id:header width:rect.width height: 20 //color:"white" opacity: 0.7 radius:defNode.radius scale: rect.scale gradient: Gradient { GradientStop { position: 0.0; color: "white" } GradientStop { position: 0.1; color: "white" } GradientStop { position: 0.3; color: "#BBBBBB" } GradientStop { position: 1.0; color: "lightsteelblue" } } } // circle output  Rectangle { property int _radius : 15 // var _radius = 5  id:cicle radius:_radius width:_radius height:_radius opacity: 1 anchors.horizontalCenter: rect.horizontalCenter anchors.top:rect.bottom border.color: "brown" border.width: 1 } Text { anchors.centerIn: header id: nodeName text: defNode.dname color:"#FFFFFF" font.bold:true } // Edit Text is here  Rectangle { id:myedit height : rect.height - header.height width : rect.width anchors.top: header.bottom opacity: 0.1 } TextEdit { width:myedit.width text: defNode.dtext wrapMode: TextEdit.WrapAnywhere focus: true color:"#FFFFFF" opacity: 1 anchors.fill: myedit anchors.margins: 6 scale: rect.scale } MouseArea { property int isPress: 0 property point clickPos: "0,0" id:marea anchors.fill: header hoverEnabled: true onEntered: { defNode.scale = 1.05 } onExited: { defNode.scale =1 } onPressed: { isPress = true clickPos = Qt.point(mouse.x,mouse.y) rect.border.color = "yellow" } onPositionChanged: { if(isPress) { var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y) defNode.x = defNode.x + delta.x defNode.y = defNode.y + delta.y } } onReleased: { isPress = false rect.border.color = "#FFFFFF" } } }

import QtQuick 2.5 import QtQuick.Window 2.2 Window { visible: true width: Screen.width / 2 height: Screen.width / 2 color:"black" // put main window it in the center x:Screen.width/2 - width/2 y:Screen.height/2 - height/2 Node { x:100 y:200 dwidth: 200 dheight: 120 dname:"Houdini" bgcolor: "black" dtext: "Note that the TextEdit does not implement scrolling, following the cursor to add flickable scrolling that follows the cursor:" } Node { x:600 y:300 dwidth: 100 dheight: 120 dname:"Maya" bgcolor: "#505050" } Node { x:400 y:700 dwidth: 300 dheight: 100 dname: "Shit" bgcolor: "#002266" dtext: "are you want shit" } }

import QtQuick 2.5 import QtQuick.Window 2.2 Window { id:root visible: true color:"black" Column { spacing: 10 Rectangle { id:blueRect width: root.width height: 360/3.3  KeyNavigation.up: yellowRect KeyNavigation.down: redRect color: { if(activeFocus) { "blue" } else "grey" } //color:activeFocus?"blue":"grey" /* and another write method if(activeFocus === true) { "blue" } else "grey" */ } Rectangle { id:redRect width:root.width height: 360/3.3 focus: true KeyNavigation.up: blueRect KeyNavigation.down: yellowRect color: { if(activeFocus) { "red" } else "grey" } } Rectangle { id:yellowRect width: root.width height: 360/3.3  color: { if(activeFocus) { "yellow" } else "grey" } KeyNavigation.up: redRect KeyNavigation.down: blueRect } } }

import QtQuick 2.0 import QtQuick.Controls 1.1 Rectangle { width: 600 height: 150 id:mainRect color:"darkGrey" Rectangle // header  { id:header height:40 width:parent.width color:"black" opacity: 0.8 anchors.top:parent.top anchors.margins: 2 border { color:"brown" } radius:5 Text { anchors.centerIn: parent text: "Target Animation Header" color:"white" font.bold: true font.pixelSize: 20 } } Rectangle //image  { id:mainImage anchors.top: header.bottom width:mainRect.width height:mainRect.height border.color: "#529999" border.width: 2 anchors.margins:2 color:yellow Image { //width:parent.width //height:parent.height  anchors.fill: parent anchors.margins: 2 id: coreImage clip: true fillMode: Image.PreserveAspectCrop source: "img.jpg" } } MouseArea { anchors.fill: mainImage onClicked: { scaleAnimation.start() borderAnimation.start() //也可以一起控制 //scaleAndOpacityAnimation.start()  opacityAnimation.start() } } PropertyAnimation // control the scale animation  { id:scaleAnimation target: mainImage property: "scale" from:0 to:1 duration:1000 easing.type:Easing.OutBack } NumberAnimation // control the opacity animation  { id:opacityAnimation target:mainImage property:"opacity" from:0 to:1 duration:1000 easing.type:Easing.OutBack } PropertyAnimation // target more attribute....  { id:borderAnimation target:mainImage properties: "border.color,color" from:"yellow" to:"#529999" duration:1000 easing.type:Easing.OutBack } //  PropertyAnimation { id:scaleAndOpacityAnimation target:mainImage properties: "scale,opacity" from:0 to:1 duration:1000 easing.type:Easing.OutBack } }

import QtQuick 2.0 import QtQuick.Controls 1.1 Rectangle { width: 600 height: 150 id:mainRect color:"darkGrey" Rectangle // header  { id:header height:40 width:parent.width color:"black" opacity: 0.8 anchors.top:parent.top anchors.margins: 2 border { color:"brown" } radius:5 Text { anchors.centerIn: parent text: "Target Animation Header" color:"white" font.bold: true font.pixelSize: 20 } } Rectangle //image  { id:mainImage anchors.top: header.bottom width:mainRect.width height:mainRect.height //border.color: "#529999" //border.width: 5 anchors.margins:3 color:"transparent" radius:10 Image { //width:parent.width //height:parent.height  anchors.fill: parent anchors.margins: 3 id: coreImage clip: true fillMode: Image.PreserveAspectCrop source: "img.jpg" } // 给一个属性创建state必须是子集  states: [ State { name: "in" PropertyChanges { target: mainImage color:"yellow" } }, State { name: "out" PropertyChanges { target: mainImage color: "transparent" } } ] transitions: [ Transition { from: "out" to: "in" ColorAnimation { target: mainImage duration: 1200 } }, Transition { from: "in" to: "out" ColorAnimation { target: mainImage; duration: 1200} } ] } MouseArea { anchors.fill: mainImage hoverEnabled: true onEntered: { console.log("Enter Function") mainImage.state = "in" } onExited: { console.log("Exit Function") mainImage.state = "out" } onClicked: { scaleAnimation.start() opacityAnimation.start() } } PropertyAnimation // control the scale animation  { id:scaleAnimation target: mainImage property: "scale" from:0 to:1 duration:1000 easing.type:Easing.OutBack } NumberAnimation // control the opacity animation  { id:opacityAnimation target:mainImage property:"opacity" from:0 to:1 duration:1000 easing.type:Easing.OutBack } }

Rectangle { id:root width: 360 height: 360 color:"black" Rectangle { id:greenRect width:50 height:50 color:"green" //第一种方法  NumberAnimation on x { from : 0 to : 1 duration:1200 loops:Animation.Infinite } } /* // 第二种方法 NumberAnimation on x { target: greenRect; property: "x"; from:0; to:100; duration: 1200; loops:Animation.Infinite }*/ /* // 第三种方法 NumberAnimation { running:true target:greenRect properties: "x" from:0 to:100 duration: 1200 loops:Animation.Infinite }*/

import QtQuick 2.0 Rectangle { id:root width: 360 height: 360 color:"black" Rectangle { id:greenRect width:50 height:50 color:"green" //第一种方法 /* NumberAnimation on x { from : 0 to : 1 duration:1200 loops:Animation.Infinite }*/ } SequentialAnimation { running: true loops: Animation.Infinite NumberAnimation // first key is x:360-50=310 y:0 // move to pos(310,0)  { target: greenRect property: "x" to:root.width-greenRect.width duration: 400 //easing.type: Easing.InOutQuad  } NumberAnimation // 第二个关键帧是x:310 y:360-50=310 // move to pos(310,310)  { target: greenRect property: "y" to:root.height-greenRect.height duration: 400 //easing.type: Easing.InOutQuad  } NumberAnimation //第三个关键帧是: (0,310)  { target: greenRect property: "x" to:0 duration: 400 //easing.type: Easing.InOutQuad  } NumberAnimation //第四个关键帧  { target: greenRect property: "y" to:0 duration: 400 //easing.type: Easing.InOutQuad  } } }

import QtQuick 2.0 Rectangle { id:root width: 360 height: 360 color :"black" property int rotState: 0 property int _druation: 1200 Rectangle { id:anRect width:150 height:150 color:"yellow" border.color: "white" border.width: 2 radius:10 anchors.centerIn: parent states: [ State { name: "CLICEKED" PropertyChanges { target: anRect rotation:360 scale:1.5 color:"Gray" } }, State { name:"RE_CLICEKD" PropertyChanges { target: anRect rotation:0 scale:1 color:"Yellow" } } ] transitions: [ Transition{ from:"CLICEKED" to:"RE_CLICEKD" SequentialAnimation // set it's a sequential animation  { RotationAnimation { //target: anRect  duration: _druation easing.type: Easing.OutBack } NumberAnimation { property: "scale" duration: _druation easing.type: Easing.OutBack } ColorAnimation { duration: _druation easing.type: Easing.OutBack } } }, Transition{ from: "RE_CLICEKD" to: "CLICEKED" SequentialAnimation // set it's a sequential animation  { RotationAnimation { //target: anRect  duration: _druation easing.type: Easing.OutBack } NumberAnimation { property: "scale" duration: _druation easing.type: Easing.OutBack } ColorAnimation { duration: _druation easing.type: Easing.OutBack } } } ] } MouseArea { id:mouseAREA anchors.fill: parent onClicked: { if(!rotState) { anRect.state = "CLICEKED" rotState=1 console.log("CLICKED") } else { anRect.state = "RE_CLICEKD" rotState=0 console.log("RE_CLIECKED") } } } }

#ifndef MYCLASS_H #define MYCLASS_H #include <QObject> class MyClass : public QObject { Q_OBJECT Q_ENUMS(BALL_COLOR) public: explicit MyClass(QObject *parent = 0); enum BALL_COLOR { BALL_COLOR_YELLOW=0x0, //0x0 BALL_COLOR_RED,//0x1 BALL_COLOR_BLUE,//0x2 BALL_COLOR_ALL//0x3  }; signals: void begin(); void changeColor( ); public slots: void doSometing(); void doSometing(BALL_COLOR color); private: BALL_COLOR _ballColor; }; #endif // MYCLASS_H

#include "myclass.h" #include <QDebug> MyClass::MyClass(QObject *parent) : QObject(parent) { qDebug() << "Create Our MyClass in default"; _ballColor = BALL_COLOR_YELLOW; } void MyClass::doSometing() { qDebug() << "this is c++ do someting"; } void MyClass::doSometing(BALL_COLOR color) { _ballColor = color; qDebug() << "this is c++ do with enum " << color; emit changeColor(); //注意发射了这个信号 }

#include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQuickWindow> #include <QtQml> #include "myclass.h" int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); qmlRegisterType<MyClass>("GLY.MyClass", 1, 0, "MyClass"); //QML导入的时候就是import GLY.MyClass 1.0 .创建成员MyClass QQmlApplicationEngine engine; engine.load(QUrl("qml/Quick_C++_01/main.qml")); QObject *topLevel = engine.rootObjects().value(0); QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel); window->show(); return app.exec(); }

import QtQuick 2.0 import QtQuick.Window 2.0 import GLY.MyClass 1.0 Window { width: 360 height: 360 Text { text: qsTr("Hello World") anchors.centerIn: parent } MouseArea { anchors.fill: parent onClicked: { myclass.begin() //use your c++ signal  } } MyClass { //do not repeat signal 不要重复使用相同信号  id: myclass //onBegin:doSometing() //use you c++ signal and slots onBegin: doSometing(MyClass.BALL_COLOR_ALL) //带有形参的slots  onChangeColor: //注意每当点击会执行下面语句。因为在doSometing()执行了这个信号。 { var msg = "Changed color...."; console.log(msg) } } }

 Q_INVOKABLE void stop() { qDebug() << "Stop function"; } Q_INVOKABLE void stop(int var) { qDebug() << "Stop function with " <<var ; }

 MouseArea { anchors.fill: parent onClicked: { myclass.begin() //use your c++ signal myclass.stop() //直接调用一个函数. myclass.stop(1) } }

//定义QML访问成员变量为m_ballnum Q_PROPERTY(float m_ballnum READ getBallNum WRITE setBallNum NOTIFY ballNumChanged) Q_INVOKABLE float invokeGetBallNum() { //qDebug() << "use Q_INVOKABLE get ball num" << _ballNum ; return _ballNum; } const float getBallNum() //const 可选可不选  { qDebug() << "C++ getball num is " << _ballNum; return _ballNum; } void setBallNum(float ballNum) //ballNum 参数可引用，可不引用  { qDebug() << "C++ setball num is " <<ballNum; _ballNum = ballNum; emit ballNumChanged(); } private: float _ballNum;

 MouseArea { anchors.fill: parent onClicked: { myclass.m_ballnum = 10 //调用C++设置ball num console.log("use the Q_INVOKABLE method get ball num",myclass.invokeGetBallNum()) } } MyClass { id: myclass onBallNumChanged: { console.log("get ball num is " ,m_ballnum) //调用C++ getBallNum方法。  } }

Window { width: 360 height: 460 Rectangle { objectName: "rect" id:cenRect anchors.centerIn: parent color:"black" width:100 height:100 } }

#include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQuickWindow> #include <QtQml> #include "myclass.h" int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); qmlRegisterType<MyClass>("GLY.MyClass", 1, 0, "MyClass"); QQmlApplicationEngine engine("qml/Quick_C++_01/main.qml"); QObject *topLevel = engine.rootObjects().value(0);//指向第一个QML父窗口 QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel); QObject *object = topLevel; //读取父窗口的高度宽度 使用object->property() qDebug() << "width value is" << object->property("width").toInt(); qDebug() << "height value is" << object->property("height").toInt(); // object->setProperty() 设置宽度 object->setProperty("width",500); // modile file height use QQmlProperty::write QQmlProperty::write(object, "height", 500); // read the height use QQmlProperty::read qDebug() << "height value is" << QQmlProperty::read(object, "height").toInt(); //设置rect物体的颜色。 QObject *rect = object->findChild<QObject*>("rect"); if(rect) { rect->setProperty("color","yellow"); } window->show(); return app.exec(); }

Window { width: 360 height: 460 signal qmlSignal(string msg,int value) function qmlFunction(msg,val) { console.log(msg,val) return "THIS IS QML Return" } onQmlSignal: { console.log("QML SIGANL FUNCTION",msg,value) var rqml = qmlFunction(msg,value) console.log(rqml) } MouseArea { anchors.fill: parent onClicked: { qmlSignal("Hello World",2) } } }

 Behavior on x { SmoothedAnimation{velocity: 500} } Behavior on y { SmoothedAnimation{velocity: 500} }

import QtQuick 2.0 import QtQuick.Window 2.0 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") color:"gray" Rectangle { // fllowRect 以光滑速度跟随rect  id:fllowRect width: rect.width-20 height:rect.height-20 x:rect.x-5 y:rect.y-5 color:"brown" Behavior on x { SmoothedAnimation{velocity: 500} } Behavior on y { SmoothedAnimation{velocity: 500} } } Rectangle { id:rect width:parent.width/5 height:parent.height/5 color:"black" border.color: "#800030" radius:20 } function zoomIn() { rect.scale += 0.25; } function zoomOut() { rect.scale -= 0.25; } function debugRectSize() // scale do not change rect size  { console.log("rect size is ",rect.width,"|",rect.height) } MouseArea { id:area anchors.fill: rect drag.target: rect drag.axis: Drag.XAndYAxis onPositionChanged: { console.log("rect pos is " ,rect.x,"|" ,rect.y) } onWheel: { if (wheel.modifiers & Qt.ControlModifier) { if (wheel.angleDelta.y > 0) zoomIn(); else zoomOut(); } debugRectSize() } } }

import QtQuick 2.5 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 import QtQuick.Dialogs 1.2 Window { id:root visible: true Column { Button { width: root.width text:"openDialog" onClicked: { simpleDialog.open() } } Button { id:colorButton width: root.width text:"openColorDialog" onClicked: { simpleColorDialog.open() } } Rectangle { id:colorArea width: root.width height:50 border.color: "black" color:simpleColorDialog.color } Button { id:fileButton width: root.width text:"openFileDialog" onClicked: { simpleFileDialog.open() } } } Dialog { function test() { console.log("this is a test") } id: simpleDialog //visible: true title: "Choose a date" standardButtons: StandardButton.Save | StandardButton.Cancel | StandardButton.Yes onAccepted: { console.log("accpet") } onYes: { console.log("yes") } onRejected: { console.log("cancel") this.close() this.test() } } ColorDialog { id:simpleColorDialog showAlphaChannel: true onAccepted: { colorArea.color = this.color } } FileDialog { id:simpleFileDialog title: "Please choose a file" folder: shortcuts.home nameFilters: "*.o,*.cpp" onAccepted: { console.log("You chose: " + simpleFileDialog.fileUrls) } onRejected: { console.log("Canceled") } } }

import QtQuick 2.0 Rectangle { width: parent.width height: 62 color:"#505050" Text { text: "Visual effects" anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter font.bold: true font.pixelSize: 40 } }

import QtQuick 2.0 import QtQuick.Window 2.0 import "Utils.js" as Utils Item { width: parent.width height: 100 Rectangle { id:rect anchors.fill: parent border.color: "brown" border.width: 1 anchors.margins: 5 radius:5 /* MouseArea { id:areaMouse anchors.fill: rect hoverEnabled: true onEntered: { rect.scale = 1.02 border.color = "black" } onExited: { border.color = "brown" rect.scale = 1 } }*/ Text { text: name anchors.verticalCenter: parent.verticalCenter } Text { text:p anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right } color:c Image { id:mainImage source:s x:parent.x + 100 width:parent.width-200 height:parent.height fillMode: Image.PreserveAspectCrop clip: true onStatusChanged: { if(status === Image.Error) { source = Utils.fallBackImage } } scale:status===Image.Ready?1:0 Behavior on scale { NumberAnimation { from:0 to:1 duration: 1200 easing.type:Easing.OutBack } } /* //only construct when borning NumberAnimation on scale { from:0 to:1 duration: 1000 easing.type: Easing.OutBounce } NumberAnimation on opacity { from:0 to:1 duration: 1000 easing.type: Easing.OutBack }*/ } /* Behavior on scale // { NumberAnimation { from:0.9 to:1 duration: 1200 easing.type: Easing.OutBack } }*/ } }

import QtQuick 2.0 ListModel { ListElement { name:"apples" c:"red" p:2.02 s:"images/1.png" } ListElement { name:"Oranges" c:"orange" p:2.02 s:"images/2.png" } ListElement { name:"Grapes" c:"purple" p:2.02 s:"images/3.png" } ListElement { name:"Houdini" c:"Yellow" p:2.02 s:"images/4.jpg" } }

import QtQuick 2.0 Rectangle { width: 960 height: 460 color: "lightsteelblue" ListView { width:parent.width height:parent.height header: Header { } model: mod //delegate:Text //{ // text: name //}  delegate:MyDel { } } MyMod { id:mod } }

 Button { width: parent.width text: "Add Random accpet" onClicked: {/* name:"Houdini" c:"Yellow" p:2.02 s:"images/4.jpg"*/ var element = {"name":"TTTT","c":"gray","p":2.01,"s":"images/4.jpg"} mod.append(element) } } Button { y:20 width: parent.width text:"remove all" onClicked: { mod.clear() } }

import QtQuick 2.6 import QtQuick.Window 2.2 import QtQuick.Controls 1.0 import QtQuick.Dialogs 1.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Rectangle // header  { id:menuRect width: parent.width height: 100 color:"black" border.color: "black" border.width: 1 radius:5 anchors.margins: 20 property int rad: 10 property int borderw: 1 Rectangle { id:red color:"red" width: 60 height: 60 x:(parent.width - width)/2-100 y:(parent.height - height)/2  radius:parent.rad border.width: parent.borderw MouseArea { anchors.fill: parent onClicked: line.pcolor = parent.color } } Rectangle { id:green color:"green" width: 60 height: 60 x:red.x+70 y:(parent.height - height)/2  radius: parent.rad border.width: parent.borderw MouseArea { anchors.fill: parent onClicked: line.pcolor = parent.color } } Rectangle { id:blue width: 60 height: 60 color:"blue" x:green.x+70 y:(parent.height - height)/2  radius: parent.rad border.width: parent.borderw MouseArea { anchors.fill: parent onClicked: line.pcolor = parent.color } } Rectangle { id:yellowRect width: 60 height: 60 color:"yellow" x:blue.x+70 y:(parent.height - height)/2  radius: parent.rad border.width: parent.borderw MouseArea { anchors.fill: parent onClicked: line.pcolor = parent.color } } } Rectangle //vis the paint  { anchors.fill: line color:"gray" border.color: "brown" border.width: 2 } FileDialog { sidebarVisible: true id:saveDialog title: "Please choose a file" folder: shortcuts.home selectExisting: false onAccepted: { var path = Qt.resolvedUrl(saveDialog.fileUrl) console.log("You chose: " + path ) } onRejected: { console.log("Canceled") } } Canvas { id:line width: parent.width height: parent.height-100 y:100 property int lineWidth: 1 property int lastX: 0 property int lastY: 0 property int isPaint: 0 property string pcolor: "black" onPaint: { if(isPaint === 1) { var ctx =getContext("2d") ctx.lineWidth = lineWidth ctx.strokeStyle = pcolor ctx.fillRule = Qt.WindingFill ctx.createPattern(Qt.Dense3Pattern) ctx.beginPath(); ctx.moveTo(lastX,lastY) lastX = area.mouseX lastY = area.mouseY ctx.lineTo(lastX,lastY) ctx.stroke() } } MouseArea { id:area anchors.fill: parent anchors.margins: 2 acceptedButtons:Qt.LeftButton | Qt.RightButton onPressed: { if(mouse.button === Qt.LeftButton) { line.isPaint = 1 line.lastX = mouse.x //instead use->mouseX line.lastY = mouseY //mouseY console.log("pressed"); } else { if( mouse.modifiers & Qt.ControlModifier && mouse.button === Qt.RightButton ) // CTRL+RIGHTBUTTON delete the Canvas  { console.log("Clear content") var ctx = line.getContext("2d") ctx.reset() line.requestPaint() ctx.reset() line.isPaint = 0 } if( mouse.modifiers & Qt.AltModifier && mouse.button === Qt.RightButton ) // Clt+RIGHTBUTTON save  { saveDialog.open() } } } onPositionChanged: { if(line.isPaint===1) { console.log("move") line.requestPaint() } mouseRoundArea.x = mouseX - mouseRoundArea.width/2 mouseRoundArea.y = mouseY - mouseRoundArea.height/2  } onReleased: { if(mouse.button === Qt.LeftButton) { console.log("released") line.isPaint = 0 } } hoverEnabled :true onEntered: { mouseRoundArea.scale = 1 mouseRoundArea.x = mouseX - mouseRoundArea.width/2 mouseRoundArea.y = mouseY - mouseRoundArea.height/2  } onExited: { mouseRoundArea.scale = 0 } onWheel: { if (wheel.modifiers & Qt.ControlModifier) { if (wheel.angleDelta.y > 0) { mouseRoundArea.width +=1 mouseRoundArea.height +=1 mouseRoundArea.radius = mouseRoundArea.width line.lineWidth +=1 } else { mouseRoundArea.width -=1 mouseRoundArea.height -=1 mouseRoundArea.radius = mouseRoundArea.width line.lineWidth -=1 if(line.lineWidth<=0) { line.lineWidth = 1 } } } } Rectangle { id:mouseRoundArea width: 20 height: 20 border.width: 2 radius:20 opacity: 0.6 } } } }

 Component.onCompleted: { // Do something interesting here... console.log(fileName)

windeployqt helloqml.exe --qmldir D:\plugin_dev\Houdini\PlayblastForHoudini\HoudiniPlayBlast\HoudiniPlayBlast

onPaint: { var ctx = getContext("2d"); ctx.reset(); var cx = width / 2; var cy = height / 2; ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.fillStyle = "black"; ctx.moveTo(cx, cy); ctx.arc(cx, cy, width / 2, 0, Math.PI*2, false); ctx.closePath(); ctx.stroke(); ctx.fill(); }

/* onPaint: { var ctx = getContext("2d"); ctx.reset(); var centreX = width / 2; var centreY = height / 2; ctx.beginPath(); ctx.fillStyle = "black"; ctx.moveTo(centreX, centreY); ctx.arc(centreX, centreY, width / 4, 0, Math.PI * 0.5, false); ctx.lineTo(centreX, centreY); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "red"; ctx.moveTo(centreX, centreY); ctx.arc(centreX, centreY, width / 4, Math.PI * 0.5, Math.PI * 2, false); ctx.lineTo(centreX, centreY); ctx.fill(); }*/

import QtQuick 2.0 Item { id:main width: 320; height:50; x:100; y:100; Rectangle{ anchors.fill: parent color:Qt.rgba(0.1,0.5,0.5,1); } Canvas { id:fluidContainer anchors.fill: parent property int cy: 0; property int cx: 0; property int radius: 0; property color flowColor: Qt.rgba(1,0.5,1,0.9); onRadiusChanged: { requestPaint(); } onCxChanged: { requestPaint(); } onCyChanged: { requestPaint(); } onPaint: { var ctx = getContext("2d"); ctx.reset(); ctx.strokeStyle = "red"; ctx.beginPath(); ctx.fillStyle = flowColor; ctx.moveTo(cx, cy); if(radius<0)radius=0; ctx.arc(cx, cy, radius, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } } MouseArea{ anchors.fill: main; onClicked: { if(fluidContainer.visible===false){ fluidContainer.visible=true; } var x = mouse.x; var y = mouse.y; fluidContainer.cx = x; fluidContainer.cy = y; ani.start(); } } PropertyAnimation{ id:ani target: fluidContainer; property: "radius"; from:0; to:main.width; duration:600; easing.type: Easing.OutSine; onStopped: { fluidContainer.visible=false; } } }