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创建应用程序是十分简单的。考虑到你的使用习惯,我们编写了两套教程来实现两个相似的应用程序,但是使用了 不同的方法。在开始...
  • chenlong12580
  • chenlong12580
  • 2013年02月03日 16:24
  • 48587

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

  Qt 5入门指南之Qt Quick编程示例           使用Qt创建应用程序是十分简单的。考虑到你的使用习惯,我们编写了两套教程来实现两个相似的应用程序,但是使用了 不同的方法。...
  • cbacq
  • cbacq
  • 2016年01月07日 17:03
  • 1746

为什么写作《Qt Quick核心编程》

我把这一切记录在这里,我想说,爱过,写过,失落过,高兴过,低徊过,迷惘过,不管怎样,我从未对那些流过的汗水、付出的精力后悔过,如果还有机会,我还愿意再这样走上一遭。...
  • foruok
  • foruok
  • 2014年11月29日 09:55
  • 6421

Qt Quick核心编程从入门到精通

本文是个推荐文章,推荐foruok博主的Qt quick 核心编程的系列经典编程!
  • luopeiyuan1990
  • luopeiyuan1990
  • 2015年01月21日 20:59
  • 4617

《Qt Quick核心编程》勘误

第一本系统讲述Qt Quick(QML)的技术书籍,勘误表……
  • foruok
  • foruok
  • 2014年12月18日 07:34
  • 6724

详解 Qt Quick 开始使用QML编程

http://mobile.51cto.com/symbian-271273.htm
  • chenyijun
  • chenyijun
  • 2014年04月19日 09:54
  • 1242

QT5新手教程(1)QT5+VS2013

由于工作需要,要做一个新项目,而且不能再用qt338版本(公司产品特殊,稳定性要求极高)。开始研究QT5,今天开始在工作不忙的时候陆续更新。 如果你以前用过QT3或者4请首先转换一下思维,QT5是纯面...
  • fox801501
  • fox801501
  • 2016年05月29日 13:22
  • 4217

Qt Quick 简单教程

上一篇《Qt on Android: Qt Quick 之 Hello World 图文详解》我们已经分别在电脑和 Android 手机上运行了第一个 Qt Quick 示例—— HelloQtQui...
  • foruok
  • foruok
  • 2014年06月09日 08:26
  • 42896

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

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

Qt Quick常用的控件..

Qt Quick Controls模块提供了一组可以在Qt Quick中建立完整接口的控件(用于创建用户界面的QML类型)。这些QML类型与Qt Quick和Qt Quick Layouts配...
  • nowhaha
  • nowhaha
  • 2015年03月13日 11:43
  • 681
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:qt quick 入门编程
举报原因:
原因补充:

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