QT實現類似於網頁step 選單效果

  很多分類資訊網站用step menu選單來提示使用者按步驟輸入。如58同城的廣告。

   在網頁上用CSS式樣實現很簡單，這個裡有人公佈實現 http://codylindley.com/blogstuff/css/stepmenu/

   

我想在QT上實現類似效果，即帶箭頭的選單，最初想到方案是

   1.按QML格式把CSS改寫，但是一是對QML用得不多，二是感覺工作量不少，這個方案放棄了。

   2.第二個方案是在同一個label裡放入一個完整選單，用根據滑鼠點選區域來判斷點了哪一塊區域，這個工程量更大，放棄

   3.使用不規則按鈕來實現帶箭頭按鈕。這好象也要實現不少，關鍵不規則按鈕中無圖象區域點選也要響應，兩個按鈕拼在一起，這會造成誤點選。

   

最後實現是一個簡單方案，即用QPushButton和QLabel拼成一個完整選單。

   每個選單項仍然由普通QPushButton來實現，但是兩個選單之間箭頭符號，由一個單獨圖片來顯示。它不響應點選，只是為了美觀。

 假設有四個步驟，每一步有三種狀態（紅，綠，灰表示），兩個按鈕之間的箭頭圖片按組合有6種，排除不可能出現的情況只需4種即可。

這個用7張圖片即可。

   四步，共有四個按鈕加上三個間隔，水平排列拼接即可，不同狀態換不同圖片即可。

最終實現效果如下，外觀上跟網頁差不多

注意一些細節

     QPushButton的背景是由Style表中背景圖象的的 background-image: url(:/comm/image/btn2.png);，使用flat風格不顯示邊框

  但是上下總有一個畫素的邊線去不掉，所以為了和label上的影象對齊，Button的高度要+2. 這是72px，

    QLabel的影象是由pixmap中指定圖片，使用flat風格不顯示邊框，高度是70px.

  QPushButton的字型的顏色是修改palette 中buttonText的顏色修改的。

   這幾個控制元件不能使用水平佈局，否則兩個控制元件之間總會有一個邊界線。

具體實現參見附件程式碼：http://download.csdn.net/detail/work4blue/5246569