一，前言
学习从模仿开始，我看了下我工作中常用的软件，里面的找了些我之前没有实现过的界面进行刻意练习。
二，需求
模仿某个工具的界面，实现groupbox及toolbox下拉菜单。
三，遇到的问题
1. 每次都要建很多layout的私有变量吗？
答：每个layout设置为小函数，通过参数返回。是一种不错的方法。
void DataProperties::InitMainUI()
{
QVBoxLayout *layout = new QVBoxLayout;
/* 第一行Name */
layout->addLayout(createNameUI());
/* 第二行group */
layout->addWidget(createDataUI(tr("Data Type"),InitMenuNew(),InitMenuEdit()));
/* 第三行group */
layout->addWidget(createDataUI(tr("Data Constraint"),InitMenuNew(),InitMenuEdit()));
/* 空白拉伸填充 */
layout->addStretch();
setLayout(layout);
/* 设置window */
resize(300,400);
setWindowTitle(tr("Data Properties"));
setSkin(":./res/qss/AppleCaiStyle.qss");
}
2. toolbutton的下拉菜单有小三角？
答：通过m_btnNew->setArrowType(Qt::NoArrow);无法解决，依然存在小三角。然后网上搜索了下通过添加QSS可以解决，然后在官网QSS的描述中也找到了相关说明。
QToolButton::menu-indicator
{
image: none;
}
3. QSS单独设置某控件？
答：原因是ui文件中的对象qss才能识别，代码中则需要注册下objectName。比如m_btnNew->setObjectName("btnNew");
4. 如何将某些UI效果类的属性设置移入QSS？
答：可以用到qproperty-<property name>语法。看看我的QSS如下。
/* create by Apple Cai at 20210728 */
QToolButton::menu-indicator
{
image:none /* delete arrow */
}
QToolButton#btnNew {
qproperty-icon:url(:/res/img/new.png);
qproperty-iconSize:20px 20px;
qproperty-toolTip:"new";
qproperty-popupMode:2 /* QToolButton::InstantPopup */
}
QToolButton#btnEdit {
qproperty-icon:url(:/res/img/settings.png);
qproperty-iconSize:20px 20px;
qproperty-toolTip:"edit";
qproperty-popupMode:2
}
QLabel {
font-family: "Microsoft YaHei";
font-weight:bold;
font-size:14px;
color: rgb(200,101,102);
}
代码中就不需要设置这些属性了，代码也变简单了。只要通过layout->addWidget(createDataUI(tr("Data Type"),InitMenuNew(),InitMenuEdit()));来使用绑定group名及绑定不同的按钮menu。
QGroupBox *DataProperties::createDataUI(QString tip,QMenu *pMenuNew,QMenu *pMenuEdit)
{
QGroupBox *groupBox = new QGroupBox(tip);
QHBoxLayout *layout = new QHBoxLayout;
/* 创建line文本框 */
QLineEdit *m_txtName = new QLineEdit;
/* 创建new按钮 */
QToolButton *m_btnNew = new QToolButton(this);
m_btnNew->setMenu(pMenuNew);
m_btnNew->setObjectName("btnNew");
/* 创建edit按钮 */
QToolButton *m_btnEdit = new QToolButton(this);
m_btnEdit->setMenu(pMenuEdit);
m_btnEdit->setObjectName("btnEdit");
layout->addWidget(m_txtName);
layout->addWidget(m_btnNew);
layout->addWidget(m_btnEdit);
groupBox->setLayout(layout);
return groupBox;
}
4. QSS中比如提示如何用中文注释？
答：貌似QSS中只能用英文，暂时我无法用中午来显示menu的提示信息。否则要中文提示信息只能写入到code中用setToolTip。
四，效果
image.png
五，小结
我自己要做的小工具已经找到了对标的对象。每个页面我都看了下，找出了我曾经没有实现过的功能，开始以小练习的方式一一实现。本次主要是groupbox和toolbox的下拉菜单，并且又学会了一招QSS中设置属性。
