本篇专门扯一下有关 QCheckBox 组件的一个问题。老周不水字数,直接上程序,你看了就明白。
#include #include #include #include #include #include int main(int argc, char **argv) { QApplication app(argc, argv); // 最平庸的窗口 QWidget window; window.setWindowTitle("看看这是?"); window.setGeometry(/*坐标*/600, 450, /*大小*/280, 170); // 布局 QVBoxLayout *layout = new QVBoxLayout; window.setLayout(layout); // 控件列表 QCheckBox *cb = new QCheckBox(&window); cb -> setText("看,左边的图标不会变"); layout -> addWidget(cb); QPushButton *btn = new QPushButton(&window); btn->setText("看,左边的图标会变"); // 让按钮支持check操作 btn->setCheckable(true); layout->addWidget(btn); // 图标 QIcon icon; // 第一个图,当checked的时候显示 icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On); // 第二个图,当unchecked的时候显示 icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off); // 应用图标 cb->setIcon(icon); btn->setIcon(icon); // 显示窗口 window.show(); return QApplication::exec(); }
QCheckBox、QRadioButton、QPushButton 都是 QAbstractButton 的子类,所以这几个家伙都归属于按钮组件。在 QAbstractButton 类中已定义有 checkable 属性,表示按钮是否支持 check 操作。这种按钮就类似于现实世界中的自锁按钮——按一下【开】,再按一下【关】。而普通的按钮是无状态记忆的,按下去+弹起来为一个周期,称为 Click。
由于是派生关系,所以 QCheckBox 和 QPushButton 类都会继承 check 功能的支持,只是 QCheckBox 默认是打开这项功能的。QPushButton 类默认不能 check,所以得调用 setCheckable 方法手动打开功能。
btn->setCheckable(true);
下面重点扯扯 QIcon 这货,看名识义,你能猜到它表示的是图标。QIcon 类可以根据不同状态添加多个图标。老周这个例子是添加了两个 PNG 图标。懒得生成什么鬼 Qrc 资源了,直接把图片文件复制到程序可执行文件所在的目录就完事了。比如,build/Debug,只要和可执行文件在同一个目录就行,方便相对路径引用。
QIcon icon; // 第一个图,当checked的时候显示 icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On); // 第二个图,当unchecked的时候显示 icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);
这里涉及到 QIcon 类定义的两枚举:
A、Mode:
1)Normal —— 组件的正常状态;
2)Disbaled —— 被禁用,比如按钮不能点击;
3)Active —— 其实和 Normal 差不多,只是多了一条:正在与用户交互。比如活动窗口,获得焦点的按钮,获得焦点的输入框等;
4)Selected —— 这个有些奇葩,一般在子项对象起作用。比如,ListView 视图的子项被选中时。
B、State:
1)On —— 状态“开”。比如 CheckBox 处于 checked 状态;
2)Off —— 状态“关”。如 CheckBox 的 Unchecked 状态。
回到咱们的代码。这两个图标的区别就在 State 的值不同,当 On 时显示 1.png;当状态为 Off 时显示 2.png。
icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On); icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);
addFile 的第一个参数是文件路径,第二个参数指定图标的大小,这里用 QSize 类的默认构造函数,即宽和高都是 -1,这样图标会根据样式获取默认大小。
运行程序,咱们测试下。如下图所示,这是初始状态,上下两个组件都没有 check。
然后,咱们依次点击它们,让这两个组件都处于 checked 状态。
咱们看到:QPushButton 切换状态后图标也跟着变了,但是 QCheckBox 一点动静都没有。这 NM 是怎么回事?
原来,QPushButton 的默认样式中,在获取图标时,会根据 checked 状态来提取 On 或 Off 相关的图标。
case CE_PushButtonLabel: if (const QStyleOptionButton *button = qstyleoption_castconst QStyleOptionButton *>(opt)) { …… if (!button->icon.isNull()) { //Center both icon and text QIcon::Mode mode = button->state & State_Enabled ? QIcon::Normal : QIcon::Disabled; if (mode == QIcon::Normal && button->state & State_HasFocus) mode = QIcon::Active; QIcon::State state = QIcon::Off; if (button->state & State_On) state = QIcon::On; …… break;
再看看 QCheckBox 的样式,发现这厮在获取图标时是不考虑 On 或 Off 状态的。
case CE_RadioButtonLabel: case CE_CheckBoxLabel: …… if (!btn->icon.isNull()) { pix = btn->icon.pixmap(btn->iconSize, p->device()->devicePixelRatio(), btn->state & State_Enabled ? QIcon::Normal : QIcon::Disabled); …… } } break;
为什么 QCheckBox 的图标不会随着 check 状态改变,这下找到答案了。
不过,人家 Qt 这样设计也没毛病的。毕竟 QCheckBox 前面有个勾勾,已经可以向用户指示状态了,就没必要换图标了。
那么,这个用 QSS (Qt 样式表)能解决吗?Qt 说了,目前 QStyle 和 QSS 是不兼容的,以后的版本可能会实现。估计也是说说而已。
所以,有效的解决方案时自己写个 Style 类,不用覆盖所有组件的样式,只要覆盖 CE_CheckBoxLabel 部分,自己手动绘制图标和文本就行了。如果你想在 QRadioButton 组件中也用上,当然得同时覆盖 CE_RadioButtonLabel 部分。
case CE_RadioButtonLabel: case CE_CheckBoxLabel: …… break;
XXXLabel 指的就是绘制此组件的标签——即文本(或文本+图标)部分,前文的 CE_PushButtonLabel 常量也是此意,绘制 QPushButton 组件的标签部分。
要部分覆盖样式,应当从 QProxyStyle 类派生。这里只需要重写 drawControl 方法就够了,它的签名为:
virtual void drawControl(ControlElement element, const QStyleOption *opt, QPainter *p, const QWidget *w = nullptr) const = 0;
这方法的原始声明是在 QStyle 类中,而且是纯虚函数,派生类必须重写它。QCommonStyle 和 QProxyStyle 类都重写过。如今,咱们要自定义样式,也要重写它。
element 参数表示当前要绘制组件(控件)的哪个部分,例如,CE_PushButtonLabel 表示要画按钮的标签部分,CE_ProgressBarLabel 表示要画进度条的标签部分。
opt 参数是 QStyleOption 的子类,提供绘制样式所需的数据,如按钮上显示啥文本,组件的大小,组件是否处于禁用状态。
p 是 QPainter,用来绘图。
w 是 QWidget 或其子类,就是引用相关的组件对象,许多时候咱们可以不管。有时候可能要从组件上获取额外的数据时用到。
下面代码重写 QCheckBox 的标签绘制过程。
class MyStyle : public QProxyStyle { Q_OBJECT public: void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget = nullptr) const override { if (element == CE_CheckBoxLabel) { const QStyleOptionButton *btn = qstyleoption_castconst QStyleOptionButton *>(option); QRect rect = btn->rect; qDebug() "可用大小:" rect; // 有图标 if (btn->icon.isNull() == false) { // 组件是否在可用状态? QIcon::Mode mode = btn->state & State_Enabled ? QIcon::Normal : QIcon::Disabled; // 组件是否已经 checked ? QIcon::State state = btn->state & State_On ? QIcon::On : QIcon::Off; // 显示缩放因数 qreal pRatio = painter->device()->devicePixelRatio(); // 获取图标 QPixmap theIcon = btn->icon.pixmap( btn->iconSize, pRatio, mode, state); qDebug() "图像原始尺寸:" ", " theIcon.height(); // 这里得换算一下 int iconWidth = theIcon.width() / pRatio; int iconHeight = theIcon.height() / pRatio; qDebug() "缩放后图标大小:" ", " iconHeight; // 计算图标的原点 int iconX = rect.x(); int iconY = (rect.height() - iconHeight) / 2 - 1; // 画图标 painter->drawPixmap( QRect(iconX, iconY, iconWidth, iconHeight), theIcon); // 可用空间减小一下(因为图标占了一些空间) rect.adjust(iconWidth + 2, 0, 0, 0); } // 有没有文本? if (!btn->text.isNull()) { // 水平:左对齐;垂直:居中对齐 auto alig = Qt::AlignLeft | Qt::AlignVCenter; // 算算文本所占空间 QRect txtRect = painter->fontMetrics().boundingRect(rect, alig, btn->text); painter->drawText(txtRect, alig, btn->text); } return; } // 其他的保持默认,交给基类去干就行了 QProxyStyle::drawControl(element, option, painter, widget); } };
这里咱们只关心 CE_CheckBoxLabel,其他值都交给基类处理。在计算图标尺寸的时候,涉及到显示缩放比例。
qreal pRatio = painter->device()->devicePixelRatio();
假设图标的默认尺寸是 16×16,但要是显示比例是 125%,即 16×1.25 = 20 ==> 20×20。这个显示比例可在系统设置里调整。
如果你不希望图标的大小受显示比例干扰,那么需要注意这个比例值了。比如,老周这里设置的是 125%,那么,从 QIcon 中获取到的 QPixmap 对象的大小是 20 像素。所以,要让它还原为 16 像素,就就除以显示比例(devicePixelRatio)。
int iconWidth = theIcon.width() / pRatio; int iconHeight = theIcon.height() / pRatio;
当然了,如果你希望图标也跟着缩放,那就不用换算了。
在绘制完图标后,要用 adjust 方法把矩形对象的 X 坐标向右移,因为图标占了亿点空间,文本只能在图标右边绘制。
rect.adjust(iconWidth + 2, 0, 0, 0);
四个参数分别指定矩形对角线上两个点的坐标变化量。注意是变化量,不是坐标值。比如,adjust( 10, 15, -28, 5 ),意思是:
左上角:X 坐标 +10,Y 坐标 +15;
右下角:X 坐标 -28,Y 坐标 +5。
QRect txtRect = painter->fontMetrics().boundingRect(rect, alig, btn->text);
然后,写个自定义 QWidget 类,作为顶层窗口,试试自定义样式。
class MyWindow : public QWidget { Q_OBJECT public: explicit MyWindow() : QWidget(nullptr) { setWindowTitle("Demo"); resize(200, 80); // 布局 m_layout = new QVBoxLayout(); setLayout(m_layout); m_ck1 = new QCheckBox("选项一", this); m_ck2 = new QCheckBox("选项二", this); // 给这俩checkbox弄弄样式 auto style = new MyStyle; // 把样式对象纳入到Qt对象树中 // 内存清理时会自动打扫,防止泄漏 style->setParent(this); m_ck1->setStyle(style); m_ck2->setStyle(style); m_layout->addWidget(m_ck1); m_layout->addWidget(m_ck2); // 设置图标 QIcon icon; icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On); icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off); m_ck1->setIcon(icon); m_ck2->setIcon(icon); } private: QVBoxLayout *m_layout; QCheckBox *m_ck1, *m_ck2; };
由于这个自定义样式只是针对 QCheckBox 组件,没有必要应用到 QApplication 上,直接用在 QCheckBox上就好了。哦,不要用在 QWidget 实例上,不起作用的。原因请看:
void QWidget::paintEvent(QPaintEvent *) { }
QWidget 类对 paint 事件是没做任何处理的,所以不会触发样式类中的各类绘制方法,除非你重写 paintEvent 方法,手动触发。所以说,咱们直接把样式应用在 QCheckBox 就很合适,QCheckBox 类是处理 paintEvent 的。
void QCheckBox::paintEvent(QPaintEvent *) { QStylePainter p(this); QStyleOptionButton opt; initStyleOption(&opt); p.drawControl(QStyle::CE_CheckBox, opt); } // QStyleOptionButton 的数据在这里收集 void QCheckBox::initStyleOption(QStyleOptionButton *option) const { if (!option) return; Q_D(const QCheckBox); // 从当前QCheckBox实例提取基本数据 option->initFrom(this); // 处于被鼠标按下状态 if (d->down) option->state |= QStyle::State_Sunken; // 除了 checked 和 unchecked 外,还存在第三状态 // 一种未明确状态,介于 checked 与 unchecked 之间 if (d->tristate && d->noChange) option->state |= QStyle::State_NoChange; else option->state |= d->checked ? QStyle::State_On : QStyle::State_Off; if (testAttribute(Qt::WA_Hover) && underMouse()) { option->state.setFlag(QStyle::State_MouseOver, d->hovering); } // 显示的文本 option->text = d->text; // 显示的图标 option->icon = d->icon; // 图标的大小 option->iconSize = iconSize(); }
在实现自定义样式时,咱们在 drawControl 方法中读到的数据就是这么来的。
写上 main 函数,试一下水。
int main(int argc, char **argv) { QApplication app(argc, argv); MyWindow wind; wind.show(); return QApplication::exec(); }
运行,验证。
这回有效果了,图标会自动切换了。是咱们想要的。
顺便提一句,如果你自定义的类,如上面的 MyStyle,MyWindow 类,这些 QObject 的子类,或包含 Q_OBJECT 宏的类。你如果没有在头文件中定义,而是像老周刚才那样,直接写在 cpp 文件中,那么,在类定义的代码后面要加一行(假设代码文件是 app.cpp):
class MyStyle : public QProxyStyle { …… }; class MyWindow : public QWidget { …… }; #include "app.moc" int main(int argc, char **argv) { …… }
这个与 MOC(Meta Object Compiler) 功能是对应的,Qt 定义了许多奇葩语法,这些不是标准 C++ 里面的,在正式编译之前,要把这些奇葩语法还原为标准 C++ 语法,所以才会有生成 xxx.moc 文件。moc 文件其实是C++代码,同时还生成一个 xxx.moc.d 文件,里面是源代码文件引用到的头文件列表。
======================================================
最后,老周分享一个 VS Code 加背景图的技巧。由于 VS Code 的UI是HTML + CSS弄的,所以,通过修改 CSS 文件可以给它加个背景图。你如果嫌麻烦,可以安装 background 插件,直接配置。background – Visual Studio Marketplace
当然,不想用插件,就自己改。网上也有不少教程,不过,老周这里重点说一下文件路径格式,因为网上说的那些方法不适合新版本。
在VS Code 所在目录(不管你是安装版还是便携版)resources app out vs workbench 下面,你会看到一个名为 workbench.desktop.main.css 的文件。这个文件里就是 VS Code 主界面的样式表了。如果怕搞坏了,可以备份一个,然后再改。把这个文件直接扔进 VS Code 里面编辑,可以将其格式化一下,这样好看亿点。
自定义背景图改 body 元素的样式就好了,这样图片可以覆盖整窗口。改其他地方效果都不好,而且有些背景改了也没用,VS Code 运行的时候会被主题参数覆盖。因此,改 body 的样式是目前最方便的方法。你可以直接在 CSS 文件末尾直接写上 body 样式。也可以通过查找“body {” 找到默认的样式,直接在后面追加属性。
body { …… /* 下面为自定义内容 */ opacity: 0.85; background-image: url('vscode-file://vscode-app/C:/Users/DXC/Pictures/bg/v2.png'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: fixed; }
你直接照抄就行,注意 background-image 的地方改成你自己的图片路径。网上的教程用的是 file:///c:/users/xxx/pictures/ 这样的路径,这个新版本不支持的,协议要改为 vscode-file:,然后路径要使用 vscode-app/ 前缀,之后才是图片的路径。
推荐选一张尺寸大一点的图片,这样既可以看得清楚,也可以覆盖整个窗口。opacity 属性设置背景的透明,这个不要弄成 100%,这样全不透明,看不到背景图片了。也不推荐低于 70%,因为太透明了,代码都看不清楚了,写代码容易近视。最好选 85 – 90% 之间,即 0.85 到 1.0。
老周知道,很多大伙伴都喜欢放动画人物,尤其是猛男们都喜欢放一些魔法少女(水手服的就……,小时候觉得不太好看,现在也觉得不太好看,当然,仅代表个人看法)。为了表示对国产动画的支持,尤其是国产魔法少女系列,老周推荐这个:
B 站上面不少猛男喜欢美雪,其实老周也喜欢,所有女生该有的优点她都有,学霸小淑女。
奥飞可能玩具卖得不太好,最近 15 周年的活动还搞得挺带劲。上次去电器城看空调,广告大屏幕里还放这个,超市里也放。
国产动画起步晚,老周小时候看的 99.9% 是日本的,国产的只看过《哪吒》。在为数不多的国产动画(特别魔法少女)里面,真的算是起步就是巅峰了。但说句难听的,衰败也很快,也就是真人版 + 前三部还可以,后面真的不行了,花里花哨,主题也太水。大电影嘛,反正老周不喜欢,都是给那些什么鬼女团做广告的,特效也是敷衍。
有人要说了,动画就是子供向的,就那样了,还要求什么。那可不,以前一些给小娃娃看的动画也设计得很好的,主题思想也明确,情节略带些深度。就像《奈克瑟斯奥特曼》一样,那可不一定小朋友就能看懂的。作为文艺作品,动画只是一样表现形式,核心价值观和思想主题也必须体现,不然还有观赏的意义吗?想一想迪迦、麦克斯、盖亚里面,有几集小时候都看不懂的。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
Java SDK 并发包里提供了丰富的原子类,我们可以将其分为五个类别,这五个类别提供的方法基本上是相似的,并且每个类别都有若干原子类。 对基本数据类型的变量值进行原子更新; 对对象变量的指向进行原子更新; 对数组里面的的元素进行原子更新; 原子化的对象属性更…