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

[align=center]QML添加自制窗口系统最小化和关闭按钮[/align]

1.环境

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

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

3.进行共性按钮编码

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

import QtQuick 2.0

Rectangle {
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.0
import "../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.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.0
import "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文件目录”，即可使用

 

[align=center]
[/align]