#PYTHON3 #QT #PYSISE2 #TUTORIAL #QMenu #QAction #QToolTip #QStatusTip

PySide #15: 老闆菜單,這是啥? QMenu, QAction, ToolTip, StatusTip

老闆,今晚我想來點…

DekBan
Bucketing

--

Photo by DeMorris Byrd on Unsplash

位於視窗頂部的功能列表,大概是8成的程式都會有的功能,但…在我的程式中基本上都不會出現,一般的教學也都放在很前面的章節,我卻在這時候才拿出來,沒什麼原因,主要就是我不喜歡用。 但這的確是非常重要的功能,還是要好好學起來吶!

功能列表內包含一般的選項,同時也包含清單,都會一併在本章捷中作介紹,同時也會教大家如何對所有的物件加上提示、狀態提示、還有詳細的介紹資訊。

🗞️ QMenuBar

MenuBar就是視窗頂部的選單列,他其實也是一個容器,可以容納QMenu以及QAction兩種東西。

  • QMenu:只提供列表功能,每個選項都可以客製化,包含Icon、名稱、甚至可以做成勾選項目,但實際上每個選項內容是一個QAction
  • QAction:串接Signal / Slot是實際執行操作的物件,可被直接新增到MenuBar中也可以被加入QMenu裡面成為選項。

QMenuBar 在MainWindow中其實是內建的,你會發現當新增一個新的MainWindow ui檔時,右邊物件欄就已經有MenuBar以及StatusBar兩個物件了,我們不用再額外宣告,直接拿來使用即可。

QManuBar / QStatusBar

📃 QMenu

Menu有幾個主要的函式,用來新增選項,一個是 addAction()另一個則是 addMenu(),簡單明瞭,我們就直接來實作吧。

Create a Menu

menu_bar = self._window.menuBar()menu = QMenu('&File')
new_action = menu.addAction(QIcon('./media/chat.ico'), '&New')
open_action = menu.addAction(QIcon('./media/font.png'), '&Open')
menu_bar.addMenu(menu)
QMenu Demo

Add another Menu

sub_menu = QMenu('&Copy')
path_action = sub_menu.addAction('Copy Path')
file_action = sub_menu.addAction('Copy File')
config_action = sub_menu.addAction('Copy Config')
menu.addMenu(sub_menu)
Submenu Demo

串接Signal / Slot

選單做好了,當然要有功能,接下來我們要來串接每個Action的Slot函式。
實作上,是利用 triggered()Signal來完成串接。

path_action.triggered.connect(self.copy_path)@QtCore.Slot()
def copy_path(self):
print('Triggered : Copy Path')

🏷️ QAction

addAction()會直接回傳QAction的物件,我們可以直接拿來做QAction的設定,當然我們也可以自己定義一個QAction並且加入QMenu中。

Action本身有很多參數可以設定,另外我們也可以加入Action Group以及Separate Line來做區隔。

Declare

edit_menu = QMenu('&Edit')cut_action = self.create_action('font.png', 'Cut', 'Ctrl+X', True)
edit_menu.addAction(cut_action)

menu_bar.addMenu(edit_menu)
def create_action(self, icon, name, short_cut, checkable=False):
"""Create an action an return"""
action = QAction(QIcon('./media/{}'.format(icon)),
name, self._window)
action.setShortcut(short_cut)
action.setCheckable(checkable)

return action

Separate line

只需要直接補上 addSeparator()函式,就能新增一條分隔線囉!也可以用插入的,使用 insertSeparator(前一個 action)來完成。

edit_menu = QMenu('&Edit')cut_action = self.create_action('font.png', 'Cut', 'Ctrl+X')
paste_action = self.create_action('font.png', 'Paste', 'Ctrl+P')
copy_action = self.create_action('font.png', 'Copy', 'Ctrl+C')
undo_action = self.create_action('font.png', 'Undo', 'Ctrl+Z')
edit_menu.addAction(cut_action)
edit_menu.addAction(copy_action)
edit_menu.addAction(paste_action)
edit_menu.addSeparator()
edit_menu.addAction(undo_action)
menu_bar.addMenu(edit_menu)
QAction Demo

❓ ToopTip | StatusTip

上述這三樣東西,都可以在物件中做設定,但是他們的差異是什麼呢?!
而我們又該怎麼用,用哪個呢?讓我們一起來看看吧!

ToolTips

當滑鼠移動到物件上時,會觸發event,如果沒有把hover的event複寫掉的話,就會跳出一個黃色小框框,裡面就會有非常簡短的提示,那就是ToolTip

通常ToolTip是三者中最短的,用來告訴使用者選到的東西是什麼,實作起來也很方便,如下:

self._window.exit_btn.setToolTip('Close Window')
ToolTips Demo

StatusTips

顧名思義,就是他會將提示訊息顯示在StatusBar!通常會是一些簡短的介紹,或是目前物件的狀態等等。

因為這個很容易被覆蓋,並且如有設定Slot的情況下,若沒清除,直到下一個出現之前都會被保留著,通常我不建議使用StatusTip,除了一些特別的狀況,例如指到表格時顯示出其位置跟data等功能。

self._window.exit_btn.setStatusTip('This button will close the window')
StatusTip Demo

Source Code

完整代碼請看 :menu_tip

結論

雖然我很少使用QMenu以及QAction,但這兩個東西都是一般視窗程式常用到的東西,基本上出現率是9成以上,而搭配上ToolTip,可以使頂部功能列表更加完善也更好懂,等於是在介面中加上了註解唷!

我是夜海中的宅男DekBan,我們下次見,see ya next night.

Next Step: PySide #16: 時間的重要性(上), QTimer, QCalendar, QDateEdit

--

--

DekBan
Bucketing

เด็กบ้าน | 🌃夜裡溜搭的宅男,漂泊於月色鋪成的海