实现效果
初学QT 发现果真是强大的不行,原来我都是用MFC 虽然有异曲同工之妙 ,但是感觉跨平台的QT更加精髓一些,下面,我们来实现一个全局的自定义颜色选择工具栏,效果如下,主要由一组互斥的 CheckBox 和 一个单独的自定义 Qpushbutton 构成。
实现过程
调整 工具栏
我们首先在主窗口布局的工具栏中 ,给工具栏增加我们自己写的,自定义选择框函数,
并且由分隔符 隔开
void ASAP::setupUi()
{
if (this->objectName().isEmpty()) {
this->setObjectName(QStringLiteral("ASAP"));
}
this->resize(1037, 786);
this->setTabPosition(Qt::DockWidgetArea::LeftDockWidgetArea, QTabWidget::East);
this->setTabPosition(Qt::DockWidgetArea::RightDockWidgetArea, QTabWidget::West);
我们代码
mainToolBar->addSeparator();
// 添加 全局颜色选择框
mySetcolorToolbar(mainToolBar);
mainToolBar->addSeparator();
horizontalLayout_2->addWidget(pathologyView);
this->setCentralWidget(centralWidget);
}
设置工具栏按钮
这一步主要是构建一组互斥的Qcheckbox 和一个单独的自定义颜色选择按钮
void ASAP::mySetcolorToolbar(QToolBar *mainToolBar){
// add Global color selection check box
QLabel *plabel = new QLabel;
plabel->setText(QString::fromLocal8Bit("线框颜色:"));
mainToolBar->addWidget(plabel);
// 默认颜色
my_qSlistColorName << "#FF0000" << "#00B050" << "#000000" << "#0070C0"<<"#FFC000"<<"#7030A0";
m_pButtonGroup = new QButtonGroup(this);
// 设置互斥
m_pButtonGroup->setExclusive(true);
foreach(QString str_color, my_qSlistColorName) {
QCheckBox *pButton = new QCheckBox(this);
// 设置文本
pButton->setText(QString::fromLocal8Bit(" "));
// 设置qss 样式,背景颜色,线框颜色,选中小图标
QString strCheckBoxStyle = QString(
"QCheckBox::indicator{ width: 18px; height: 18px;border-radius:4px;background-color:#FFFFFF;border: 2px solid %1;}"
"QCheckBox::indicator:checked{image: url(:/ASAP_icons/gou.png);}").arg(str_color);
cout << strCheckBoxStyle.toStdString().data() << endl;
pButton->setStyleSheet(strCheckBoxStyle);
m_pButtonGroup->addButton(pButton);
mainToolBar->addWidget(pButton);
}
// 连接信号槽 buttonClicked 点击 stateChanged 状态更改
connect(m_pButtonGroup, SIGNAL(buttonClicked(QAbstractButton*)), this, SLOT(onColorChooseButtonClicked(QAbstractButton*)));
m_pPushButton = new QPushButton(this);
// 设置 自定义 颜色 按钮
m_pPushButton->setText(QString::fromLocal8Bit("..."));
QString strPushButtonStyle = QString(
"QPushButton{ width: 20px; height: 20px;min-width: 20px;border: 1px ; background-color:#FFFFFF;}"
"QPushButton:pressed{background-color:#c44237; }");
m_pPushButton->setStyleSheet(strPushButtonStyle);
mainToolBar->addWidget(m_pPushButton);
//连接信号槽
connect(m_pPushButton, SIGNAL(clicked()), this, SLOT(onColorCustomButtonClicked()));
}
设置勾选框样式
这里查了很多资料,设置样式的时候非常的不方便试验了很多次。
下面这个样式为圆角矩形,背景颜色为白色,并且包含宽高等信息。
// 设置qss 样式,背景颜色,线框颜色,选中小图标
QString strCheckBoxStyle = QString(
"QCheckBox::indicator{ width: 18px; height: 18px;border-radius:4px;background-color:#FFFFFF;border: 2px solid %1;}"
"QCheckBox::indicator:checked{image: url(:/ASAP_icons/gou.png);}").arg(str_color);
cout << strCheckBoxStyle.toStdString().data() << endl;
pButton->setStyleSheet(strCheckBoxStyle);
默认勾选
当然,我们还可以在 按钮设置好样式之后,添加之前,对整体的一组Qcheckbox设置一个默认的勾选项目
// 默认勾选红色
if (str_color == QString::fromLocal8Bit("#FF0000")){
pButton->setChecked(true);
}
设置信号函数
这一步是在点击 的时候 设置全局颜色信息,这里有一个问题是,我怎么知道勾选框自带的颜色是什么呢?
如何获取呢?
有两个思路:
- 通过getcolor 进行获取,发现Qcheckbox的 border 获取不到
- 通过获取qss 的string 后进行截取,比较丑陋
void ASAP::onColorChooseButtonClicked(QAbstractButton *button)
{
// 当前点击的按钮
cout << QString("Clicked Button : %1").arg(button->text()).toStdString().data() << endl;
// 遍历按钮,获取选中状态
QList<QAbstractButton*> list = m_pButtonGroup->buttons();
foreach(QAbstractButton *pButton, list)
{
if (pButton->isChecked()==true) {
QString strStatus = pButton->isChecked() ? "Checked" : "Unchecked";
cout << QString("Button : %1 is %2").arg(button->text()).arg(strStatus).toStdString().data()<<endl ;
QString s_temp = pButton->styleSheet();
cout << " qss : " << s_temp.toStdString().data() << endl;
// 截取qss 字符串 中的 颜色信息
QString s_tempColor = s_temp.mid(110, 6);
cout << " qss color: " << s_tempColor.toStdString().data() << endl;
QColor colortemp = QColor(s_tempColor.toUInt(NULL, 16));
//r的rgb转化为16进制
QString redStr = QString("%1").arg(colortemp.red(), 2, 16, QChar('0'));
//g的rgb转化为16进制
QString greenStr = QString("%1").arg(colortemp.green(), 2, 16, QChar('0'));
//b的rgb转化为16进制
QString blueStr = QString("%1").arg(colortemp.blue(), 2, 16, QChar('0'));
QString hexStr = "#" + redStr + greenStr + blueStr;
// 设置 全局颜色变量
m_qGlobalColor = colortemp;
m_strGlobalColor = hexStr;
cout << " GlobalColor is set to : "<<m_strGlobalColor.toStdString().data() << endl;
// 发送信号 修改 默认颜色
//connect(this, SIGNAL(imageClosed()), &*extension, SLOT(onImageClosed()));
}
}
}
void ASAP::onColorCustomButtonClicked(){
// 使用颜色选择框进行颜色设置
QColor newColor = QColorDialog::getColor(Qt::green, this, QString::fromLocal8Bit("选择颜色"));
//r的rgb转化为16进制
QString redStr = QString("%1").arg(newColor.red(), 2, 16, QChar('0'));
//g的rgb转化为16进制
QString greenStr = QString("%1").arg(newColor.green(), 2, 16, QChar('0'));
//b的rgb转化为16进制
QString blueStr = QString("%1").arg(newColor.blue(), 2, 16, QChar('0'));
//将各rgb的拼接在一起形成#000000
QString hexStr = "#" + redStr + greenStr + blueStr;
// 设置 全局颜色变量
m_qGlobalColor = newColor;
m_strGlobalColor = hexStr;
cout << " GlobalColor is set to : " << m_strGlobalColor.toStdString().data() << endl;
}
其他调试参考
这次QT 开发还是学到了不少开发技巧, 包括cmake的使用等等
还有就是 在调试的同时进行 cmd 窗口的输出
比如添加如下内容
#ifdef _DEBUG
AllocConsole();
freopen("CONOUT$", "w+t", stdout);
freopen("CONIN$", "r+t", stdin);
#else
#endif
获取全局颜色设置
进行全局的变量修改,需要使用 (static_cast<QApplication *>(QCoreApplication::instance()))
#define qApp (static_cast<QApplication *>(QCoreApplication::instance()))
传递QString, 使用时候用 QVariant::fromValue(color) 进行转型
//r的rgb转化为16进制
QString redStr = QString("%1").arg(colortemp.red(), 2, 16, QChar('0'));
//g的rgb转化为16进制
QString greenStr = QString("%1").arg(colortemp.green(), 2, 16, QChar('0'));
//b的rgb转化为16进制
QString blueStr = QString("%1").arg(colortemp.blue(), 2, 16, QChar('0'));
QString hexStr = redStr + greenStr + blueStr;
// 设置 全局颜色变量
m_qGlobalColor = colortemp;
m_strGlobalColor = hexStr;
qApp->setProperty("m_strGlobalColor", m_strGlobalColor);
使用时候
QString chosedColorStr = "#"+qApp->property("m_strGlobalColor").value<QString>();
QColor chosedColor(chosedColorStr);