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