QT之独立标题栏

QT之独立标题栏

应用背景

我们在只用QT设计界面的时候，QT会默认为我们带上边框以及标题栏。而在我们真正应用当中我们却不想使用QT默认效果，为什么呢？相信做过的伙伴们都应该知道，QT默认效果虽好，但是界面不友好哇，不友好怎么办呢，去掉嘛，我们自己设计一个Beautiful的标题栏出来。

QT标题栏效果图

我们先来看下效果图 :

当然我这里UI不是很专业，这里只是做个示范哈~你要想做更美丽的界面出来，慢慢调也是可以的哈~等你做UI的时候，就会明白我说的慢慢调的意思了，嘿嘿~

不知你有没有注意标题栏的右上角最小化和最大化，这里说了，是自定义标题栏，当然这也是自己定义的两个按钮，我们也一起看下效果。

QT标题栏效果图-续

是不是有种时曾相识的感觉，没错，你的感觉是对的，这个效果，和图片我使用的是QQ的同一套图片。以及提示最小化，关闭。OK,接下来,让我们走上代码之旅。

上代码

我们先把标题栏UI设计好

#define TITLE_BACK_COLOR QColor(135, 206, 250)

TitleWidget::TitleWidget(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    setWindowFlags(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);
    connect(ui.sysMin, SIGNAL(clicked()), this, SLOT(onMin()));
    connect(ui.sysClose, SIGNAL(clicked()), this, SLOT(onClose()));
}

TitleWidget::~TitleWidget()
{}

void TitleWidget::onMin()
{
    emit signalMin();
}

void TitleWidget::onClose()
{
    emit signalClose();
}

void TitleWidget::SetTitleText(const QString& titleText)
{
    ui.TitleName->setText(titleText);
}

void TitleWidget::SetTitleIcon(const QString& icon)
{
    ui.Titleicon->setPixmap(QPixmap(icon).scaled(ui.Titleicon->size(), Qt::IgnoreAspectRatio, Qt::FastTransformation));
}

void TitleWidget::paintEvent(QPaintEvent *e)
{
    QPainter p(this);
    QColor colorBackGround = TITLE_BACK_COLOR;
    p.setRenderHint(QPainter::Antialiasing);//抗锯齿
    p.setBrush(colorBackGround);
    p.setPen(Qt::NoPen);
    p.drawRoundedRect(0, 0, width() - 1, height() - 1, 2, 2);
}

浅谈独立标题栏的封装

在这里,我简单的交流下~我们为什么叫独立标题栏,而不叫标题栏呢, 这里就是我们说的封装.我们在开发一个应用中,我的窗口一般情况下,都不止一个, 而这时如果我把这个设计好的标题栏嵌死在一个界面上, 那我下面的界面的标题栏怎么办? 复制过来?NO,NO,NO。而如果我把这个标题栏单独的设计出来,再我需要的页面上我就嵌上,不需要我就不嵌。达到可拆可嵌,我个人建议是,我们的标题栏封装成一个基类。

附上我的封装标题栏基类

BasicWidget::BasicWidget(QWidget *parent)
    : QWidget(parent)
    , m_titleWidget(nullptr)
{
    initTitleWidget();
    this->setStyleSheet(CHINESE_FONT_STYLE);
}

BasicWidget::~BasicWidget()
{

}

void BasicWidget::initTitleWidget()
{
    m_titleWidget = new TitleWidget(this);
}

void BasicWidget::setTitleWidget(const QString& qsTitleName, const QString& qsTitleIcon)
{
    connect(m_titleWidget, SIGNAL(signalClose()), this, SLOT(onShowClose()));
    connect(m_titleWidget, SIGNAL(signalMin()), this, SLOT(onShowMin()));
    m_titleWidget->SetTitleIcon(qsTitleIcon);
    m_titleWidget->SetTitleText(qsTitleName);
}

void BasicWidget::onShowClose()
{
    close();
}

void BasicWidget::onShowMin()
{
    showMinimized();
}

void BasicWidget::onShowNormal()
{
    show();
    activateWindow();
}
//这样我只要把这个基类写好，我只需要在我需要的页面上继承即可，无须冗余。

代码下载

关于源码，大家放心，我会再这期把整个Demo讲解完，整个附上。只需持续关注我·嘿嘿~O(∩_∩)O

结尾

只为记录，只为分享! 愿所写能对你有所帮助。Good Good Study, Day Day Up!