VS code 框架UI仿製

介紹:

1.模仿了VS code的配色,控件佈局,風格

2.右側狀態欄按鈕可以切換子頁面

3.上方標題欄採用自定義的方法,實現了點擊狀態欄拖拽,還有最小化,中等顯示,最大化顯示,關閉的功能.

4.可以拖動右下角從而改變整個窗口的大小和內部控件的大小和位置

效果預覽:

VScode:在這裏插入圖片描述成果的總窗口:
在這裏插入圖片描述功能:
在這裏插入圖片描述

難點:

1.左側狀態欄的持續性改變pressed狀態.這個在之前的文章說過.

2.上方自定義標題欄

3.整個頁面佈局(怎麼讓窗口內的控件按照這種方式排列)

實現方法,細節概述:

問題主要是佈局的問題,不管是你的控件是layout還是frame還是toolbar還是statusbar還是自定義控件,目標就是讓它緊靠在窗口上方,再讓狀態欄靠在它的下面,這就是主要問題.整個過程中,我試過以下幾種方法:**

1.純代碼方式(不用ui),用兩個toolbar實現;
2.純代碼方式(不用ui),用layout實現;
3.純文本方式(不用代碼和ui界面),直接去修改ui界面那個xml文件,修改元素的屬性和包含關係
這三種方式都失敗了,它們需要你對相關控件的佈局安排方式熟練掌握(sizePolicy,layout,strech),這塊很亂,還是ui設計好用,要考慮的東西少,學習成本少,下面說一下解決ui途徑的關鍵問題:

ui問題1.往主頁面拖標題欄的時候,沒法緊緊挨在一起:
解決這個問題有兩個關鍵點:
1.設置centralWidget的佈局爲verticallayout,
2.將centralWidget的margins和spaceing的相關屬性都設置爲0
詳細講解:
這是沒有設置centralWidget的時候右側對象樹的顯示:
在這裏插入圖片描述
這種情況是肯定沒辦法的,你可以隨便先拖進去一個控件,然後在右側的對象樹點擊選中centralWidget,然後再點擊右鍵設置佈局;
之後你就可在下方的屬性欄設置layout的屬性了
在這裏插入圖片描述ui問題2:使用佈局QHBoxLayout和QVBoxLayout無法設置最大寬度,按照合理大小布局很麻煩:
這裏想說的是善用QFrame,我發現QFrame是個在ui中非常好用的控件,好處如下:
1.有Maxi/Mini mumSize的屬性,控制大小很方便
2.QFrame可以用QSS設置樣式,比layout也好很多;
綜上:在ui設計的時候把QFrame當父窗口使用,解和layout,非常好用.

至於如何拖動標題欄,如何實現最大化按鈕,這網上有很多文章了,這裏其實主要講ui設計的技巧和方法.

贊過5個代碼和圖標資源

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章