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