Qt-第一个QML程序-2-关键代码分析，TEXT，Image，Mouseare

qml语言开始写的时候有点不习惯，后面用的多了感觉很好，很顺手，用于快速搭建项目界面，真的很好。

目前用到的还是比较简单的

隐藏标题栏，而依附任务栏

flags: Qt.Window | Qt.FramelessWindowHint

父级部分

id:root    visible: true    width: 960*0.7    height: 1280*0.7    title: qsTr("QML程序演示")    color: "#777777"    flags: Qt.Window | Qt.FramelessWindowHint

一般我会把父级设置为root，也就是根

后面是设置标题，背景颜色，隐藏标题栏

文本部分

Text    {        id:title        anchors.top:parent.top        anchors.topMargin: 5        anchors.left: parent.left        anchors.leftMargin: 5        font.pointSize: 12        font.family: "微软雅黑"        color: "#ffffff"        text:qsTr("QML程序演示")    }

这部分代码就是我程序中的Title部分，id是这个文本的唯一名字，而且不可重名，在任何地方都可以通过id来使用该模块

        anchors.top:parent.top        anchors.topMargin: 5        anchors.left: parent.left        anchors.leftMargin: 5

这四行代码就是这个Title的布局，始终保持在据父级上面5像素，左面5像素的位置显示

        font.pointSize: 12        font.family: "微软雅黑"        color: "#ffffff"        text:qsTr("QML程序演示")

这四行代码就是设置字体大小，字体，颜色，文本可容

中心女朋友的照片代码

Image {        id: background        width: 961*0.6        height: 1280*0.6        anchors.centerIn: parent        source: "qrc:/Images/honey.jpg"    }

Image可以支持Jpg，png，SVG等格式的素材，同时设置了这个Image的大小，这里可能有点特殊就是后面有0.6，其实完全可以不用这么，可以设置他的缩放，不过我像这么写

anchors.centerIn: parent

父级中心布局

source: "qrc:/Images/honey.jpg"

加载资源文件

鼠标拖拽界面部分

这里参考了网友给出的方案，可以具体内容可以参考这位网友的文章

http://blog.csdn.net/xuwq2015/article/details/46681193

    property int mainWindowX //用来存储主窗口x坐标    property int mainWindowY //存储窗口y坐标    property int xMouse //存储鼠标x坐标    property int yMouse //存储鼠标y坐标    MouseArea    {        id:move        height: 30        width: parent.width        anchors.top:parent.top        anchors.left: parent.left        anchors.right: parent.right        acceptedButtons: Qt.LeftButton //只处理鼠标左键        //        onPressed:        //        { //接收鼠标按下事件        //            xMouse = mouseX        //            yMouse = mouseY        //            mainWindowX = root.x        //            mainWindowY = root.y        //        }        property point clickPos: "0,0"        onPressed:        { //接收鼠标按下事件            clickPos  = Qt.point(mouse.x,mouse.y)        }        onPositionChanged:        { //鼠标按下后改变位置            //            root.x = mainWindowX + (mouseX - xMouse)            //            root.y = mainWindowX + (mouseY - yMouse)            //鼠标偏移量            var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)            //如果mainwindow继承自QWidget,用setPos            root.setX(root.x+delta.x)            root.setY(root.y+delta.y)        }    }

生下就是关闭按钮部分，下篇见

源码连接：http://download.csdn.net/detail/z609932088/9802022

GitHub：https://github.com/DreamLifeOffice/MyQmlProject