iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0

今天我們來試試看, 把圖片放進 QTreeWidget 的標題
今天想測試的是, 看看能不能把星號圖片放進名為 "star" 的標題內, 讓我們一步一步來吧
首先我們想在 Header 裡放入圖片, 這裡會使用到 Qt 的一個 class 叫做 QHeaderView, 這個 QHeaderView 在 QTreeWidget 跟 QTableWidget 都可以使用, 也就是說我們可以自訂義一個 QHeaderView 然後放入樹或表格內, 但是在這裡我發現了更快速的方法, 叫做 setStyleSheet

有點忘記前面是否有提到 setStyleSheet 的功能, setStyleSheet是個非常方便的客製化功能, 可以直接在程式碼裡面為小細節改畫面設計
詳情可以直接看官方的文件 Qt Style Sheets Examples

所以在這裡我們先隨便拿一個已有的圖片試試

import sys
from PySide6.QtWidgets import QApplication, QTreeWidget, QTreeWidgetItem

data = {"Saber": {},
        "Archer": {"EMIYA": {"star": "4"}, "Gilgamesh": {"star": "5"}, "Arjuna": {"star": "5"}, "Kid Gilgamesh": {"star": "3"}},
        "Lancer": {"Cu Chulainn": {"star": "3"}, "Karna": {"star": "5"}},
        "Rider": {"Alexander": {"star": "3"}},
        "Caster": {"Zhuge Liang (El-Melloi II)": {"star": "5"}, "Solomon (Grand Caster)": {"star": "5"}},
        "Assassin": {},
        "Berserker": {"Cu Chulainn (Alter)": {"star": "5"}},
        "Avenger" : {"Edmond Dantes": {"star": "5"}}}

app = QApplication()
tree = QTreeWidget()
tree.setColumnCount(2)
tree.setHeaderLabels(["Servant", "star"])
tree.setStyleSheet("QHeaderView::section\n"
                    "{\n"
                    "border-image: url(Gilgamesh.png);\n"
                    "}")
items = []
for key, values in data.items():
    item = QTreeWidgetItem([key])
    for name, star in values.items():
        child = QTreeWidgetItem([name, star["star"]])
        item.addChild(child)
    items.append(item)

tree.insertTopLevelItems(0, items)

tree.show()
sys.exit(app.exec())

途中展示
https://ithelp.ithome.com.tw/upload/images/20220914/20151144ThdSo8KtQh.png

圖片是放上去了, 但不是我們想要的樣子, 我們先試試看把 star 這個文字去掉
一開始我是直接把 setHeaderLabels 裡的 "star" 刪掉

tree.setHeaderLabels(["Servant"])

但是 QTreeWidget 會自動把 index 補上, 如下圖
https://ithelp.ithome.com.tw/upload/images/20220914/201511440w4JLsXEgl.png
所以我們要設定一個空字串才行

tree.setHeaderLabels(["Servant", ""])

https://ithelp.ithome.com.tw/upload/images/20220914/20151144IgvAnVyFyS.png
結果令人滿意多了

接下來是要讓圖片只佔第二格
在這裡我們把 StyleSheet 修改一下變成

tree.setStyleSheet("QHeaderView::section::last\n"
                    "{\n"
                    "border-image: url(Gilgamesh.png);\n"
                    "}")

看一下成果如何
https://ithelp.ithome.com.tw/upload/images/20220914/20151144k1pDNcSNex.png
成功!
接下來我們找星星圖片放進去
https://ithelp.ithome.com.tw/upload/images/20220914/20151144PLro4iy4ze.png
痾...
好醜
我們明天再繼續修改到想要的呈現畫面吧


上一篇
【Day11】QTreeWidget
下一篇
【Day13】QTreeWidget 續續
系列文
[Python QT] 玩玩 Pyside 的各種功能31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言