qt quick 入门编程

原创 2016年08月29日 17:18:21

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


版权声明:GOOD DEEP

相关文章推荐

Qt 5入门指南之Qt Quick编程示例

Qt 5入门指南之Qt Quick编程示例           使用Qt创建应用程序是十分简单的。考虑到你的使用习惯,我们编写了两套教程来实现两个相似的应用程序,但是使用了 不同的方法。在开始...

Qt Quick核心编程

  • 2016-12-13 15:11
  • 68.05MB
  • 下载

Qt Quick 5.2 开发笔记1 -------安装入门 和 发布部署细节

一、环境安装篇 Qt是所见过最容易安装的开发环境,用的是VS2010的环境,机子早已安装。 1.      下载最新的Qt:网址 http://qt-project.org/downloads ...

Qt Quick核心编程1.part2

  • 2016-06-06 17:46
  • 19.56MB
  • 下载

Qt Quick核心编程1.part1

  • 2016-06-06 17:44
  • 50MB
  • 下载

Qt Quick 之 QML 与 C++ 混合编程详解

Qt Quick 技术的引入,使得你能够快速构建 UI ,具有动画、各种绚丽效果的 UI 都不在话下。但它不是万能的,也有很多局限性,原来 Qt 的一些技术,比如低阶的网络编程如 QTcpSocket...

Qt quick 核心编程part1

  • 2016-02-16 10:52
  • 50MB
  • 下载

Qt Quick核心编程

  • 2017-07-12 22:50
  • 92.79MB
  • 下载

Qt Quick 之 QML 与 C++ 混合编程详解

Qt Quick 技术的引入,使得你能够快速构建 UI ,具有动画、各种绚丽效果的 UI 都不在话下。但它不是万能的,也有很多局限性,原来 Qt 的一些技术,比如低阶的网络编程如 QTcpSocket...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)