qt quick 入门编程

注：本代码只是 qml 语言代码

鼠标键盘事件

import QtQuick 2.4
import QtQuick.Window 2.2
/*
  ggg
  */
Window {
    visible: true;
    width:10*100;
    Text {
        id:hello;
        //anchors.fill: parent;
        color: "red";
        text:"hello_world";

        font{
            pointSize: 20;//相当于font.pointSize:20;
            bold:true;

        }

        /*
          键盘事件
          Keys按键 必须附加在Item对象里
          */
        Keys.onLeftPressed: x-=10;//左移动
        Keys.onRightPressed: x+=10;
        Keys.onUpPressed: y-=10;
        Keys.onDownPressed: y+=10;
        focus:true;//拥有焦点的节点才会触发键盘事件



    }
    /*
    MouseArea{
        anchors.fill: parent;
        onClicked: {
            hello.text="hello_lhy";
        }
    }
    */
    MouseArea{//鼠标事件
        anchors.fill: parent;
        acceptedButtons: Qt.LeftButton|Qt.RightButton
        onClicked: {//onclick信号
            if(mouse.button==Qt.LeftButton){
                hello.text="Hello left";
            }
            else{
                hello.text="Hello right";
            }
        }
        onDoubleClicked: {
            if(mouse.button==Qt.LeftButton){
                hello.text="Hello leftDouble";
            }
            else{
                hello.text="Hello rightDouble";
            }
        }
    }

}

item节点举例

import QtQuick 2.4
import QtQuick.Window  2.2
import QtQuick.Controls 1.3

Window {
    width: 500
    height: 500;
    Text{
        x:100;
        y:200;
        text:"I am a text";
        color:"red";
        font.pixelSize: 24;
        rotation: 45;

    }
    Button{
        y:100;
        text:"A Button";
        onClicked: {
            console.debug("ddddd");
        }
    }
    Rectangle{//矩形
        y:300;
        width:100;
        height:30;
        border.width: 2;
        border.color: "blue";
        radius: 8;

        TextInput{//输入框，套在矩形中，可以调整编辑框效果
            id:phone;
            focus:true;
            width:100;
            height:20;
            x:10;
            y:10;

        }
    }
    Image{
        x:100;
        width:100;
        height:100;
        source: "file:///C:/a.png";
        fillMode:Image.PreserveAspectFit;

    }

}

信号与槽

import QtQuick 2.4
import QtQuick.Window  2.2
import QtQuick.Controls 1.3
Window{
    width: 100
    height: 62;
    id:win;
    Text{
        id:txt;
        text:"solt";
    }
    onWidthChanged: widthChanged();//信号处理器，使用方法
    onHeightChanged: {//信号处理器，使用表达式
         txt.y=(win.height-txt.height)/2;
    }

    Button{
        id:btn;
        x:0;
        y:0;
        text:"Quit";
    }

    function widthChanged(){//js自定义方法
        txt.x=(win.width-txt.width)/2;
    }

    function quitFunc()//退出
    {
        Qt.quit();
    }

    /*
      信号与槽
      */
    /*
    Component.onCompleted: {
        btn.clicked.connect(quitFunc);
    }
    */
    Connections{
        target:btn;//对象id
        onClicked:quitFunc();//信号处理器
    }
}

定位 anchors

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3

Rectangle {
    width: 480;
    height: 320;
    visible:true;
    Rectangle{
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.leftMargin: 8;//左边距
        anchors.topMargin: 6;//上边距
        width:60;
        height:40;
        color:"red";
    }
    Rectangle{
        id:centerRect;//id
        anchors.centerIn: parent;
        width:60;
        height:40;
        color:"yellow";
    }

    Rectangle{
        anchors.top: centerRect.bottom;//相对于centerRect
        anchors.horizontalCenter: centerRect.horizontalCenter;//相对于centerRect
        anchors.horizontalCenterOffset: 10;//相对于中线右移
        width:60;
        height:40;
        color:"blue";
        border.width: 1;
        border.color: "black";
    }
    Rectangle{
        anchors.bottom: parent.bottom;
        anchors.horizontalCenter: parent.horizontalCenter;//相对于父
        anchors.bottomMargin: 12;

        width:60;
        height:40;
        color:"green";
        border.width: 1;
        border.color: "green";
    }
}