在前面的分享中，小豆君已经对样式表的知识介绍的差不多了，我们接下来的几节分享中，小豆君和大家一起制作一个有道词典主界面，以巩固下样式表的用法，最后还会分享如何有效的组织样式表代码。
今天先制作标题栏。
下图是原版的有道界面：
新建项目YouDaoWidget，类名为YouDaoWidget，并且继承自QWidget。
ui界面为（标题栏的具体画法在下方）：
1 去掉系统的标题栏
系统给我们提供的标准标题栏有时并不能满足需求，或是并不美观，所以需要自定义一个标题栏。
在构造函数中添加如下代码，去掉标题栏
//去掉标题栏 setWindowFlags(Qt::FramelessWindowHint);
2 编辑自定义的标题栏界面
标题栏最外层，即所有小控件的父控件为QFrame，下表是一个对应关系。
标题栏最外层，即所有小控件的父控件为QFrame，下表是一个对应关系。
序号类名对象名称说明父控件QFrameframe_title最外层控件
其中的搜索框比较复杂，所以把它单独拎出来，制作一个搜索框类。
3 创建搜索框界面类
添加新的ui类SearchEdit，继承自QWidget。
ui界面：
头文件searchedit.h
#ifndef SEARCHEDIT_H #define SEARCHEDIT_H #include <QFrame> namespace Ui { class SearchEdit; } class SearchEdit : public QFrame { Q_OBJECT public: explicit SearchEdit(QWidget *parent = 0); ~SearchEdit(); private: void init(); private: Ui::SearchEdit *ui; }; #endif // SEARCHEDIT_H
源文件seachedit.cpp
#include "searchedit.h" #include "ui_searchedit.h" SearchEdit::SearchEdit(QWidget *parent) : QFrame(parent), ui(new Ui::SearchEdit) { ui->setupUi(this); init(); } SearchEdit::~SearchEdit() { delete ui; } void SearchEdit::init() { //1. 设置查询edit ui->line_search->setStyleSheet("border:none;"); //2. 设置左右侧半圆 ui->label_left->setStyleSheet("QLabel{" "border-image:url(:image/input-left.png);" "}"); ui->label_right->setStyleSheet("QLabel{" "border-image:url(:image/input-rightt.png);" "}"); //3. 设置翻译模式 英汉互译 ui->label_model->setStyleSheet("QLabel{background:white;color:gray;}\ QLabel:hover{color:rgb(244, 76, 76);}"); //4. 设置竖直线 ui->label_vline->setStyleSheet("QLabel{" "background-color:white;color:gray;" "}"); //5. 设置向下按钮 ui->btn_drop->setStyleSheet("QPushButton{" "border:none;background-color:white;" "}"); //6. 设置查询按钮 ui->btn_search->setStyleSheet("QPushButton{" "border:none;background-color:white;" "}"); }
4 初始化标题栏
在YouDaoWidget类中添加私有函数void initTitleBar();并在构造函数中调用此函数。
下面是initTitleBar()的代码：
void YouDaoWidget::initTitleBar() { //1. 设置标题栏的背景颜色为红色 //在样式表中，#号可以指定要设置的控件对象名， //从而指定该设置只影响该控件本身，其子控件不会继承其样式 //如果不指定，则其子控件会继承其样式 ui->frame_title->setStyleSheet( "QFrame#frame_title{background-color:rgb(244, 76, 76);}"); //2. 设置Logo //border-image属性会使得图片占满整个控件，因此图片会缩放 ui->label_logo->setStyleSheet( "QLabel{border-image:url(:/image/logo.png);}"); //3. 设置向前前进按钮 //hover-表示鼠标悬停状态 //disabled-表示控件不可用状态 ui->btn_pre->setStyleSheet( "QPushButton{border-image:url(:/image/prev.png);} \ QPushButton:hover{border-image:url(:/image/prev-hover.png);} \ QPushButton:disabled{border-image:url(:/image/prev-disabled.png);}"); //3. 设置向后按钮 ui->btn_next->setStyleSheet( "QPushButton{border-image:url(:/image/next.png);} \ QPushButton:hover{border-image:url(:/image/next-hover.png);} \ QPushButton:disabled{border-image:url(:/image/next-disabled.png);}"); //4. 设置历史按钮 ui->btn_history->setStyleSheet( "QPushButton{border-image:url(:/image/history.png);} \ QPushButton:hover{border-image:url(:/image/history-hover.png);}"); //5. 设置登录按钮 ui->btn_login->setStyleSheet( "QPushButton{border-image:url(:/image/default-portrait.png);}"); //6. 设置mini按钮 ui->btn_mini->setStyleSheet( "QPushButton{border-image:url(:/image/mini.png);}\ QPushButton:hover{border-image:url(:/image/mini-hover.png);}"); //7. 设置最小化按钮 ui->btn_min->setStyleSheet( "QPushButton{border-image:url(:/image/minimum.png);}\ QPushButton:hover{border-image:url(:/image/minimum-hover.png);}"); //8. 设置最大化按钮 ui->btn_max->setStyleSheet( "QPushButton{border-image:url(:/image/maximum.png);}\ QPushButton:hover{border-image:url(:/image/maximum-hover.png);}"); //9. 设置关闭按钮 ui->btn_close->setStyleSheet( "QPushButton{border-image:url(:/image/close.png);}\ QPushButton:hover{border-image:url(:/image/close-hover.png);}"); }
现在直接编译运行程序，效果和原版还差不多嘛。
好的，有道词典的标题栏就做好了，下节分享导航栏的制作，我们下节再见，最后不要忘记点赞哦。
关于本节的源码，可以关注公众号：小豆君Qt分享，申请加入C++\Qt交流群获得。
