Qt学习之路17--布局管理器之向导界面_qt 导向模式

前前后后学习了四种布局管理器了，分别是盒子布局管理器QBoxLayout、网格布局管理器QGridLayout、表单布局管理器QFormLayout、栈式布局管理器QStackedLayout。

练习

可以通过这四种布局管理器实现一个向导界面，向导界面的作用就不用多说了吧，在电脑上装过软件的人都接触过，下一步、下一步、下一步、完成。向导界面就是用来指引用户操作的。
练习要求：在同一个界面上展现不同的向导页面；通过点击上一步或下一步进行页面切换；不同页面上的组件及组件排布都不相同；页面上的组件排布需要将四种布局管理器都用上。

直接通过图示展现我们需要做的以及如何做。
- 在界面整体使用QVBoxLayout管理QStackedLayout和QHBoxLayout，其中QHBoxLayout管理两个按钮，通过点击按钮设置QStackedLayout的currentIndex值达到显示不同页面的效果。
- QStackedLayout用来管理几个需要显示的页面。

- 之前在使用QStackedLayout时候也实现过，通过中间组件QWidget进行子组件管理，最后使用QStackedLayout对中间组件QWidget进行管理，这样就能形成一个丰富多样的向导页面。
- 这是因为任意的容器类都可以指定布局管理器，并且同一个布局管理器里面的组件拥有相同的父组件，这样在管理布局管理器的时候也就隐式的指定了父子关系，所以我们就能在QStackedLayout中使用多个页面的父组件作为其子组件进行管理。

上代码：

所需组件准备

    QPushButton preBtn;
    QPushButton nextBtn;
    QStackedLayout sLayout;//栈式布局管理器

    //界面所需组件
    QLabel label[4];
    QLineEdit edit[3];
    QLabel text;
    QPushButton Btn[3];

    QWidget* get1stpage();//返回子页面所在父组件
    QWidget* get2ndpage();
    QWidget* get3rdpage();

private slots:
    void OnPreBtnClicked();//与向导按钮关联的槽函数
    void OnNextBtnClicked();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

页面1：

QWidget* Widget::get1stpage()
{
    QWidget* ret = new QWidget();
    QGridLayout* gLayout = new QGridLayout();

    label[0].setText("C");
    label[1].setText("C++");
    label[2].setText("JAVA");
    label[3].setText("Python");

    gLayout->addWidget(&label[0], 0, 0);//添加到布局管理器
    gLayout->addWidget(&label[1], 0, 1);
    gLayout->addWidget(&label[2], 1, 0);
    gLayout->addWidget(&label[3], 1, 1);

    ret->setLayout(gLayout);

    return ret;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

使用QGridLayout管理四个标签组件

页面2：

QWidget* Widget::get2ndpage()
{
    QWidget* ret = new QWidget();
    QFormLayout* fLayout = new QFormLayout();

    edit[0].setText("TianQingSong");
    edit[1].setText("I haven\'t.");
    edit[2].setText("programmer");

    fLayout->addRow("Name:",&edit[0]);
    fLayout->addRow("Girlfriend:",&edit[1]);
    fLayout->addRow("Job:",&edit[2]);

    fLayout->setLabelAlignment(Qt::AlignRight);

    ret->setLayout(fLayout);
    return ret;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

该页面使用表单布局管理器QFormLayout。

页面3：

QWidget* Widget::get3rdpage()
{
    QWidget* ret = new QWidget();
    QHBoxLayout* HBoxLayout = new QHBoxLayout();
    QVBoxLayout* VBoxLayout = new QVBoxLayout();

    text.setText("Are You Happy Now?");
    text.move(0, 0);

    Btn[0].setText("Happy very much");
    Btn[1].setText("Sad very much");
    Btn[2].setText("Just so so");

    HBoxLayout->addWidget(&Btn[0]);
    HBoxLayout->addWidget(&Btn[1]);
    HBoxLayout->addWidget(&Btn[2]);

    VBoxLayout->addWidget(&text);
    VBoxLayout->addLayout(HBoxLayout);

    ret->setLayout(VBoxLayout);

    return ret;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

该页面使用QBoxLayout管理按钮和标签。

向导按钮的槽函数

void Widget::OnPreBtnClicked()
{
    int index = ((sLayout.currentIndex() - 1) + 3) % sLayout.count();//循环切换页面
    sLayout.setCurrentIndex(index);//设置当前显示的页面
}
void Widget::OnNextBtnClicked()
{
    int index = ((sLayout.currentIndex() + 1)) % sLayout.count();
    sLayout.setCurrentIndex(index);
}
1
2
3
4
5
6
7
8
9
10

最后一步是组织QStackedLayout和QHBoxLayout进行整体页面布局

QVBoxLayout* vLayout = new QVBoxLayout();
QHBoxLayout* hLayout = new QHBoxLayout();

//设置按钮属性
preBtn.setText("Pre Page");
preBtn.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);//宽度可扩展，高度不变
preBtn.setMinimumSize(160, 30);

nextBtn.setText("Next Page");
nextBtn.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);//宽度可扩展，高度不变
nextBtn.setMinimumSize(160, 30);

hLayout->addWidget(&preBtn);//添加按钮到水平管理器
hLayout->addWidget(&nextBtn);

sLayout.addWidget(get1stpage());//添加子组件到栈式管理器
sLayout.addWidget(get2ndpage());
sLayout.addWidget(get3rdpage());

vLayout->addLayout(&sLayout);//嵌套布局管理器
vLayout->addLayout(hLayout);

setLayout(vLayout);//设置顶层布局管理器

connect(&preBtn, SIGNAL(clicked()), this, SLOT(OnPreBtnClicked()));
connect(&nextBtn, SIGNAL(clicked()), this, SLOT(OnNextBtnClicked()));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

小结：

• 布局管理器可以相互嵌套构成更加复杂的页面
• 任意容器类组件均可以设置布局管理器
• 同一布局管理器中的组件拥有相同的父组件
• 组件间的父子关系是Qt进行内存管理的重要方式