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

原创

开心不认输 2022-03-08 11:33:51 博主文章分类：Qt、QML ©著作权

文章标签 依附任务栏 Qml Qt 界面 github 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者开心不认输的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

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

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

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

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")
    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"

加载资源文件

鼠标拖拽界面部分

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

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)
        }

    }