為 PyQt TreeView 自訂 Indent Line 及展開按鈕

不知道是不是新版的 PyQt 的關係,QTreeView 好不容易設定好之後就是長的跟官網範例不一樣⋯⋯

官網範例,中間的是QTreeView

沒有左側的 Indent Line 啊!!!變成只有箭頭了,而且左邊也太空白了吧~怒!

原本長這樣

上網搜尋了一番,終於找到解決辦法。

 

準備圖示檔

首先需要準備以下圖檔,並加入至 resource 資源中,其實可以自己做,不過我是直接擷取 Eclipse 的圖示。

 

加入 Qt Style Sheet

點選 UI 設計檔中的 QTreeView 並於styleSheet 欄位輸入:

QTreeView::branch:open:has-children{border-image: url(:/branch/border-expand.png) 0;}
QTreeView::branch:closed:has-children{border-image: url(:/branch/border-collapse.png) 0;}
QTreeView::branch:has-siblings:!adjoins-item{border-image:url(:/branch/border-line.png) 0;}
QTreeView::branch:has-siblings:adjoins-item{border-image:url(:/branch/border-more.png) 0;}
QTreeView::branch:!has-children:!has-siblings:adjoins-item{border-image:url(:/branch/border-end.png) 0;}
QTreeView::branch:closed:has-children:!has-siblings{border-image: url(:/branch/border-collapse.png) 0;}
QTreeView::branch:closed:has-children:has-siblings{border-image: url(:/branch/border-collapse-more.png) 0;}
QTreeView::branch:open:has-children:!has-siblings{border-image: url(:/branch/border-expand.png) 0;}
QTreeView::branch:open:has-children:has-siblings{border-image: url(:/branch/border-expand-more.png) 0;}

完成效果圖:

最後變成這樣
是說,如果用的是 QTreeWidget 就改寫 QTreeWidget 即可~

 

其他優化

內建的一些樣式不太喜歡,於是:

QTreeView {outline:none;show-decoration-selected: 1;}
QTreeView {outline:none;}
QTreeView::branch{background-color: transparent;}
QTreeView::branch:hover {border-color: transparent}
QTreeView::branch:selected {background-color: #C5E0F7;}

主要移除一些預設的外框以及自訂選中項目的背景顏色。


其實語法都跟 CSS 一樣但就是不曉得那些 PyQt 自訂的後綴有哪些、以及支援的 CSS 語法。

個人紀錄用。