P1-QML-Window介绍

小瑞的学习笔记

已于 2024-08-01 12:43:45 修改

阅读量223

点赞数

分类专栏： QML 文章标签： qt

于 2023-07-12 20:17:15 首次发布

本文链接：https://blog.csdn.net/m0_60529319/article/details/131689480

版权

QML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文展示了如何使用QtQuick2.9创建一个窗口，设置了窗口的属性如大小、位置和不透明度，并通过信号槽机制处理按钮点击和焦点变化事件。文中还包含了自定义属性和控件样式的设定。

摘要由CSDN通过智能技术生成

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true              // 是否隐藏
    width: 640                 // 宽度
    height: 480                // 高度
    title: qsTr("Hello World") // 设置应用程序名称

    /* 以屏幕左上角为原点，设置应用程序的坐标为（50，50）*/
    x: 300;
    y: 300;

    /* 限制应用程序的宽度高度 */
    minimumHeight: 400;
    minimumWidth:  600;
    maximumHeight: 600;
    maximumWidth:  800;

    /* 设置不透明度为%99 */
    opacity: 0.99;

    /* Qml中信号槽的实现方式:1.声明信号，2.根据信号函数名写槽函数，3.当信号触发的时候，槽函数会被调用 */
    signal mySig();

    onMySig: {
        // ...
    }

    /* 当应用程序宽度被改变的时候，会调用这个槽函数（对于我们控件中任何一个属性，都会带有属性修改槽函数）*/
    onWidthChanged: {
        console.log("widget",width);// 打印变化的宽度
    }

    /* 当创建自定义属性的时候，也会自动创建属性修改的槽函数 */
    property int myValue: 100;
    onMyValueChanged: {
        // ...
    }

    /* 创建一个按钮，并且创建他的属性 */
    Button{
        id: btn1;
        x: 100;
        width: 50;
        height: 50;
        focus: true; // 默认是焦点
        objectName: "btn1";
        background: Rectangle{
            border.color: btn1.focus ? "red" : "black"
        }
        onClicked: {
            /* 点击时，打印 */
            console.log("btn1 clicked")
        }
        Keys.onLeftPressed: {
            /* 左键点击时,btn1就是焦点*/
            btn1.focus = true;
        }
    }

    Button{
        id: btn2;
        x: 200;
        width: 50;
        height: 50;
        objectName: "btn2";
        background: Rectangle{
            border.color: btn2.focus ? "red" : "black"
        }
        onClicked: {
            console.log("btn2 clicked")
        }
        Keys.onLeftPressed: {
            btn2.focus = true;
        }
    }

    /* 它保存了整个应用程序中当前获取焦点的控件，通过这个函数找到应用程序焦点 */
    onActiveFocusItemChanged: {
        console.log("active focus item changed", activeFocusItem, "object name:", activeFocusItem.objectName);
    }
}