Qt怎么实现设置窗口的的布局

发表于 分类于 Valine：

设置窗口包含多个界面，采用合适的布局会更美观。

总体布局

设置左边为列表窗口leftWidget(QListWidget)，展示多个总分类，右边是栈窗口rightStack(QStackedWidget)，根据左边的选择展示对应index的窗口.
当然窗口少不了的两个按钮–确认和取消也放在右边，和栈窗口组成上下结构。
总体布局便是左，右上，右下。用代码实现

1
2
3
4
5
6
7
8
9
10
11
// pre指向设置对话框对象
QDialog *pre = new QDialog(this);
pre->setGeometry(this->x(),this->y()+this->height()/4,500,400);
// 采用左，右上，右下布局
QHBoxLayout *mainLayout = new  QHBoxLayout(pre);
QHBoxLayout *leftLayout = new QHBoxLayout;
QVBoxLayout *rightLayout = new QVBoxLayout;
mainLayout->addLayout(leftLayout,1);//设置左侧list所占的宽度
mainLayout->addLayout(rightLayout,5);
mainLayout->setSpacing(2);
pre->setLayout(mainLayout);

左侧布局

左侧包括两个选项

1
2
3
4
leftWidget = new QListWidget;
leftWidget->insertItem(0, tr("Environment"));
leftWidget->insertItem(1, tr("Editor"));
leftLayout->addWidget(leftWidget);

右侧窗口类设计

1
2
3
4
5
6
7
8
9
10
class EnvironmentPage : public QWidget
{
    Q_OBJECT
public:
    explicit EnvironmentPage(QSettings *settings, QWidget *parent);
protected:
    QWidget *SetFontLayout();
    QWidget *SetLangLayout();
    QSettings *setting;
};

右侧布局

右上侧布局

1
2
3
4
5
6
rightStack = new QStackedWidget;
EnvironmentPage *environment = new EnvironmentPage(setting, pre);
EditorPage *editor = new EditorPage(setting, pre);
// 把两个窗口入栈
rightStack->addWidget(environment);
rightStack->addWidget(editor);

右下侧布局

1
2
3
4
rightBottom = new QWidget;
QDialogButtonBox env(rightBottom);
env.addButton(QDialogButtonBox::Ok);env.addButton(QDialogButtonBox::Cancel);
rightBottom->addActions(env.actions());

右侧布局

1
2
3
4
rightLayout->addWidget(rightStack);
rightLayout->addWidget(rightBottom);
rightLayout->setStretchFactor(rightStack,5);
rightLayout->setStretchFactor(rightBottom,1);

然后要把左侧列表选择事件与右侧对应窗口的显示对应起来并运行程序

1
2
connect(leftWidget, SIGNAL(currentRowChanged(int)), rightStack, SLOT(setCurrentIndex(int)));
pre->exec();

栈窗口内单个窗口的布局

由于一个窗口对应多个分类，故使用选项卡窗口tabWidget
一个窗口的总布局如下,其中包含font和lang两个tab页面，分别用两个函数实现

1
2
3
4
5
6
7
8
9
10
11
EnvironmentPage::EnvironmentPage(QSettings *settings, QWidget *parent){
setting = settings;
QGridLayout *mainLayout = new QGridLayout(this);
QTabWidget *tab = new QTabWidget(this);
QWidget *font = SetFontLayout();
QWidget *lang = SetLangLayout();

tab->addTab(font,tr("Font"));
tab->addTab(lang,tr("Language"));
mainLayout->addWidget(tab);
}

font页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 设置font页面的布局
QWidget *EnvironmentPage::SetFontLayout(){
    QWidget *font = new QWidget;
    // 分组
    QGroupBox *box = new QGroupBox(tr("font"), font);
    // 总布局
    QVBoxLayout *vLayout = new QVBoxLayout(box);
    // 行内布局
    QHBoxLayout *hLayout = new QHBoxLayout;
    QLabel *lb_font = new QLabel(tr("Font:"));
    QSpinBox *sp_font = new QSpinBox;
    hLayout->addWidget(lb_font);
    hLayout->addWidget(sp_font);
    vLayout->addLayout(hLayout);
    vLayout->addStretch(1);
    return font;
}

lang页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
QWidget *EnvironmentPage::SetLangLayout(){
    QWidget *lang = new QWidget;
    QGroupBox *box = new QGroupBox(tr("lang"), lang);
    // 总布局
    QVBoxLayout *vLayout = new QVBoxLayout(box);
    // 行内布局
    QHBoxLayout *hLayout = new QHBoxLayout;
    QLabel *lb_lang = new QLabel(tr("Language:"));
    QComboBox *langbox = new QComboBox;
    langbox->addItem(tr("Chinese"));
    langbox->addItem(tr("English"));
    hLayout->addWidget(lb_lang);
    hLayout->addWidget(langbox);
    vLayout->addLayout(hLayout);
    vLayout->addStretch(1);
    return lang;
}

这样完成之后的窗口布局如下图：
main.png