# Ruby Qt 中的布局管理 > 原文： [http://zetcode.com/gui/rubyqt/layoutmanagement/](http://zetcode.com/gui/rubyqt/layoutmanagement/) 在 Ruby Qt 編程教程的這一部分中，我們將介紹布局管理器。 在設計應用的 GUI 時，我們決定要使用哪些組件以及如何在應用中組織這些組件。 為了組織我們的組件，我們使用專門的不可見對象，稱為布局管理器。 Qt 中有幾個選項。 我們可以使用絕對定位，內置布局管理器或創建自定義布局管理器。 我們還可以使用 Qt Designer 直觀地構建布局。 Qt 有一些重要的內置布局管理器。 `Qt::VBoxLayout`類垂直排列小部件。 `Qt::HBoxLayout`水平排列小部件。 `Qt::GridLayout`類將小部件布置在網格中。 網格布局是最靈活的布局管理器。 框布局可以相互嵌套以創建復雜的布局。 ## 絕對定位 在大多數情況下，程序員應使用布局管理器。 在某些情況下，我們可以使用絕對定位。 在絕對定位中，程序員以像素為單位指定每個小部件的位置和大小。 如果我們調整窗口大小，則小部件的大小和位置不會改變。 在各種平臺上，應用看起來都不同，在 Linux 上看起來不錯，在 Mac OS 上看起來不太正常。 在我們的應用中更改字體可能會破壞布局。 如果我們將應用翻譯成另一種語言，則必須重做布局。 對于所有這些問題，僅在有理由時才使用絕對定位。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # In this program, we lay out widgets # using absolute positioning. # # author: Jan Bodnar # website: www.zetcode.com # last modified: September 2012 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Absolute" init_ui resize 300, 280 move 300, 300 show end def init_ui setStyleSheet "QWidget { background-color: #414141 }" bardejov = Qt::Pixmap.new "bardejov.jpg" rotunda = Qt::Pixmap.new "rotunda.jpg" mincol = Qt::Pixmap.new "mincol.jpg" barLabel = Qt::Label.new self barLabel.setPixmap bardejov barLabel.move 20, 20 rotLabel = Qt::Label.new self rotLabel.setPixmap rotunda rotLabel.move 40, 160 minLabel = Qt::Label.new self minLabel.setPixmap mincol minLabel.move 170, 50 end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在此示例中，我們使用絕對定位顯示了三幅圖像。 ```rb barLabel = Qt::Label.new self barLabel.setPixmap bardejov ``` `Qt::Label`小部件用于保存圖像。 ```rb barLabel.move 20, 20 ``` 我們使用`move`方法將標簽放置在窗口上的`x = 20`，`y = 20`處。 調整窗口大小時，標簽將保留其初始大小。  圖：絕對定位 ## 按鈕示例 在下面的示例中，我們將在窗口的右下角放置兩個按鈕。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # In this program, we use box layouts # to position two buttons in the # bottom right corner of the window. # # author: Jan Bodnar # website: www.zetcode.com # last modified: September 2012 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Buttons" init_ui resize 330, 170 move 300, 300 show end def init_ui vbox = Qt::VBoxLayout.new self hbox = Qt::HBoxLayout.new ok = Qt::PushButton.new "OK", self apply = Qt::PushButton.new "Apply", self hbox.addWidget ok, 1, Qt::AlignRight hbox.addWidget apply vbox.addStretch 1 vbox.addLayout hbox end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 我們使用嵌套框布局來獲得我們想要的布局。 ```rb vbox = Qt::VBoxLayout.new self hbox = Qt::HBoxLayout.new ``` 我們使用一個垂直框和一個水平框。 ```rb ok = Qt::PushButton.new "OK", self apply = Qt::PushButton.new "Apply", self ``` 這是兩個將進入窗口右下角的按鈕。 ```rb hbox.addWidget ok, 1, Qt::AlignRight ``` 我們將確定按鈕放入水平框中。 第二個參數是`stretch`因子。 它將擴大分配給“確定”按鈕的區域。 它會占用所有可用空間。 該區域內小風口的對齊方式由第三個參數控制。 `Qt::AlignRight`將按鈕向右對齊。 ```rb vbox.addStretch 1 ``` 這條線創建了一個垂直擴展的白色空間，它將帶有按鈕的水平框推到底部。 ```rb vbox.addLayout hbox ``` 水平框嵌套在垂直框中。  圖：按鈕示例 ## Windows 示例 以下是嵌套框布局更復雜的示例。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # In this program, use box layouts # to create a Windows example # # author: Jan Bodnar # website: www.zetcode.com # last modified: September 2012 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Windows" init_ui resize 350, 300 move 300, 300 show end def init_ui vbox = Qt::VBoxLayout.new self vbox1 = Qt::VBoxLayout.new hbox1 = Qt::HBoxLayout.new hbox2 = Qt::HBoxLayout.new windLabel = Qt::Label.new "Windows", self edit = Qt::TextEdit.new self edit.setEnabled false activate = Qt::PushButton.new "Activate", self close = Qt::PushButton.new "Close", self help = Qt::PushButton.new "Help", self ok = Qt::PushButton.new "OK", self vbox.addWidget windLabel vbox1.addWidget activate vbox1.addWidget close, 0, Qt::AlignTop hbox1.addWidget edit hbox1.addLayout vbox1 vbox.addLayout hbox1 hbox2.addWidget help hbox2.addStretch 1 hbox2.addWidget ok vbox.addLayout hbox2, 1 setLayout vbox end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在此布局中，我們使用兩個垂直和水平框。 ```rb box = Qt::VBoxLayout.new self ``` 這是示例的基本布局。 ```rb windLabel = Qt::Label.new "Windows", self ``` 首先是標簽小部件。 它只是轉到垂直框的頂部。 ```rb vbox1.addWidget activate vbox1.addWidget close, 0, Qt::AlignTop hbox1.addWidget edit hbox1.addLayout vbox1 vbox.addLayout hbox1 ``` 在窗口的中心部分，我們有一個文本編輯小部件和兩個垂直排列的按鈕。 這些按鈕進入垂直框。 在此垂直框中，按鈕與頂部對齊。 垂直框和文本編輯進入水平框。 該水平框轉到標簽窗口小部件正下方的基本垂直框。 ```rb hbox2.addWidget help hbox2.addStretch 1 hbox2.addWidget ok vbox.addLayout hbox2, 1 ``` 幫助和確定按鈕進入另一個水平框。 這兩個按鈕之間有一個擴大的空白區域。 同樣，水平框轉到基本垂直框。 ```rb setLayout vbox ``` 基本的垂直框設置為窗口的主要布局。  圖：窗口示例 ## 新文件夾示例 在最后一個示例中，我們使用`Qt::GridLayout`管理器創建“新文件夾”布局示例。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # In this program, use the GridLayout # to create a New Folder example. # # author: Jan Bodnar # website: www.zetcode.com # last modified: September 2012 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "New Folder" init_ui resize 300, 300 move 300, 300 show end def init_ui grid = Qt::GridLayout.new self nameLabel = Qt::Label.new "Name", self nameEdit = Qt::LineEdit.new self text = Qt::TextEdit.new self okButton = Qt::PushButton.new "OK", self closeButton = Qt::PushButton.new "Close", self grid.addWidget nameLabel, 0, 0 grid.addWidget nameEdit, 0, 1, 1, 3 grid.addWidget text, 1, 0, 2, 4 grid.setColumnStretch 1, 1 grid.addWidget okButton, 4, 2 grid.addWidget closeButton, 4, 3 end end app = Qt::Application.new(ARGV) QtApp.new app.exec ``` 在我們的示例中，我們有一個標簽，一行編輯，一個文本編輯和兩個按鈕。 ```rb grid = Qt::GridLayout.new self ``` 我們創建`Qt::GridLayout`管理器的實例。 ```rb grid.addWidget nameLabel, 0, 0 ``` 我們將標簽小部件放置在網格的第一個單元格中。 單元格從 0 開始計數。最后兩個參數是行號和列號。 ```rb grid.addWidget nameEdit, 0, 1, 1, 3 ``` 線編輯窗口小部件位于第一行第二列。 最后兩個參數是行跨度和列跨度。 在水平方向上，小部件將跨越三列。 ```rb grid.setColumnStretch 1, 1 ``` 該方法的參數是列號和拉伸因子。 在這里，我們將拉伸因子 1 設置到第二列。 這意味著此列將占用所有剩余空間。 之所以這樣設置，是因為我們希望按鈕保持其初始大小。  圖：新文件夾 example 在 Ruby Qt 教程的這一部分中，我們提到了小部件的布局管理。