天天看點

一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)

可以先看看我這個文章:qt關于界面設計中的一些知識總結_我是标同學的部落格_qt 水準伸展

現在我們來正式開始講解。

布局種類

qt中能稱為布局管理器的有如下6個:

  1. 水準布局(QHBoxLayout)
  2. 垂直布局(QVBoxLayout)
  3. 表單布局(QFormLayout):其實就是隻有兩列的網格布局而已。
  4. 網格布局(QGridLayout):類似一個表格,多行多列,能自動對齊,挺好用的。
  5. 棧布局(QStackLayout):設計師界面無法直接産生出來,需要用代碼建立出來。​​Qt QStackedLayout布局用法詳解​​
  6. 分裂器布局(QSplitter,這個不是繼承自QLayout類,而是QWiget類,可以設定為水準的 或者 垂直的):分裂器是用于兩個視窗的分割拖拽的,很有用的。
一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)

網上已經有大量的部落格講這些了,我就不重複說明了,挑選了一些講得不錯的部落格,可以看看:

  • Qt——布局_zhangchuan7758的部落格部落格_qt 布局 (這個部落格講了前面5種布局的基本知識)
  • QT入門之布局 水準布局、垂直布局、表單布局、網格布局_蜜汁坤絲的部落格-_qt布局 (這個部落格講了前4種布局的基本知識,用代碼如何實作)

布局的用法

我一般喜歡 界面設計 和 代碼邏輯 分離的開發方式,這樣軟體設計效果更清晰,是以界面設計當然就是盡量通過qt designer(qt界面設計師)來實作了(當然通過代碼一定也能實作這個功能的,因為設計師就是将界面xml轉為了c++代碼)。

除了棧布局(QStackLayout)無法在界面直接産生外,其它5種都是可以的,是以本文講解設計師界面如果使用這些布局。規劃的時候最好遵循"先局部後整體",先把局部布局給完成,然後再把局部布局嵌入到其它的布局當中,更容易達到我們想要的效果

方式1

布局管理器是可以這樣的,先拖拽幾個控件出來,然後選中它們,再選擇一個設計師工具欄的布局器就能聯合起來形成這個布局了,如下圖所示。我們可以看到是形成的一個單獨的QVBoxLayout對象,也就是說這個對象和QWidget類似,也是個容器,可以容納子控件的。

一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)
一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)

方式2

先拖入一個QWiget,然後拖兩個按鈕進去,再選中這個QWiget,給它選擇一個布局器即可。我們可以看到是這個widget具有了QVBoxLayout的屬性(應該時widget多繼承了它),此時這個widget自己仍然直接作為父控件的,容納了兩個按鈕子控件的。而且這個布局效果是沒有那個紅色的邊框線的。(注意:這個方式2和方式1産生的布局器,再拖到一個widget中,産生出的效果是不一樣的,因為相當于這個widget添加了一個子控件而已,這裡的子控件就是QVBoxLayout對象)

一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)
一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)

此時,對這個widget的布局器的設定就是在自己的屬性編輯視圖中了,如下圖:

一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)

各屬性參數解釋:

  • layoutXXmargin:表示設定該布局器中的 子控件 距離 父控件邊框 的上下左右距離,預設是有點大的,我們可以設小一點,使得空間利用更緊湊一些。
  • layoutSpacing:表示子控件它們之間的距離,也可以自己設一下。
  • layoutStretch:設定裡面子控件它們的寬度或者高度顯示比例。注意如果無效,我們需要都設為非0值,就有效了。 QT中layoutstretch屬性簡析_Geek.Fan的部落格-CSDN部落格_layoutrowstretch
  • layoutSizeConstraint:布局器的尺寸限制,比如被壓縮或拉伸時候,控制尺寸的政策是怎樣的,這個跟QWidget的sizePolicy屬性是一個意思,比如固定的,擴充的,等等。

 方式3

我們也可以按照方式1産生的布局器,選中它,然後右鍵變形為QWidget,就變成了方式2産生的結果了。

總結

用方式2最好。因為方式産生的是widget作為容納控件,這個就有widget的各種屬性可以設定了,就能非常靈活,但是方式1産生的是布局器作為容納控件,其屬性就那麼幾個。

關于分裂器布局QSplitter的用法

這個不能直接拖拽出來,而是方式1那樣,選中要分裂的多個控件,再選擇分裂器布局即可。

主要就如下幾個屬性設定:

  • orientation:控制分裂器的分割方向
  • opaqueResize:拖拽時候是否動态顯示效果
  • handleWidth:拖拽搖桿的寬度
  • childrenCollapsible:被分割的控件是否可以分割為0,也就是完全收起來了。
一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)

 如何調整被分割子控件之間的初始比例???網上很多部落格是用代碼實作,即setStretchFactor函數,其實不需要的。這些子控件,隻要是繼承自QWiget的,都有 水準伸展 垂直伸展 政策即sizePolicy的,隻要給這些子控件設定這個參數值為非零值,就能按照比例進行産生效果了(注意,需要運作才能看到效果,或者菜單欄選擇預覽功能也行,快捷鍵shift+alt+r)。是以這就是為什麼我推薦上面用方式2布局的原因,因為方式2得到的是QWidget,是以如果作為QSpliter的子控件,就可以設定這個值了,如果是方式1得到的QVBoxLayout對象,就沒有這個值可設,當然網上有人說此情況下通過代碼也可以設定,大家可以試試 ​​QTQSplitter設定初始比例setStretchFactor失效解決 - 百度文庫​​。

一文讀懂qt界面設計(分裂器,布局,拉伸,各種屬性設定)

這個文章講得不錯,可以看看: 【Qt開發】QSplitter的使用和設定 - ZhangPYi - 部落格園

關于布局中子控件的屬性設定

當 一個控件(繼承自QWiget)進入了布局器中了(父控件),那麼這個widget的尺寸參數,就變得很有作用了。這些參數如下:

  • geometry:控件的幾何尺寸,不再能自己控制了(自己不能編輯了),而是服從布局器來控制了
  • sizePolicy:這個很重要,父控件發生壓縮或者拉伸的時候,控制本控件的變化效果的(這個參數會跟布父控件中的兄弟控件進行比較的)。比如是Expanding,那麼拉伸時候,自己就會同樣被拉伸,如果是Preferred,就是自适應,比如兄弟控件的屬性都是Fixed,那麼它就能得到拉伸,如果别人都是Expanding,那麼就拉伸不過别人了
  • minimumSize:自己被壓縮時候可以達到的最小尺寸。比如一個按鈕,壓縮得太小,内容就看不完全了,就不好,是以就可以限定一下這個值喔。如果不起效果,可以設為非0值(就可以無限縮小了),和maximumSize設一樣的值試試 等等方法。因為這個也比較複雜,自己多試試。
  • maximumSize:自己被拉伸時候可以達到的最大尺寸
  • sizeIncrement:表示控件調整大小時的每次變化的增量大小
  • baseSize:屬性是元件的基礎大小???啥作用,沒搞懂,知道的評論區告訴我一下

可以看看這兩篇文章:Qt布局管理(1):部件拉伸原理及大小政策(sizePolicy)_hyongilfmmm的部落格-_qt sizepolicy 

Qt 第6章 布局管理(1) 在窗體中擺放視窗部件 學習筆記_liushui9的部落格-CSDN部落格_qt 在窗體布局中布局

控件所有屬性的作用 可以參考部落格:

繼續閱讀