16.QSS设置toolbutton--Apple的学习笔记

一，前言

学习从模仿开始，我看了下我工作中常用的软件，里面的找了些我之前没有实现过的界面进行刻意练习。

二，需求

模仿某个工具的界面，实现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-语法。看看我的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中设置属性。