本文涉及：Windows操作系統(tǒng)，Python，PyQt5，Qt Designer，PyCharm

一、自適應(yīng)原理 

        自適應(yīng)其實(shí)很簡單，只要搞懂原理，你就能隨心所欲地去布置你的頁面了。

        它的基礎(chǔ)是布局，有了布局，再在布局中放置各種控件，我們就能讓控件實(shí)現(xiàn)自適應(yīng)的效果，即：不管是點(diǎn)擊最大化按鈕之前還是之后，控件的大小比例都能跟隨窗口大小的變化而變化。

        先了解一下布局，主要有以下3種：

        還有其它布局，但是用的不多，本文暫且不提。

二、基礎(chǔ)布局示例

         打開Qt Designer，新建一個窗口，拖進(jìn)一個frame控件，然后通過布局來讓其自適應(yīng)窗口。如下圖所示：

         從右側(cè)的對象查看器中我們可以看到，有2個圖標(biāo)的右下角是打了紅色的禁止符號，這就代表當(dāng)前對象是沒有使用布局的。前面我們說到，如果控件沒有在布局中，那么它就不能自適應(yīng)窗口。

        那我們?nèi)绾巫屵@個frame控件自適應(yīng)窗口呢？其實(shí)很簡單，因?yàn)槲覀兊哪康氖亲屵@個frame去自適應(yīng)窗口，那么我們就將整個窗口作為一個布局容器就行了。

        具體做法就是，將鼠標(biāo)點(diǎn)擊窗口中沒有控件的空白處，再點(diǎn)擊右鍵，設(shè)置水平布局就可以了。注意：不是灰色區(qū)域！步驟如下圖所示：

         設(shè)置完成后，你就會發(fā)現(xiàn)，frame的大小直接和窗口大小一致了。再觀察右側(cè)對象查看器中，frame對象上面的centralwidget的布局圖標(biāo)是正常顯示了，剛剛的紅色禁止標(biāo)志已經(jīng)消失了。如下圖所示：

         是不是這樣就結(jié)束了？理論上是的，但是還不夠完美。如果你仔細(xì)觀察就會發(fā)現(xiàn)，frame的邊緣和窗口的藍(lán)色邊緣并不是完全貼合的，這就會導(dǎo)致邊緣會有一定的空隙，也是比較影響美觀的。

        因?yàn)樵赒t Designer中，布局里是會默認(rèn)留出空隙的，需要我們自己手動調(diào)整一下，調(diào)整步驟如下：

        第1步，我們鼠標(biāo)單擊對象查看器中的centralwidget，再單擊屬性編輯器（或者按組合鍵：Ctrl + I，字母i，不是1），對centralwidget進(jìn)行具體的設(shè)置。

        第2步，將centralwidget的屬性欄滑到最底部，我們會看到有個名叫Layout的屬性，然后將里面的數(shù)值全部改成0即可。

        如下圖所示：

         屬性含義我給大家翻譯一下，對照上圖了解一下即可，不需要死記硬背：

        在Qt Designer中，按組合鍵：Ctrl + R預(yù)覽設(shè)計，再點(diǎn)擊右上角的最大化按鈕測試一下，frame也完美和窗口大小保持一致了。如果不方便觀察，可以先將frame的背景色設(shè)置成任意彩色就能很清楚地去觀察了。

        至此，我們的基礎(chǔ)示例就完成了。 

三、高級布局示例：布局嵌套布局

        上面的基礎(chǔ)示例中只添加了1個布局，但是只要我們的程序稍微復(fù)雜一些，都會用到很多控件，每個控件在窗口中的位置也不同。

        比如現(xiàn)在非常大眾化的左側(cè)菜單，右側(cè)工作區(qū)的布局模式，如下圖所示：

         這種布局模式很經(jīng)典，也很直觀。我們從Qt的角度去看這張圖，左側(cè)黑色是一個treeWidget，右側(cè)是一個stackedWidget，然后stackedWidget里面還有很多控件。

        那么以此為例，因?yàn)閠reeWidget和stackedWidget是左右放置的，那么我們就可以用水平布局來設(shè)置。

        根據(jù)上面的基礎(chǔ)示例，我們分別拖拽1個treeWidget和1個stackedWidget進(jìn)來，然后單擊窗口空白處，鼠標(biāo)右鍵設(shè)置水平布局，最后把Layout屬性下的數(shù)值全部設(shè)置為0，結(jié)果如下圖所示：（為了便于大家觀察，我把stackedWidget的背景設(shè)置成淺灰色）

        從圖中我們看到，菜單欄和工作區(qū)在窗口中對半展示了，這個結(jié)果并不是我們想要的。所以我們還需要設(shè)置一下這2個控件的顯示比例，設(shè)置方法同上：我們還是單擊centralwidget，然后找到Layout屬性下的layoutStretch（布局拉伸），默認(rèn)是“0,0”，現(xiàn)在我們將其設(shè)置為“1,3”。

          這里的布局拉伸，你可以理解為拉伸比例，00就是對半展示，13就是1比3展示。修改數(shù)值后，我們驚喜地發(fā)現(xiàn)界面變成了下面這樣：

        展示的比例是基本符合我們的要求了，但是按組合鍵Ctrl + R預(yù)覽，再點(diǎn)擊最大化按鈕后發(fā)現(xiàn)，界面變成了下面這樣：

        還是不對勁，最大化之后雖然菜單欄和工作區(qū)的比例還是1比3，但是這個比例對于菜單來講還是太寬了，顯得菜單上的字很密很小。當(dāng)然，菜單上的字體大小和間距我們也是可以調(diào)整的，但是1比3的比例對于菜單欄上最長只有4個字的項來說，還是太寬了。

        所以我們的目的就很明顯了，就是要將菜單欄的寬度再縮小一些。寬度縮小，這就涉及到具體數(shù)值的修改了，而剛剛的比例修改只能是整數(shù)，不能精確到小數(shù)點(diǎn)后幾位。

        那么具體怎么做呢？方法如下：

         因?yàn)槲覀冎皇菍Σ藛螜谛薷?，所以在對象查看器中，我們鼠?biāo)單擊選中treeWidget，按組合鍵Ctrl + I或者單擊底部的屬性編輯器進(jìn)入treeWidget的具體屬性界面，找到一項名為maximumSize（最大尺寸）下的寬度后面的16777215修改成180。如下圖所示：

         修改好菜單欄的最大寬度之后，我們再預(yù)覽一下，發(fā)現(xiàn)菜單欄的寬度被固定了，只有垂直高度是隨窗口大小的變化而變化的。這樣的結(jié)果就基本符合我們的預(yù)期了。

        看到這里，可能有小伙伴會問：哎，不對呀角角，你這第三個標(biāo)題上不是寫著布局嵌套布局嗎？怎么只是比基礎(chǔ)示例多了個控件而已？

        別急哈~ 我下面要講的才是重點(diǎn)哦~

        通過剛剛的例子，相信大家對水平布局已經(jīng)很熟悉了?，F(xiàn)在呢，咱們可以思考一下：是否可以將某一個布局作為控件再放到窗口的水平布局中去呢？答案是肯定的。

        我們可以看到，上面我放的一張網(wǎng)圖中，工作區(qū)中是有很多大大小小的控件在其中的。所以我們在工作區(qū)即stackedWidget中，還要再加布局才行。

        我們再拖拽3個frame到stackedWidget中，然后按Ctrl鍵不放依次選中3個frame并設(shè)為水平布局，如下圖所示：

         預(yù)覽一下我們發(fā)現(xiàn)，窗口最大化之后底部的2個菜單欄和工作區(qū)的大小是正常變化的，但是這3個frame卻是紋絲不動。

        動腦筋想想，是不是哪里少了一步？

        噢！對了，之前在設(shè)置底部2個控件的時候是不是在窗口的空白處又設(shè)置了一下水平布局？那我們依樣畫葫蘆再在stackedWidget的空白處鼠標(biāo)右鍵加一個水平布局，發(fā)現(xiàn)結(jié)果變成下面這樣……

         這肯定不是我們想要的，那是不是因?yàn)榭丶倭?，所以這3個frame才把stackedWidget里面全占滿了呢？并不是，如果我們再拖拽控件進(jìn)去，依然是這樣排布，因?yàn)檫@3個frame外面最鄰近的布局是水平布局，只要在水平布局里面，放再多控件也還是從左到右排布的。

        那么現(xiàn)在有2種解決辦法：

        第1種，是選中frame外的水平布局右鍵修改成柵格布局，這樣上下左右就都能放控件了，也能正常隨著窗口大小自適應(yīng)了，這個也算是布局嵌套布局了，但是只嵌套了一層而已。

        第2種，是打破布局，即刪除當(dāng)前窗口中所有的布局，然后再重新布局。操作方法：鼠標(biāo)單擊窗口空白處，點(diǎn)擊鼠標(biāo)右鍵，單擊布局，找到打破布局再點(diǎn)擊即可。如下圖所示：

         這樣，所有的布局就會被一鍵全部刪除，控件也會被隨機(jī)擺放在窗口中，大小也有所變化。但是別慌，打破布局之后，我們先觀察一下下面這張網(wǎng)圖：

         區(qū)域①是一個菜單，這是單獨(dú)的1個treeWidget控件，由于它的高度是和窗口的寬度是相等的，所以我們是不是就可以將區(qū)域②③④看做一個整體和區(qū)域①做一個水平布局？

        然后再觀察②③④，這3個是不是上下排布的？所以我們把這3個設(shè)置成垂直布局。再然后，我們看到區(qū)域③里面是不是又有3個frame是水平排布，那再把這3個設(shè)置到一個水平布局中。

        因?yàn)樽筮呏挥?個菜單，右邊的控件是很多的，所以我們先把右邊的控件從上到下依次設(shè)置進(jìn)布局中，然后選中②③④的布局，再右鍵給外面套一個垂直布局。

        最后我們選中菜單欄，然后再選中工作區(qū)最外面的垂直布局，再右鍵套一個水平布局，這樣就大功告成啦！

        需要注意的是：如果窗口中需要多層布局時，一定要按照從里到外、從小到大的順序設(shè)置布局。

四、其它特殊控件自適應(yīng)補(bǔ)充

1. tableWidget

        這個是表格控件，我之前在使用時，發(fā)現(xiàn)它在設(shè)置布局之后，控件的大小雖然是跟隨窗口大小改變的，但是表格里的數(shù)據(jù)卻不是自適應(yīng)控件體的，這個需要在業(yè)務(wù)邏輯代碼中加一句如下代碼：

self.tableWidget.horizontalHeader().setSectionResizeMode(QHeaderView.Interactive | QHeaderView.Stretch)

到此這篇關(guān)于關(guān)于pyqt5控件自適應(yīng)窗口超詳細(xì)知識點(diǎn)匯總的文章就介紹到這了,更多相關(guān)pyqt5控件自適應(yīng)窗口知識點(diǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論