QT实现类似于网页step 菜单效果

转自：http://blog.csdn.net/work4blue/article/details/8788295

  很多分类信息网站用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