前言

我對qss只會一些簡單的，所以每次都得查資料，自己調，好麻煩，特別是之前一篇博客關于菜單樣式的設置。這次以為兩者相似，結果不是的。

這個QComboBox下拉框的樣式設置有稍微復雜，有些關鍵點得記住，所以用這篇博客記錄下。

代碼和說明

有圖有真相，我現在將QComboBox樣式表中的部分關鍵詞標出來，更直觀一些：

QComboBox常規樣式?

圖中QComboBox我只圈出了上面一部分，按理說整個都是屬于QComboBox,但是直接在此關鍵詞下設置屬性只包括這部分，其他的需要分別設置。我這里只設置了邊框和字體，其他的看自己情況添加。padding右側為

QComboBox{color:#666666;font-size:14px;padding: 1px 15px 1px 3px;border:1px solid rgba(228,228,228,1);border-radius:5px 5px 0px 0px; }

?下拉按鈕QComboBox::drop-down ，可以設置按鈕的位置，大小、背景圖，邊框等

QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;width: 15px;border:none;}

箭頭圖標?QComboBox::down-arrow這個很簡單就是把自己箭頭加進去就行。

QComboBox::down-arrow {image: url(:/res/work/dateDown.png);}

?下拉列表QComboBox QAbstractItemView，因為QComboBox的view是QAbstractItemView的子類，所以是后代迭代器的寫法。

QComboBox QAbstractItemView{background:rgba(255,255,255,1);border:1px solid rgba(228,228,228,1);border-radius:0px 0px 5px 5px;font-size:14px;outline: 0px; //去虛線}

注：下拉項去虛線的寫法：?outline: 0px;?

下拉項樣式的設置和我之前博客說的菜單項的寫法不一樣的，和列表表格之類的寫法是一樣的，比較簡單，直接設置。

QComboBox QAbstractItemView::item{height:36px;color:#666666;padding-left:9px;background-color:#FFFFFF; } QComboBox QAbstractItemView::item:hover{ //懸浮background-color:#409CE1;color:#ffffff; } QComboBox QAbstractItemView::item:selected{//選中background-color:#409CE1;color:#ffffff; }

?注意，最重要的一點就是要使?QAbstractItemView的qss生效，在cpp代碼中還要加一句，否則不會起作用：?

// 必須加這句，QStyledItemDelegate* itemDelegate = new QStyledItemDelegate();ui.cmbState->setItemDelegate(itemDelegate);

其中?ui.cmbState是要修改樣式的QComBox控件

QComboBox狀態樣式

下拉框QComboBox還有兩種狀態編輯editable和展開on，我這邊因為不可編，所以就沒寫編輯狀態，只寫了展開時通過對padding數值的改變，從而實現的動態變化。

QComboBox:on { padding-top: 3px;padding-left: 4px;}QComboBox::down-arrow:on { top: 1px;left: 1px;}

總體下來動態圖是這樣的

本文轉自：QComboBox樣式設置——Qt_xiaopei_yan的博客-CSDN博客_qcombobox樣式

總結

以上是生活随笔為你收集整理的QComboBox样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。