QT Creator/QT Designer水平佈局/垂直佈局/控制元件位置自適應

        在這篇文章，你將會閱讀到Qt的視覺化介面設計編輯工具QT Creator/QT Designer最重要的使用注意事項（如何讓窗體內的控制元件實現全域性自適應，以及如何使用垂直佈局和水平佈局），本人經常也犯此類錯誤，因此記錄了這篇文章。
        關鍵字：QT Creator，QT Designer，水平佈局，垂直佈局，控制元件居中，控制元件充滿窗體。

一、介面設計需求/學習需求

        在Windows窗體應用中，我們常常需要考慮其佈局和自適應的問題，比如說兩個button如何變成水平佈局，一個label如何居中，一個button如何居中，或者一個widget如何居中。但是對於我們這些初學者而言，網上的部落格大都侃侃而談，像我這種菜雞很難去get到其中真正的佈局使用方法，真的，我看了十幾篇了，實現的確是我想要的效果，但是一到Designer上面呵呵呵呵呵，不知道如何下手。在這裡，我將記錄一下兩個button（比如垂直的登入註冊按鈕）是如何變成一個整體的控制元件（水平佈局或者垂直佈局），以及在全域性如何實現自適應（居中）。你需要有以下的環境：

1. 一臺電腦 ；
2. Qt Creator或者Qt Designer 。
   
   

二、水平佈局和垂直佈局

        1、 水平佈局
        水平佈局的物件可以是label、button、widget、spacer以及其他控制元件。這裡，我使用Qt Designer，以兩個QPushButton為例，構建一個水平佈局的示例。
        第一步，Qt Designer->檔案，新建一個窗體，它可以是MainWindow或者Widget都行。如下圖所示。

        第二步，往左邊的控制元件欄拖動兩個PushButton。如下圖所示。

        第三步，選中兩個PushButton（按住ctrl鍵，滑鼠單擊就行）。如下圖所示。

        第四步，點選Qt Designer頂部的工具欄中的下面一個圖示，它就表示建立水平佈局的按鈕。如圖所示。然後這就是水平佈局的使用方法，它可以從PushButton推廣到Qt的其他控制元件，比如選中一個PushButton和一個QWidget或者Label，都是可以的。

        第五步，得到以下水平佈局，如圖。




        2、 垂直佈局
        第一步，往左邊的控制元件欄再拖動兩個PushButton或者Label也行。
        第二步，點選Qt Designer頂部的工具欄中的下面一個圖示，它就表示建立垂直佈局的按鈕。如圖所示。跟水平佈局的使用方法類似。

        第三步，得到如下圖所示的垂直佈局。

三、控制元件位置全域性自適應

        這裡所說的全域性自適應是說，是指在一個窗體裡面，控制元件的位置會隨著視窗的變化而變化，而不是固定在某一個位置。例如，一個button在窗體中的水平居中或者垂直居中。但是初學者遇到最多的問題可能是，知道怎麼使用水平和垂直的Spacer，但是這個spacer沒有辦法填充整個窗體。實際上，這個問題也算控制元件居中問題吧。下面就是這個問題的解決方案。
        問題如圖所示，無論視窗如何變化，對於整個窗體而言spacer一直不起作用（本來想實現隨著窗體寬度變化，那一組控制元件可以一直居中，那一組控制元件的寬度一直不變）。

        實際上，這是因為對於根Widget，我們沒有給出它的佈局。只要給這個根Widget一個佈局，它就可以實現控制元件位置的全域性自適應了。

        例如，我設定根Widget控制元件的佈局為垂直，那麼就會得到如下的效果：隨意改變窗體的寬度，這兩個PushButton（構成一組控制元件）就能夠一直居中啦。

四、參考資料

[1]:QT Creator設計窗體的時候如何把控制元件給佔滿視窗，
QTCN開發網 http://www.qtcn.org/bbs/simple/?t33073.html