Qt使用StyleSheet美化QListView或QListWidget
1 子控件與偽狀態(tài)
QListWidget是QListView的子類，對(duì)這兩個(gè)控件的美化是基本一樣的锣杂。
對(duì)列表框的美化，分為對(duì)它本身的美化和對(duì)它的子控件item的美化液斜。
對(duì)列表框的美化狼钮，主要就是保持背景色與item一致，以及其他一些通用的屬性。
對(duì)item的美化啊掏，主要為default，hover衰猛，selected三個(gè)狀態(tài)的配置迟蜜。
2 分析
對(duì)QListView和QListWidget使用outline: none可以不顯示item切換焦點(diǎn)的虛線。
如果需要對(duì)item添加邊框啡省，只顯示下邊框就好了（都設(shè)置邊框的話前一個(gè)item的下邊框會(huì)和后一個(gè)item的上邊框疊在一起娜睛，邊框顯得很粗）。
對(duì)于選中狀態(tài)后列表左側(cè)顯示小長(zhǎng)條卦睹，有兩種實(shí)現(xiàn)方法畦戒，這里直接設(shè)置了左邊框來實(shí)現(xiàn)。對(duì)于一些情況控件設(shè)置左邊框無效的情況下分预，也可以通過漸變背景色來實(shí)現(xiàn)兢交。
3 編寫StyleSheet
準(zhǔn)備了兩個(gè)QListWidget：listWidget、listWidget_2笼痹。其中配喳，listWidget使用亮配色，繪制邊框凳干；listWidget_2使用暗配色晴裹，不繪制邊框。
QListView {
outline: none;
}
#listWidget::item {
background-color: #ffffff;
color: #000000;
border: transparent;
border-bottom: 1px solid #dbdbdb;
padding: 8px;
}
#listWidget::item:hover {
background-color: #f5f5f5;
}
#listWidget::item:selected {
border-left: 5px solid #777777;
}
#listWidget_2::item {
background-color: #393d49;
color: #ffffff;
border: transparent;
padding: 8px;
}
#listWidget_2::item:hover {
background-color: #4e5465;
}
#listWidget_2::item:selected {
border-left: 5px solid #009688;
}
效果
效果圖
