制作有道词典——标题栏

简介: 制作有道词典——标题栏

在前面的分享中,小豆君已经对样式表的知识介绍的差不多了,我们接下来的几节分享中,小豆君和大家一起制作一个有道词典主界面,以巩固下样式表的用法,最后还会分享如何有效的组织样式表代码。


今天先制作标题栏。


下图是原版的有道界面:

01ebd755782e4c909dad0843d3544acf.jpeg


新建项目YouDaoWidget,类名为YouDaoWidget,并且继承自QWidget。

ui界面为(标题栏的具体画法在下方):

01ebd755782e4c909dad0843d3544acf.jpeg


1 去掉系统的标题栏

01ebd755782e4c909dad0843d3544acf.jpeg


系统给我们提供的标准标题栏有时并不能满足需求,或是并不美观,所以需要自定义一个标题栏。

在构造函数中添加如下代码,去掉标题栏


//去掉标题栏
setWindowFlags(Qt::FramelessWindowHint);


2 编辑自定义的标题栏界面

01ebd755782e4c909dad0843d3544acf.jpeg


标题栏最外层,即所有小控件的父控件为QFrame,下表是一个对应关系。


标题栏最外层,即所有小控件的父控件为QFrame,下表是一个对应关系。

序号类名对象名称说明父控件QFrameframe_title最外层控件


其中的搜索框比较复杂,所以把它单独拎出来,制作一个搜索框类。

01ebd755782e4c909dad0843d3544acf.jpeg

3 创建搜索框界面类

添加新的ui类SearchEdit,继承自QWidget。

ui界面:

01ebd755782e4c909dad0843d3544acf.jpeg

头文件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);}");
}


现在直接编译运行程序,效果和原版还差不多嘛。

01ebd755782e4c909dad0843d3544acf.jpeg


好的,有道词典的标题栏就做好了,下节分享导航栏的制作,我们下节再见,最后不要忘记点赞哦。


关于本节的源码,可以关注公众号:小豆君Qt分享,申请加入C++\Qt交流群获得。

相关文章
10行代码,实现你的专属阿里云OpenAPI MCP Server
本文介绍如何用10行Python代码创建专属阿里云OpenAPI MCP Server。针对传统MCP Server工具固化、开发复杂等问题,提出借助alibaba-cloud-ops-mcp-server实现灵活拓展的方案。通过配置服务与API名称,运行简短代码即可生成支持SSE连接的MCP Server。用户无需深入了解阿里云OpenAPI细节,大幅降低开发门槛。未来将探索通用工具设计,实现固定工具调用任意API,进一步提升灵活性与效率。
数据库技术详解:从基础到进阶,掌握数据处理的核心
一、引言 在数字化时代,数据已成为企业的核心资产
GBDT算法超参数评估(二)
GBDT算法超参数评估关注决策树的不纯度指标,如基尼系数和信息熵,两者衡量数据纯度,影响树的生长。默认使用基尼系数,计算快速,而信息熵更敏感但计算慢。GBDT的弱评估器默认最大深度为3,限制了过拟合,不同于随机森林。由于Boosting的内在机制,过拟合控制更多依赖数据和参数如`max_features`。相比Bagging,Boosting通常不易过拟合。评估模型常用`cross_validate`和`KFold`交叉验证。
交易平台---架构设计第一步拆分模块,拆分为7个模块
交易平台---架构设计第一步拆分模块,拆分为7个模块
解码 LangChain|用 LangChain 和 Milvus 从零搭建 LLM 应用
如何从零搭建一个 LLM 应用?不妨试试 LangChain + Milvus 的组合拳。 作为开发 LLM 应用的框架,LangChain 内部不仅包含诸多模块,而且支持外部集成;Milvus 同样可以支持诸多 LLM 集成,二者结合除了可以轻松搭建一个 LLM 应用,还可以起到强化 ChatGPT 功能和效率的作用。
1245 0
Qt 套接字类(QTcpSocket和QUdpSocket)解密:迈向 Qt 网络编程之巅
Qt 套接字类(QTcpSocket和QUdpSocket)解密:迈向 Qt 网络编程之巅
2036 0
mybatis-plus动态表名
mybatis-plus动态表名
200 0
使用函数计算打包下载OSS文件
本场景介绍如何使用函数计算将对象存储OSS上多个文件(Object)打包下载到本地。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问