Qt求学路1

最新推荐文章于 2024-01-02 22:07:43 发布

漫慢求知路

最新推荐文章于 2024-01-02 22:07:43 发布

阅读量262

点赞数

分类专栏： qt学习文章标签： qml qt 切换图片 Keys事件

本文链接：https://blog.csdn.net/qq_37069563/article/details/77447575

版权

qt学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最近学到QML，想实现一个切换焦点，背景图片随之改变的Demo，先给出展示：

打开QtCreator创建QML项目，在网上找三张符合主题的图片，在“资源\qml.qrc\/"目录下创建文件夹Images，把三张图片放进去，在编辑器中点右键添加已有文件，把它们加进资源列表里。

然后新建Game.qml,Movie.qml,Music.qml文件,定义宽、高、初始颜色等一些属性，下面举Music.qml的代码为例：

import QtQuick 2.0
import "limit.js" as Logic                     //导入JS文件，后面会讲
Rectangle {
    id:music                                   //设定id值方便本文档内部调用
    width:80
    height:80
    color:focus ? "green" : "gray"            //三目元算符。聚焦时颜色为绿，不聚焦时颜色为灰
    radius:10                                 //设定圆角矩形的弧度
    scale:focus ? 1 : 0.8                     //聚焦时变大， 1 和 0.8 是比例
    focus:true                                //默认聚焦对象
    KeyNavigation.tab: movie                  //按tab键聚焦到id为movie的元素
    Text{                                     //设定文本的属性
        anchors.centerIn: parent
        font.pointSize: 12
        text:"MUSIC"
        color:"yellow"

    }

    onActiveFocusChanged: {                 //焦点改变时触发事件
        if(Logic.func()>=2){                //后面给出js文件内容，这个判断条件自行体会吧
        img.source = "Images/movie.jpg"     //改变背景图片
    }else{
            img.source = "Images/music.jpg"
        }
    }

然后写MainForm.ui.qml文件，它的作用是添加元素到主界面，布局，也可以在这里添加事件

import QtQuick 2.5

Rectangle {
    property alias mouseArea: mouseArea       //属性别名，格式为 property alias 别名:属性名  ，用于在外文档调用
    property alias img: img
    width: 360
    height: 360

    MouseArea {                              //MouseArea元素代表鼠标点击区域，只有在此区域内才能进行鼠标事件
        id: mouseArea   
        anchors.fill: parent                  //anchors是锚，用于给元素定位布局，这句代表填充满父对象，即整个主界面都是鼠标可点击区域
    }


Movie{
id:movie                                     //每个矩形元素默认有六条锚线：left,right,top,bottom,horizontalCenter,verticalCenter
anchors.left:game.right                     //与game右锚线锚定
anchors.top:game.top                        //与game顶锚线锚定
anchors.leftMargin:40                      //左锚边距（与左边元素的距离）
}

    Image{    
        id:img
        anchors.left:parent.left
        anchors.top:parent.top
        width:640
        height:350
        source:"Images/game.jpg"                 //导入图片
        fillMode:Image.PreserveAspectCrop        //设置图片的填充模式（等比缩放）
        clip:true                                 //避免所要渲染的图片超出元素范围
}
        Music{
         id:music
        anchors.left:parent.left
        anchors.bottom:parent.bottom
        anchors.bottomMargin:25
        anchors.leftMargin:150

}
        Game{
         id:game
        anchors.left:music.right
        anchors.top:music.top
        anchors.leftMargin:40
}
    }

limit.js代码如下：

function func() {
    var count = 0 ;
    count++;
    return count;
}

最后修改一下main.qml

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("My desk")

    MainForm {
        anchors.fill: parent
        mouseArea.onClicked: {
            //Qt.quit();
        }
    }
}

主要是标题栏名称自定义和注释掉Qt.quit()，后者不注释的话，点击mouseArea区域就退出程序了。
第一次写，有不明白的或者有异议的欢迎提问，共同探讨。