1. 程式人生 > 實用技巧 >Qt QSS樣式化 選單Qmenu&QAction

Qt QSS樣式化 選單Qmenu&QAction

專案是一款平板上的軟體,選單放在了右下角,沒有用qss設定樣式之前,選單非常的小,選單項也都擠在了一塊,設定樣式後效果非常好。

先上一張效果圖吧,可以看到QSS樣式化後的選單的特點:上下左右間距增大了,調整到很是的大小,選單專案中間有一條間隔的橫線區分各個選單項,

選單中的QAction滑鼠經過時選單背景會變成藍色等。


實現這種效果如果在Qt中用C++語句實現可能有些困難,我也沒有這麼做過,後來參考了Qt幫助文件的一些QSS的例子做出了這種效果。

具體實現做法

將一下樣式新增到Qt的QSS樣式表文件中,要根據你的實際情況調整相應的長寬等值,具體的引數說明下面程式碼註釋中已經說明。如果你想對QSS有個好的瞭解建議學習一些簡單的CSS語法,QSS就是借鑑了CSS,但是比它簡單多了,之後你會發現QSS非常簡單,而且非常便捷好用,為程式美化開發省下很多時間。

 1 /*Qmenu Style Sheets*/
 2  QMenu {
 3      background-color: white; /* sets background of the menu 設定整個選單區域的背景色,我用的是白色:white*/
 4      border: 1px solid white;/*整個選單區域的邊框粗細、樣式、顏色*/
 5  }
 6  
 7  QMenu::item {
 8      /* sets background of menu item. set this to something non-transparent
 9          if you want menu color and menu item color to be different 
*/ 10 background-color: transparent; 11 padding:8px 32px;/*設定選單項文字上下和左右的內邊距,效果就是選單中的條目左右上下有了間隔*/ 12 margin:0px 8px;/*設定選單項的外邊距*/ 13 border-bottom:1px solid #DBDBDB;/*為選單項之間新增橫線間隔*/ 14 } 15 16 QMenu::item:selected { /* when user selects item using mouse or keyboard */ 17 background-color: #2dabf9;/*
這一句是設定選單項滑鼠經過選中的樣式*/ 18 }