Qt的GUI功能非常灵活,Metro风格也越来越受欢迎,那么如何使用Qt实现一个Metro风格的界面?
有两点最重要:一是使用Metro风格的素材,二是加入Metro风格的控制。博主近期将之前写过的一个Metro风格的框架开源了,你只需要下载源码,继承QMetro类就可以实现自己的Metro风格界面了。首先,确保你的Qt版本在5.2以上,那么,我们开始吧。
特别提醒,在使用博主代码前,你需要添加几个图标ico资源,因为博主使用的Metro素材包受版权限制不能放在开源平台上,所以你的代码回提示缺少资源或者按钮图标显示不出来等等,你最好看下代码,就是最大化、最小化、任务栏托盘那几个图标。
打开工程,其实会发现里面有四个类:QMetro、QMetroWindow、QDialog、QMetroMainWindow,首先说明这四个类的关系:
QMetro->QMetroWindow->QDialog
QMetroWindow->QMetroMainWindow
就是说QDialog类和QMetroMainWindow类都继承自QMetroWindow类。
QMetro类是一个可以拖动,但无法改变大小的对话框,这个对话框就是去掉了一般对话框的边框,加入了鼠标事件。
QMetroWindow是一个可以拖动,也可以改变大小的对话框,右上角加入了Metro风格的按钮。
QDialog类是一个可以拖动,可以改变大小的对话框,可以在构造时传入参数选择不同的Metro风格。
QMetroMainWindow类是一个主对话框类,其添加了全盘按钮,并且运行时会有任务栏托盘,最小化是会最小化到托盘。如果你用到这个类,你最好添加素材选择任务栏托盘图标,否则任务栏只会有提示文字而看不到托盘图标。
全部的代码在博主的github上,以下提供QMetro类的代码。
#include "qmetro.h" QMetro::QMetro(QWidget *parent) : QMainWindow(parent) { this->setWindowFlags(Qt::FramelessWindowHint); isLeftPressDown = false; hlSysLayout = new QHBoxLayout; hlSysLayout->addStretch(1000);//保证以后插入的按钮(最大化、最小化等)都显示在最右边 } QMetro::~QMetro() { } void QMetro::mousePressEvent(QMouseEvent *event) { if (!isFullScreen()) { switch (event->button()) { case Qt::LeftButton: isLeftPressDown = true; dragPosition = event->globalPos() - this->frameGeometry().topLeft(); break; default: break; } } } void QMetro::mouseMoveEvent(QMouseEvent *event)//通过鼠标时间实现空白区域拖动 { if (!isFullScreen()) { QPoint gloPoint = event->globalPos(); QRect rect = this->rect(); QPoint tl = mapToGlobal(rect.topLeft()); QPoint rb = mapToGlobal(rect.bottomRight()); if (!isLeftPressDown) { //this->region(gloPoint); } else { move(event->globalPos() - dragPosition); event->accept(); } } } void QMetro::mouseReleaseEvent(QMouseEvent *event) { if (!isFullScreen()) { if (event->button() == Qt::LeftButton) { isLeftPressDown = false; { this->releaseMouse(); this->setCursor(QCursor(Qt::ArrowCursor)); } } } } void QMetro::createSystemButton(QPushButton* (&pushbutton), QIcon ico) //右上角的系统按钮,最大化,最小化等 { pushbutton = new QPushButton(this); pushbutton->setFlat(true); pushbutton->setMaximumSize(20, 20); pushbutton->setMinimumSize(20, 20); pushbutton->setIcon(ico); hlSysLayout->addWidget(pushbutton); hlSysLayout->addStretch(1); pushbutton->raise(); }
最后还是特别强调下,中间一些资源相关的东西需要修改。