qt quick 入门编程

简介: 注:本代码只是 qml 语言代码 鼠标键盘事件 import QtQuick 2.4import QtQuick.Window 2.2/* ggg */Window { visible: true; width:10*100; Text { id:hello; //anchors.fill: parent;

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


目录
相关文章
|
1月前
|
存储 网络协议 C语言
【C/C++ 串口编程 】深入探讨C/C++与Qt串口编程中的粘包现象及其解决策略
【C/C++ 串口编程 】深入探讨C/C++与Qt串口编程中的粘包现象及其解决策略
80 0
|
1月前
|
数据可视化 JavaScript 前端开发
Qt Quick 定时技巧全攻略:从底层原理到高级应用(二)
Qt Quick 定时技巧全攻略:从底层原理到高级应用
42 0
|
1月前
|
Linux 数据处理 C++
Linux系统编程 C/C++ 以及Qt 中的零拷贝技术: 从底层原理到高级应用(一)
Linux系统编程 C/C++ 以及Qt 中的零拷贝技术: 从底层原理到高级应用
77 0
|
1月前
|
监控 前端开发 JavaScript
Qt Quick调试之道:跟踪、输出与打印信息的全面攻略
Qt Quick调试之道:跟踪、输出与打印信息的全面攻略
60 0
|
1月前
|
编解码 容器
QML/Qt Quick anchors.fill 的使用(二)
QML/Qt Quick anchors.fill 的使用
32 0
|
1月前
|
存储 Linux API
Linux系统编程 C/C++ 以及Qt 中的零拷贝技术: 从底层原理到高级应用(三)
Linux系统编程 C/C++ 以及Qt 中的零拷贝技术: 从底层原理到高级应用
31 1
|
1月前
|
消息中间件 Linux 数据处理
Linux系统编程 C/C++ 以及Qt 中的零拷贝技术: 从底层原理到高级应用(二)
Linux系统编程 C/C++ 以及Qt 中的零拷贝技术: 从底层原理到高级应用
32 1
|
1月前
|
开发框架 UED 开发者
QML(Qt Quick) 按钮设计指南
QML(Qt Quick) 按钮设计指南
73 0
|
1月前
|
监控 JavaScript 测试技术
Qt Quick 定时技巧全攻略:从底层原理到高级应用(一)
Qt Quick 定时技巧全攻略:从底层原理到高级应用
61 0
|
1月前
|
前端开发 JavaScript UED
深度解析Qt背景设计:从基础到高级,从Widget到Quick(三)
深度解析Qt背景设计:从基础到高级,从Widget到Quick
74 0

热门文章

最新文章

推荐镜像

更多