QComboBox设置技巧(二) ---- 设置颜色

转载自QComboBox样式设置 - 知乎 (zhihu.com)

 

 

QComboBox组件构成

 

 

 

 

设置下拉三角符号时，样式不成功的原因。

"QComboBox::drop-down {width: 15px;border-left-width: 0px;}"中border-left-width: 0px;必须设置

"QComboBox::drop-down {width: 15px;border-left-width: 0px;}"
"QComboBox::down-arrow {image: url(:/UltraSound/Image/jxdxxz1.png);}"
"QComboBox::down-arrow:on {image: url(:/UltraSound/Image/jxdx2.png);}";

样式一：

效果

QString strSectionBox = "QComboBox {background-color: #ff00ff;border: 1px solid gray; color: #00ffFF;font: normal normal 18px \"Microsoft YaHei\";}"
                         "QComboBox::drop-down {width: 15px;border-left-width: 0px;}"
                         "QComboBox::down-arrow {image: url(:/UltraSound/Image/jxdx2.png);}";

注意：如果不加这句话"QComboBox::drop-down {width: 15px;border-left-width: 0px;}"，效果是这个样子的。

 

 

 

样式二：鼠标滑过combobox

 

效果

QString strSectionBox2 = "QComboBox {background-color: #ff00ff;border: 1px solid gray; color: #00ffFF;font: normal normal 18px \"Microsoft YaHei\";}"
                           "QComboBox:hover{background-color: #ff0011;}"
                           "QComboBox::drop-down {width: 15px;border-left-width: 0px;}"
                           "QComboBox::down-arrow {image: url(:/UltraSound/Image/jxdx2.png);}";

 

 

 

样式三：

效果1：只有鼠标划过的效果。

"QComboBox QAbstractItemView::item:hover {color: #FFFFFF;}"

 

 

 代码：

 QString strSectionBox2 = "QComboBox {background-color: #ff00ff;border: 1px solid gray; color: #00ffFF;font: normal normal 18px \"Microsoft YaHei\";}"
                             "QComboBox:hover{background-color: #ff0011;}"
                             "QComboBox QAbstractItemView {outline: 0px solid gray;border: 1px solid blue;color: green;background-color: #ff0088;selection-background-color: lightgreen;}"
                             "QComboBox QAbstractItemView::item:hover {color: #FFFFFF;background-color: #554433;}"            
                             "QComboBox::drop-down {width: 15px;border-left-width: 0px;}"
                             "QComboBox::down-arrow {image: url(:/UltraSound/Image/jxdx2.png);}";
效果2：增加选中效果后，鼠标滑过效果就没有了。

效果2：增加选中效果后，鼠标滑过效果就没有了。

"QComboBox QAbstractItemView::item:selected { color: #FFFFFF;}"

 

 

代码：

 QString strSectionBox2 = "QComboBox {background-color: #ff00ff;border: 1px solid gray; color: #00ffFF;font: normal normal 18px \"Microsoft YaHei\";}"
                             "QComboBox:hover{background-color: #ff0011;}"
                             "QComboBox QAbstractItemView {outline: 0px solid gray;border: 1px solid blue;color: green;background-color: #ff0088;selection-background-color: lightgreen;}"
                             "QComboBox QAbstractItemView::item:hover {color: #FFFFFF;background-color: #554433;}"            
                             "QComboBox::drop-down {width: 15px;border-left-width: 0px;}"
                             "QComboBox::down-arrow {image: url(:/UltraSound/Image/jxdx2.png);}";

效果2：增加选中效果后，鼠标滑过效果就没有了。

"QComboBox QAbstractItemView::item:selected { color: #FFFFFF;}"

  

 QString strSectionBox2 = "QComboBox {background-color: #ff00ff;border: 1px solid gray; color: #00ffFF;font: normal normal 18px \"Microsoft YaHei\";}"
                             "QComboBox:hover{background-color: #ff0011;}"
                             "QComboBox QAbstractItemView {outline: 0px solid gray;border: 1px solid blue;color: green;background-color: #ff0088;selection-background-color: lightgreen;}"
                             "QComboBox QAbstractItemView::item:hover {color: #FFFFFF;background-color: #554433;}"
                             "QComboBox QAbstractItemView::item:selected { color: #FFFFFF;background-color: #8800ff;}"
                             "QComboBox::drop-down {width: 15px;border-left-width: 0px;}"
                             "QComboBox::down-arrow {image: url(:/UltraSound/Image/jxdx2.png);}";

当把鼠标滑过效果和选中效果调换一下位置时，两个设置都生效了，但是效果解释不清楚。但是按照hover再selected时，肯定不会有hover的效果了。参考网上的文章，一般这两种样式设置的都是一样的。

 

鼠标滑过2后，又离开了控件，效果显示selected

 

 

鼠标滑过4，效果显示的为hover

 

 

 

 

样式四：鼠标滑过下拉箭头

效果：

 

 代码：

QString strSectionBox2 = "QComboBox {background-color: #ff00ff;border: 1px solid gray; color: #00ffFF;font: normal normal 18px \"Microsoft YaHei\";}"
                             "QComboBox:hover{background-color: #ff0011;}"
                             "QComboBox QAbstractItemView {outline: 0px solid gray;border: 1px solid blue;color: green;background-color: #ff0088;selection-background-color: lightgreen;}"
                             "QComboBox QAbstractItemView::item:selected { color: #FF00FF;background-color: #8800ff;}"
                             "QComboBox QAbstractItemView::item:hover {color: #FFFFFF;background-color: #554433;}"
                             "QComboBox::drop-down {width: 15px;border-left-width: 0px;}"
                             "QComboBox::drop-down:hover { background: yellow;border-left-width: 0px;}"
                             "QComboBox::down-arrow {image: url(:/UltraSound/Image/jxdx2.png);}"
                             "QComboBox::down-arrow:hover {image: url(:/UltraSound/Image/jxdxxz3.png);}"
                             "QComboBox::down-arrow:pressed { image: url(:/UltraSound/Image/jxdxxz1.png);}";

注意：hover必须在press前，否则没有hover的效果。

"QComboBox::drop-down:hover { background: yellow；}"

"QComboBox::down-arrow {image: url(:/UltraSound/Image/jxdx2.png);}"

"QComboBox::down-arrow:hover {image: url(:/UltraSound/Image/jxdxxz3.png);}"

"QComboBox::down-arrow:pressed { image: url(:/UltraSound/Image/jxdxxz1.png);}";

修改arrow或者drop-down的大小时可以设置height:33px;width:29px;

 

我的最终效果：

 

 

 代码：

 QString strSectionBox2 = "QComboBox {background-color: #6a8f95;border: 0px solid gray; color: #bbbbbb;font: normal normal 18px \"Microsoft YaHei\";}"
                             "QComboBox:hover{background-color: #386972;}"
                             "QComboBox QAbstractItemView {outline: 0px solid gray;border: 1px solid #fdfdfd;color: green;background-color: #c4d2d5;selection-background-color: lightgreen;}"
                             "QComboBox QAbstractItemView::item{height:33px;color: #000000;}"
                             "QComboBox QAbstractItemView::item:selected { color: #bbbbbb;background-color: #386972;}"
                             "QComboBox QAbstractItemView::item:hover {color: #bbbbbb;background-color: #386972;}"
                             "QComboBox::drop-down {subcontrol-origin: padding; subcontrol-position: top right;height:33px;width:29px;border-left-width: 0px;}"
                             "QComboBox::drop-down:hover {background: #386972;}"
                             "QComboBox::down-arrow {height:33px;width:29px;image: url(:/UltraSound/Image/xiala.png);}"
                             "QComboBox::down-arrow:hover {image: url(:/UltraSound/Image/xiala.png);}"
                             "QComboBox::down-arrow:pressed {image: url(:/UltraSound/Image/xiala.png);}";

注意在最后需要设置样式生效

 

    QStyledItemDelegate *delegate = new QStyledItemDelegate();
    ui->comboBox ->setItemDelegate(delegate);

禁用样式：

"QComboBox:!enabled{color:#2c606a;background: #1a535d;}"