Qt學習之路(5)：元件佈局 Layout 管理器完整教學

絕對定位需手動處理視窗縮放回應，Qt 提供 佈局管理器 自動調整，類似 Swing 但更簡潔。

三大核心 Layout

• QHBoxLayout：水平左至右
• QVBoxLayout：垂直上至下
• QGridLayout：網格狀（類 HTML table）

範例：年齡輸入介面（QSpinBox + QSlider 同步）

#include <QtGui/QApplication>
#include <QtGui/QWidget>
#include <QtGui/QSpinBox>
#include <QtGui/QSlider>
#include <QtGui/QHBoxLayout>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    QWidget *window = new QWidget;
    window->setWindowTitle("Enter your age");

    QSpinBox *spinBox = new QSpinBox;
    QSlider *slider = new QSlider(Qt::Horizontal);
    spinBox->setRange(0, 130);
    slider->setRange(0, 130);

    QObject::connect(slider, SIGNAL(valueChanged(int)), spinBox, SLOT(setValue(int)));
    QObject::connect(spinBox, SIGNAL(valueChanged(int)), slider, SLOT(setValue(int)));
    spinBox->setValue(35);

    QHBoxLayout *layout = new QHBoxLayout;
    layout->addWidget(spinBox);
    layout->addWidget(slider);
    window->setLayout(layout);

    window->show();
    return app.exec();
}

最大化時 Layout 自動調整，無需額外程式碼。

信號槽避免無限遞迴原理

雙向連接 valueChanged ↔ setValue 看似會遞迴，實則不然：setValue 若數值未改變，不發出 valueChanged 信號。以 spinBox->setValue(35) 為例：

1. spinBox 0→35，發出 valueChanged(35)
2. slider 接收，setValue(35)，發出 valueChanged(35)
3. spinBox 接收，發現值相同（35），不發出信號，鏈路終止

新值透過信號槽參數傳遞，實現多元件狀態同步（資料綁定）。

跨平台外觀一致性

Qt 自繪元件模擬原生風格，各平台外觀惟妙惟肖。Layout 支援 addWidget() 加入元件、addLayout() 巢狀子佈局，組合方式無窮無盡。