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
相關文章
- Flutter 實現類似美團外賣店鋪頁面滑動效果Flutter
- 在鴻蒙中實現類似瀑布流效果鴻蒙
- Qt右鍵選單實現QT
- C/C++ Qt Tree與Tab元件實現分頁選單C++QT元件
- Flutter 實現類似TabPicker省市區選擇Flutter
- 如何在 web 頁面中實現類似 excel 固定表頭 / 標題行的效果?WebExcel
- Laravel 小技巧 - 讓路由實現類似 Model::query 的效果Laravel路由
- C++ Qt開發:Tab與Tree元件實現分頁選單C++QT元件
- 直播系統中網頁類似app頁面切換動畫的實現方式網頁APP動畫
- 類似微信首頁彈性滾動和慣性滾動效果的實現——OverScroll
- 類似dreamweaver在VSCode實現網頁製作的靜態CMS:Front MatterVSCode網頁
- iOS 類知乎”分頁”效果的實現?iOS
- TornadoFx實現側邊欄選單效果
- mysql 效果類似split函式MySql函式
- 分頁實現前臺後臺不同效果,分頁類引入
- 用 hyperf websocket 實現,類似 qq 單機登入功能Web
- (十)如果實現滑動展示選單效果
- Blazor如何實現類似於微信的Tab切換?Blazor
- GetX 實現類似微信轉發搜尋多選好友
- 網頁佈局------輪播圖效果實現網頁
- Promise的實現(step by step)Promise
- SpringBoot+WebFlux透過流式響應實現類似ChatGPT的打字機效果Spring BootWebUXChatGPT
- PostgreSQL類似OracleMERGE功能的實現SQLOracle
- Node.js 實現類似於.php,.jsp的伺服器頁面技術,自動路由Node.jsPHP伺服器路由
- vue使用iview實現單選,禁選,下拉框的效果VueView
- 小程式底部彈框 類似picker效果
- Qt基於SDL庫簡單實現YUV影片播放QT
- 基於JQuery的自定義樹形選單表格,實現展開、收起效果jQuery
- html網頁中如何實現居中效果(程式碼分享)HTML網頁
- 選單的無限極分類實現
- 類似gitbook的wiki選擇Git
- django 網站實現簡單分頁Django網站
- 原生JS實現類似《掘金》網站的圖片檢視器JS網站
- 使用.net standard實現不同內網埠的互通(類似花生殼)內網
- QT實現簡單打地鼠QT
- flutter實現類似優惠券樣式Flutter
- lakeFS:實現類似於Git或事件溯源ES的物件儲存功能Git事件物件
- 使用JS實現一個簡單的選項卡效果JS
- JavaScript實現選項卡效果JavaScript