欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

qt quick 入门编程

程序员文章站 2022-07-12 15:47:11
...

注:本代码只是 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";
    }
}