【Qt6】工具提示以及调色板设置

qt6,工具,提示,以及,调色板,设置 · 浏览次数 : 160

小编点评

你的文章非常详细地介绍了如何实现响应 clicked 信号的两种方法,以及如何使用 QToolTip 类设置工具提示。 **关于工具提示的调色板问题** 在设置工具提示背景色和前景色时,可以使用 QPalette 类中的 setColor 方法,并在其中设置 styleProperty 属性。例如: ```cpp palette.setColor(QPalette::Inactive, QPalette::Background, QColor("darkblue")); palette.setColor(QPalette::Inactive, QPalette::Text, QColor("lightyellow")); ``` **其他建议** * 可以使用 QPainter 类来绘制工具提示背景。 * 可以使用 QGraphicsView 来绘制工具提示。 * 可以使用 QMultimediaTimer 类来延迟工具提示显示。 * 可以使用鼠标移动事件来更新工具提示的位置。

正文

工具提示即 Tool Tip,当用户把鼠标移动到某个UI对象上并悬停片刻,就会出现一个“短小精悍”的窗口,显示一些说明性文本。一般就是功能描述,让用户知道这个XX是干啥用的。

在 Qt 中使用工具提示最方便的做法是直接用 QWidget 类的成员方法:setToolTip。从 QWidget 类派生的组件都可以用,直接设置文本内容即可,用起来很 666。

下面举个例子:示例窗口上有三个单选按钮(QRadioButton),分别为它们设置工具提示。

#include <qapplication.h>
#include <qwidget.h>
#include <qboxlayout.h>
#include <qradiobutton.h>
#include <qlabel.h>

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);

    // 窗口
    QWidget *window = new QWidget;
    // 大小和标题
    window->setWindowTitle("2023劲爆游戏盲盒");
    window->resize(300, 280);
    // 布局
    QVBoxLayout* layout = new QVBoxLayout;
    window->setLayout(layout);
    // 在布局内放些组件
    // 1、标签
    QLabel *lbTxt = new QLabel(window);
    lbTxt->setText("请选择一个分组开箱,祝您好运。");
    layout->addWidget(lbTxt);
    // 2、三个单选按钮
    QRadioButton* opt1=new QRadioButton("霸王组", window);
    QRadioButton *opt2 = new QRadioButton("受虐组", window);
    QRadioButton *opt3 = new QRadioButton("狗粮组", window);
    layout->addWidget(opt1);
    layout->addWidget(opt2);
    layout->addWidget(opt3);
    layout->addStretch(1);

    // 给三个单选按钮设置工具提示
    opt1->setToolTip("霸王组的游戏玩得特别有自信,玩家的战斗力最大化,对手的战斗力弱得像小鸡一样,一打一个爽,一直打一直爽。");
    opt2->setToolTip("受虐组的游戏玩起来比较惨,玩家的战斗力被严重削弱,对手的力量无比强大,基本被按在水泥地板上摩擦。该组游戏难度大到吓死人。");
    opt3->setToolTip("狗粮组游戏比较温馨,玩家可以自由组CP,然后拼命发狗粮。哪一组CP被别人发的糖给甜死了就算出局。");

    // 显示窗口
    window->showNormal();

    return QApplication::exec();
}

这是最基本的工具提示,没什么可折腾的,设置字符串就行。看看效果。

 

下面说说另一种复杂些的方法。QToolTip 类公开一组静态成员,可以用于手动控制工具提示。例如,你可以:

showText:显示工具提示。这个用得较多;
hideText:隐藏工具提示。这个一般不需要调用,毕竟你鼠标移出目标组件的区域后就会自动隐藏。
下面咱们还是用例子说事。例子程序的窗口中水平躺了两个按钮,然后连接按钮的 clicked 信号,通过调用 showText 方法手动显示工具提示。
#include <QApplication>
#include <QWidget>
#include <QToolTip>
#include <QPushButton>
#include <QHBoxLayout>

class MyWindow : public QWidget
{
public:
    MyWindow();

private:
    QHBoxLayout* layout;
    QPushButton* btnA;
    QPushButton* btnB;
    // 两个slots
    void onAClicked();
    void onBClicked();
};

/***************************************************/

MyWindow::MyWindow()
    :QWidget::QWidget(nullptr)
{
    // 初始化布局
    layout = new QHBoxLayout;
    setLayout(layout);
    // 弄两个按钮
    btnA = new QPushButton("按钮 1", this);
    btnB = new QPushButton("按钮 2", this);
    layout->addWidget(btnA, 0, Qt::AlignTop);
    layout->addWidget(btnB, 0, Qt::AlignTop);
    // 连接一下clicked信号
    connect(btnA, &QPushButton::clicked, this, &MyWindow::onAClicked);
    connect(btnB, &QPushButton::clicked, this, &MyWindow::onBClicked);
}

由于我这个类没有明确声明信号等东东,所以不加 Q_OBJECT 宏也没问题。如果加 Q_OBJECT 宏,这个类的定义最好放头文件里,这样就不必手动执行 MOC。

接下来咱们重点实现响应 clicked 信号的那两个方法。

void MyWindow::onAClicked()
{
    // 获取按钮的矩形区域坐标
    QPushButton* _b = static_cast<QPushButton*>(sender());
    QRect rect = _b->rect();
    // 左下角坐标
    QPoint lbpoint = rect.bottomLeft();
    // 转换为全局坐标
    QPoint gpos = _b->mapToGlobal(lbpoint);
    // 手动显示提示信息
    QToolTip::showText(gpos, "单击它,实现梦想");
}

void MyWindow::onBClicked()
{
    auto b = static_cast<QPushButton*>(sender());
    // 获取按钮的矩形区域
    QRect rect = b->rect();
    // 左下角
    QPoint p1 = rect.bottomLeft();
    // 映射全局坐标
    p1 = b->mapToGlobal(p1);
    // 显示工具提示
    QToolTip::showText(p1, "单击它,放弃梦想");
}

两个方法的逻辑是一样的。首先通过 sender() 方法可以知道正在发送信号的对象,这里就是按钮。然后得到按钮的矩形区域的左下角坐标。对的,我就是想让工具提示显示在按钮左下角。由于工具提示实际上是一个无边框的顶层窗口(内部用 QLabel 实现的),所以要用相对于屏幕的坐标,调用 mapToGlobal 方法可以将相对坐标(按钮相对于程序窗口)转换为屏幕坐标。

最后,一句 showText 调用显示提示。

注意,咱们这里是单击按钮后才会显示工具提示的,鼠标移上去是不会出现提示的。毕竟咱们手动触发了。

 

要单击按钮之后才显示工具提示,明显这做法是不合理的,所以,QToolTip 类更合理的用法是 ToolTip 事件。对于自定义的组件类,可以重写 event 方法,然后分析事件类型是否为 ToolTip,如果是就用 QToolTip::showText 显示工具提示。不过这种做法还是不怎么好用,总不能只为了一个工具提示就把常用的组件都派生一遍吧。所以,比较好的方法是使用【事件过滤器】,被过滤者(窗口中用到的各组件)安装过滤器;而当前窗口类重写 eventFilter 方法,使自己变成事件过滤器。这样,在窗口类中就可以拦截各个组件的事件并做出处理了。

下面举例老周用 Python 来写,只是换种语言换个口味而已,知识点是不变的哟。

from PySide6.QtCore import *
from PySide6.QtGui import *
from PySide6.QtWidgets import *

# 自定义窗口类
class MyWindow(QWidget):
    def __init__(self):
        # 调用基类的构造函数
        super().__init__()
        # 设置布局
        layout = QFormLayout()
        self.setLayout(layout)
        # 表单的第一行
        self.txtName = QLineEdit(self)
        layout.addRow("用户名:", self.txtName)
        # 表单的第二行
        self.txtPass = QLineEdit(self)
        layout.addRow("密码:", self.txtPass)
        # 这个输入框需要显示掩码
        self.txtPass.setEchoMode(QLineEdit.EchoMode.Password)
        # 表单的第三行,CheckBox控件
        self.ckbRemember = QCheckBox(self)
        self.ckbRemember.setText("记住我")
        layout.addRow(self.ckbRemember)
        # 表单第四行,两个按钮
        # 这两个按钮需要子布局,让它们躺平
        btnLayout = QHBoxLayout()
        self.btnLog = QPushButton("确定", self)
        btnLayout.addWidget(self.btnLog)
        self.btnExit = QPushButton("退出", self)
        btnLayout.addWidget(self.btnExit)
        layout.addRow(btnLayout)
        # 为需要的组件安装事件过滤器
        self.txtName.installEventFilter(self)
        self.txtPass.installEventFilter(self)
        self.btnLog.installEventFilter(self)
        self.btnExit.installEventFilter(self)
        self.ckbRemember.installEventFilter(self)

    # 当前类重写这个方法,成为事件过滤器
    def eventFilter(self, watched: QObject, event: QEvent) -> bool:
        # 判断事件类型
        if event.type() == QEvent.Type.ToolTip:
            helpevent: QHelpEvent = event
            # 给各组件设置工具提示
            tip = 'what the Fxxk'
            if watched is self.txtName:
                tip = '请输入你的大名'
            if watched is self.txtPass:
                tip = '请输入密码'
            if watched is self.ckbRemember:
                tip = '选中这个后,下次登录不用再输密码了'
            if watched is self.btnLog:
                tip = '点这里,确认登录'
            if watched is self.btnExit:
                tip = '不登录了,直接退出'
            # 显示工具提示
            QToolTip.showText(
                helpevent.globalPos(),      # 当前鼠标的全局坐标
                tip
            )
        # 调用基类成员
        return super().eventFilter(watched, event)

窗口使用 QFormLayout 布局,表单,类似 HTML Form 的布局。两个 QLineEdit 组件,用来输入用户名和密码;两 QPushButton 组件,即普通按钮;还有一个复选框 QCheckBox。

依次调用这些组件的 installEventFilter 方法,安装过滤器,方法参数就是对过滤器实例的引用。在 MyWindow 类中,它重写了 eventFilter 方法,说明 MyWindow 类自身已经成为事件过滤器了。所以当前实例 self 可传递给 installEventFilter 方法。

eventFilter 方法的声明如下:

bool QObject::eventFilter(QObject *watched, QEvent *event)

watched 参数引用的就是被拦截的对象。比如,如果 btnLog 的 ToolTip 事件被拦截,那么 watched 参数引用的就是 btnLog。event 参数是 QEvent 类的派生类,提供与事件有关的数据,不同事件下它的类型不同。对于 ToolTip 事件,其类型是 QHelpEvent。该类提供了显示工具提示所需的全局坐标。

对于 ToolTip 事件,相关的事件类是 QHelpEvent。可以从它的 globalPos 方法获得当前鼠标的屏幕坐标。调用 showText 方法时,第一个参数就是传递工具提示应该出现的位置。当然,这是全局坐标。第二个参数就是提示的文本,剩下的参数可以忽略。

实例化并显示自定义窗口,启动应用程序的主循环。

if __name__ == "__main__":
    # 初始化应用程序
    app = QApplication()
    # 初始化窗口
    win = MyWindow()
    win.setWindowTitle("试玩")
    win.resize(240, 130)
    win.show()
    # 进入主循环
    QApplication.exec()

运行的效果如下面的超清动图所示。

 

最后部分咱们讨论一下工具提示的调色板问题。QToolTip 允许以调色板的方式设置提示的背景色和前景色(文本颜色)。直接看例子:

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);// 获取工具提示的现有调色板
    QPalette pal = QToolTip::palette();
    // 修改背景色
    pal.setColor(
        QPalette::Inactive,
        QPalette::ToolTipBase,
        QColor("darkblue")
    );
    // 修改文本颜色
    pal.setColor(
        QPalette::Inactive,
        QPalette::ToolTipText,
        QColor("lightyellow")
    );
    // 重新设置调色板
    QToolTip::setPalette(pal);

    // 窗口
    QWidget* window = new QWidget;
    window->setWindowTitle("自定义ToolTip颜色");
    window->resize(250, 100);
    // 布局
    QHBoxLayout *layout = new QHBoxLayout;
    window->setLayout(layout);
    // 两个按钮
    QPushButton *btn1, *btn2;
    btn1 = new QPushButton("回到过去", window);
    btn2 = new QPushButton("看看未来", window);
    layout->addWidget(btn1);
    layout->addWidget(btn2);
    // 为按钮设置提示
    btn1->setToolTip("一键触发穿越之旅");
    btn2->setToolTip("一键改变人生");
    // 显示窗口
    window->show();

    // 进入主循环
    return QApplication::exec();
}

代码是没有问题的,但很多同学可能遇到运行之后没有效果的问题。就像这样:

很多大伙伴们可能还找不到解决方案。其实这事是主题造成的,Windows 上默认使用 WindowsVista 主题,我们换一个主题就行了,比如,换成 Windows 主题。如果你不知道当前环境下支持哪些主题,可以调试输出一下 QStyleFactory::keys 方法的返回结果。

qDebug() << QStyleFactory::keys();

得到的输出如下:

QList("windowsvista", "Windows", "Fusion")

除了 Windowsvista,另外两个随便选,都可以。

咱们修改一下应用程序的主题,在 app 变量上调用。

QApplication app(argc, argv);
// 改变主题
app.setStyle("Fusion");

再运行一下看看,效果就有了。

 

好了,今天的话题就聊到这儿了。

与【Qt6】工具提示以及调色板设置相似的内容:

【Qt6】工具提示以及调色板设置

工具提示即 Tool Tip,当用户把鼠标移动到某个UI对象上并悬停片刻,就会出现一个“短小精悍”的窗口,显示一些说明性文本。一般就是功能描述,让用户知道这个XX是干啥用的。 在 Qt 中使用工具提示最方便的做法是直接用 QWidget 类的成员方法:setToolTip。从 QWidget 类派生

【Qt6】QWindow类可以做什么

原来的水文标题是“用 VS Code 搞 Qt6”,想想还是直接改为“Qt6”,反正这个用不用 VS Code 也能搞。虽然我知道大伙伴们都很讨厌 CMake,但毕竟这厮几乎成了 C++ 的玩家规范了。Qt 也算识大体,支持用 CMake 来构建程序。所以,只要你用的是能写 C++ 的工具,理论上都

【VS Code 与 Qt6】QAction 类的一些事

QAction 类表示用户命令的一种抽象,包括命令文本、图标、命令触发后要执行的代码。菜单、工具栏按钮往往存在相同的功能,将这些命令独立抽出来,放到 QAction 以象上,可避免编写重复的代码。比如“文件”菜单下有“保存”命令,工具栏上也会有“保存”按钮。因此,创建一个表示“保存”的 QActio

【Qt6】嵌套 QWindow

在上个世纪的文章中,老周简单介绍了 QWindow 类的基本使用——包括从 QWindow 类派生和从 QRasterWindow 类派生。 其实,QWindow 类并不是只能充当主窗口用,它也可以嵌套到父级窗口中,变成子级对象。咱们一般称之为【控件】。F 话不多讲,下面咱们用实际案例来说明。 这个

【Qt6】QWidgetAction 的使用

在开始主题前,先看一个 C++ 例子: #include struct Data { int a; int b; }; // 注意这里 struct Data *s; void doSome() { Data k; k.a = 100; k.b = 300; // 注意这里,会

【Qt6】列表模型——抽象基类

列表模型(Item Model),老周没有翻译为“项目模型”,因为 Project 和 Item 都可以翻译为“项目”,容易出现歧义。干脆叫列表模型。这个模型也确实是为数据列表准备的,它以 MVC 的概念为基础,在原始数据和用户界面视图之间搭建桥梁,使两者可以传递数据(提取、修改)。 Qt 里面使用

【Qt6】列表模型——便捷类型

前一篇水文中,老周演示了 QAbstractItemModel 抽象类的继承方法。其实,在 Qt 的库里面,QAbstractItemModel 类也派生了两个基类,能让开发者继承起来【稍稍】轻松一些。 这两个类是 QAbstractListModel 和 QAbstractTableModel。

【Qt6】列表模型——树形列表

QStandardItemModel 类作为标准模型,主打“类型通用”,前一篇水文中,老周还没提到树形结构的列表,本篇咱们就好好探讨一下这货。 还是老办法,咱们先做示例,然后再聊知识点。下面这个例子,使用 QTreeView 组件来显示数据,使用的列表模型比较简单,只有一列。 #include

QT中各控件的属性和方法

1.在QT6中,QLabel类具有许多属性和方法,以下是QLabel类的常见属性和调用方法:setText(const QString &text):设置标签的文本内容。setAlignment(Qt::Alignment align):设置文本在标签中的对齐方式。setPixmap(const Q

用 VS Code 搞 Qt6:让信号和槽自动建立连接

Qt 具备让某个对象的信号与符合要求的槽函数自动建立连接。弄起来也很简单,只要调用这个静态方法即可: QMetaObject::connectSlotsByName(...); connectSlotsByName 方法需要一个参数,此参数的指针指向一个实例,这个实例自身的信号,以及它的子级对象的信