Qt 之 去除窗口部件被选中后的焦点虚线框

一、简述

十一月已去，迎接了2016年的最后一个月。
很惭愧，十一月份就写了四篇博客，十二月好好加油，争取一天一篇。

今天就先讲一讲一个简单的问题，在界面中如果有按钮，复选框、单选框等部件，我们按Tab键时会出现一个与部件相同大小的矩形虚线框，覆盖在部件上。有时候可能我们并没有在意这个细节，但是有时候这个矩形虚线框会影响界面的美观，降低了界面的颜值。

---

先看一下如何会出现矩形虚线框。

我们看上图无论我们怎么点击按钮（左边四个为按钮，加了背景色）或者其他部件，都没有出现矩形虚线框。这是为什么呢？

再看下面。

我们看到点击部件并没有矩形虚线框，但是后来出现了，是因为我按下了Tab键。

我们看到，在按下了Tab键后出现了矩形虚线框。在我看来矩形虚线框的一个好处就是我们知道当前焦点在窗口的哪一个部件上。但是有了这个虚线框后，界面显得并不是那么美观。

---

我们先不谈怎么去除矩形虚线框，先讲讲focusPolicy这个属性。

我们从Qt助手中看到这个属性有5个枚举值以及介绍。

Qt::TabFocus 按下Tab键，该部件会显示矩形虚线框（前提是tab顺序轮到该部件）

Qt::ClickFocus 点击部件显示矩形虚线框（前提是出现矩形虚线框，即按下了Tab键）

Qt::StrongFocus Qt::TabFocus + Qt::ClickFocus

Qt::WheelFocus Qt::StrongFocus + 使用鼠标滚轮显示矩形虚线框

Qt::NoFocus 不显示矩形虚线框

这5个枚举值中，我们Qt::NoFocus可以直接去除矩形虚线框，那我们直接给某个部件设置一下不就好了（见下方代码），这样是可以的，但是如果界面上有多个部件，都想去掉那不是每个部件都要设置该属性，是不是显得很麻烦。

ui.checkBox->setFocusPolicy(Qt::NoFocus);

想要一步到位，直接去除窗口中所有部件的矩形虚线框也不是没有办法，而且办法很简单，下面上代码。

二、代码之路

//去除窗口部件的系统焦点边框;class MyProxyStyle : public QProxyStyle{public:    virtual void drawPrimitive(PrimitiveElement element, const QStyleOption * option,        QPainter * painter, const QWidget * widget = 0) const    {        if (PE_FrameFocusRect == element)        {            //这里不做任何操作，Qt默认是绘制矩形虚线框        }        else        {            QProxyStyle::drawPrimitive(element, option,painter, widget);        }    }};int main(int argc, char *argv[]){    QApplication a(argc, argv);    //添加style为这个工程;    //这里为这个工程的所有窗口都去除了矩形虚线框    qApp->setStyle(new MyProxyStyle);    return a.exec();}

---

加上qApp->setStyle(new MyProxyStyle);之后运行程序；

我们发现按钮的背景色没有了。我在Qt Designer 中添加如下的样式，不过貌似去除矩形虚线框后样式就不起作用了。

---

苦思冥想，在程序中设置样式也不起作用。

// 单独对某一个按钮设置样式;ui.pushButton->setStyleSheet("QPushButton\                                {\                                    background:red;\                                }");// 为所有按钮设置样式;this->setStyleSheet("QPushButton\                                {\                                    background:red;\                                }");

多次尝试后发现设置如下样式即可解决:

QPushButton{    background:red;    border:0px;}

---

未去除矩形虚线框效果图：

我们发现加上border:0px;后，按钮没有了之前的凹凸感，显得平面化。

---

去除矩形虚线框后效果图：

当我按下Tab键后不再出现矩形虚线框了。

---

上面两个按钮加上了border:0px;去除了边框，点击之后没有凹陷的感觉，而后两个按钮没有加上border:0px;，保留了按钮原始的点击凹陷的感觉，但是为了去除矩形虚线框，我们不得已加上了border:0px;去除了边框，保留了背景色样式。但是这样我们点击按钮之后没有按下凹陷的反馈，感觉是没有点击上去似的，为了解决这一问题，在下一篇中将讲述如何自定义按钮按下、松开后的效果。

---

去除矩形虚线框的另一种方法：

在样式文件中添加 *{outline:0px;}
或者
qApp->setStyleSheet(“*{outline:0px;}”); 设置全局样式

尾

以上代码便可去除窗口中的矩形虚线框，再也不用担心有虚线框而影响窗口的颜值了 O(∩_∩)O~
欢迎随时交流 ~