QT开发之QPushButton和QComboBox下拉框美化

1、QPushButton

QMenu *pMenu = new QMenu(this);
    QAction *action1[2];

    QString add[2] = {"Firmware Updates","Software Updates"};//显示项


    for(int i = 0; i < 2; i++)
    {
        action1[i] = pMenu->addAction(add[i]);
        action1[i]->setCheckable(false);
    }

ui->pushButton->setMenu(pMenu);//按钮添加菜单


//菜单背景透明
pMenu->setWindowFlags(pMenu->windowFlags() | Qt::FramelessWindowHint);
pMenu->setAttribute(Qt::WA_TranslucentBackground);


//菜单去掉阴影(因为在设置圆角时如果自带阴影还是会变为直角)
pMenu->setWindowFlag(Qt::NoDropShadowWindowHint);


//菜单QSS
QString menuQss = "QMenu{color:rgb(255, 255, 255);background:rgba(255,255,255,16);border:none;font:16px \"SimHei\";"
                       "border-radius: 10px;"
                       "border-image: url(:/png/86.png);"
                       "padding-top:10px;}";//菜单背景为圆角图片
         menuQss.append("QMenu::item{color:rgb(123,123,123);background:rgba(0, 0, 0,0);height:26px;padding-left:10px;padding-right:10px;"
                        "border-image: url(:/png/86.png);} ");//因为背景透明，所以需要加一个背景才能显示后面的悬浮图片
         menuQss.append("QMenu::Item:selected{color:rgb(255, 255, 255);border-image: url(:/png/85.png);}");//鼠标悬浮
         pMenu->setStyleSheet(menuQss);

效果：

 

 

2、QComboBox

ui->comboBox_language->setView(new QListView());//必须有这句，后面设置itme才有效
ui->comboBox_language->setFont(font);//设置字体

//去掉下拉框阴影
ui->comboBox_language->view()->window()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
ui->comboBox_language->view()->window()->setAttribute(Qt::WA_TranslucentBackground);

在QSS文件中设置：

/* 未下拉时，QComboBox的样式 */
QComboBox {
    border: 1px solid gray;   /* 边框 */
    border-radius:2px;   /* 圆角 */
    padding: 0px 0px 0px 10px; /* 上内边距、右内边距、下内边距、左内边距 */
    color: rgba(51,51,51,1);
    /*font: normal normal 15px "Microsoft YaHei";*/
    background: transparent;
    text-align: AlignHCenter;

    color:rgb(123,123,123);/*字体颜色*/
    background-color: transparent;
    border-image: url(:/png/60.png);/*背景图片，圆角*/
}

/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView {
    outline: 0px solid gray;   /* 选定项的虚框 */
    border-radius:10px;   /* 圆角 */
    padding-top:10px;    /*上下都留10px，是因为选中项是矩形，如果不留，移动到第一项和最后一项会变为直角，不好看*/
    padding-bottom:10px;

    color:rgb(123,123,123);
    border-image: url(:/png/84.png);/*下拉框背景，圆角图片*/
}

/* 下拉后，整个下拉窗体每项的样式 */
QComboBox QAbstractItemView::item {

    min-height: 26px;/*每项高度*/
}

/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover {
    color:rgb(255,255,255);
}

/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected {
    color:rgb(255,255,255);

    border-image: url(:/png/85.png);/*鼠标悬浮时背景图片*/
}

效果：

 

qApp->setEffectEnabled(Qt::UI_AnimateCombo, false);//去掉弹窗动画

PS：还有一点小问题，就是在弹出时（没有完全弹出时）下拉框会带直角，我的解决办法是直接去掉弹窗动画，就可以了