QT QML初体验随笔之QQuickView(3)

来源：互联网发布：windows 10 ie10 编辑：程序博客网时间：2024/05/16 09:26

QML添加自制窗口系统最小化和关闭按钮

1.环境

本文章是在QT QML初体验随笔之QQuickView(2)基础上进行修改

2.添加新的按钮基类的QML文件

3.进行共性按钮编码

按钮的图片切换三种姿态：正常，鼠标悬停和按下状态
按钮鼠标操作：鼠标划入，鼠标划出，鼠标按下，鼠标释放
按钮按下后，发送信号

import QtQuick 2.0Rectangle {    id: pushBtn;    // 内部调用对象名称    // 初始固有属性配置    width: 27;    height: 20;    color: "#00000000";    //    // 新添属性    // 初始新添image路径属性配置    property string imgCurrent: "";    property string imgNormal: "";    property string imgHover: "";    property string imgPressed: "";    //    // 信号属性配置    signal clicked();    // 新……    // 按钮image设置    Image {        source: imgCurrent;    }    // 鼠标活动状况    MouseArea {        anchors.fill: parent;   // 覆盖区域：整个pushBtn        // 悬停        hoverEnabled: true;     // 启用鼠标悬停        onEntered: {    // 悬停进入            parent.imgCurrent == parent.imgPressed? parent.imgCurrent = parent.imgPressed: parent.imgCurrent = parent.imgHover;        }        onExited: {     // 悬停离开             parent.imgCurrent == parent.imgPressed? parent.imgCurrent = parent.imgPressed: parent.imgCurrent = parent.imgNormal;        }        // 按下        onPressed: {            parent.imgCurrent = parent.imgPressed;        }        // 弹起        onReleased: {            parent.imgCurrent = parent.imgNormal;            parent.clicked();       // 鼠标按下发射clicked信号        }    }}

4.添加新的按钮子类QML文件

5.进行子类按钮布局编码

进行最小化按钮和关闭按钮的图片源获取
添加最小化按钮和关闭按钮的具体化信号

import QtQuick 2.0import "../Base"Row {    id: sysBtns;    // 内部调用对象名称    anchors.rightMargin: 10;      // 右侧空隙：10个像素    // 信号属性配置    signal min();    signal close();    // 系统按钮图片目录属性配置    property string imgPath: "../Base_1/Image/";    // 系统按钮（从左到右顺序添加）    PushBtn_Kingmei {        id: minBtn;     // 内部调用对象名称        // 最小化按钮image源        imgNormal: imgPath + "min_normal.png";        imgPressed: imgPath + "min_pressed.png";        imgHover: imgPath + "min_hover.png";        imgCurrent: imgNormal;        // 槽        onClicked: {            parent.min();        }    }    PushBtn_Kingmei {        id: closeBtn;       // 内部调用对象名称        // 关闭按钮image源        imgNormal: imgPath + "close_normal.png";        imgPressed: imgPath + "close_pressed.png";        imgHover: imgPath + "close_hover.png";        imgCurrent: imgNormal;        // 槽        onClicked: {                        parent.close();        }    }}

6.在main.qml中将测试按钮进行修改

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Controls.Styles 1.0import "QML_Kingmei/Base_1"import "QML_Kingmei/Base"Rectangle{    id: mainWnd;    height: 600;    width: 960;    color: "green";    border.width: 2;    border.color: "#ff808080";//    border.color: "#ffc0c0c0";//    radius: 10;    opacity: 1;        // 区分颜色透明度和窗口透明度    SysBtns_Kingmei {        id: sysBtns;        y: sysBtns.anchors.rightMargin - 4;        anchors.right: parent.right;        // 槽        onMin: {           wndCtrl.showMinimized();        }        onClose: {           wndCtrl.close();        }    }}

注：生成的QML文件名首字母要大写，因为在另一个QML中依赖此QML元素名即QML文件名；如果两个QML在同一目录，不需要任何操作即可引用，如果在不同目录下，需要以当前编码的QML文件为基准，import “另一个QML文件目录”，即可使用

阅读全文

0 0