Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget

Qt5 学习之路及嵌入式开发教程10:

Qt5布局管理之QSplitter、QDockWidget和QStackedWidget

这次三个任务要完成QSplitter、QDockWidget和QStackedWidget的界面设计及代码编写

一、QSplitter 分割窗口布局

1、界面式布局

建立项目工程文件

(1)、建立应用程序

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第1张图片

选择后,命名、两个下一步后进入设置界面

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第2张图片

下一步后点击完成。

⑵、进入设置界面,进行界面布局设计

双击dialog.ui,进入界面设计页面。

控件栏是没有QSplitter控件的。只能通过QTextEdit控件合成。

拖曳两个TextEdit控件到右侧设计界面,然后用Ctrl键选中两个控件。

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第3张图片

然后点击工具栏快捷方式的“使用分裂水平布局”或“使用分裂垂直布局”

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第4张图片

就可以得到QSplitter布局方式

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第5张图片

运行结果:(拖动中间的分割栏,可以左右拖动)

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第6张图片

接着属性设置,让运行效果更美观。

调整大小,然后设置相关属性

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第7张图片

然后运行程序,美观多了。(垂直方式也同样操作)

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第8张图片

如要打破布局,选中QSplitter,右键->布局->打破布局,就可以回到原来的设计界面。

这个是垂直分割布局

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第9张图片

也可以不同的两个控件进行分割布局,下图是ListView控件与Label控件的效果图。

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第10张图片

界面式分割只能直观地分割两个窗口。要分割多个,需要代码式布局

2、代码式QSplitter布局

(1)、建立项目文件,取消“创建界面”的“勾”,下一步,直到完成。

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第11张图片

(2)、进行代码编写,完善思考过程

例子1:将一个窗口拆分为左右两列,如下图所示:

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第12张图片

①、在dialog.h中定义两个QTextEdit变量,一个QSplitter变量

先添加头文件

#include 

#include

接着定义变量

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第13张图片

②、在dialog.cpp中,变量初始化,并布局

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第14张图片

③、运行,查看结果

例子2:将一个窗口拆分为左右两列,右面再拆分为上下两列,如下图所示:

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第15张图片

①、在dialog.h中定义三个QTextEdit变量,两个QSplitter变量

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第16张图片

②、在dialog.cpp变量初始化,并布局

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第17张图片

③、运行程序,查看结果

例3、将一个窗口拆分为左右两列,左面再拆分为上下两列,与例子2恰好相反,如下图所示:

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第18张图片

只要在例2中的一行代码换一个位置,运行程序,查看结果。

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第19张图片

把上面的代码稍微修改下。就得下面图形

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第20张图片

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第21张图片

二、停靠窗口:QDockWidget类

代码式:

建立项目工程文件,

取消“创建界面”的“勾”,下一步,直到完成。

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第22张图片

(1)、在mainwindow.h中添加头文件和变量

#include 
#include 

在类定义中定义变量

private:
    QTextEdit       *text;
    QTextEdit       *text1;
    QTextEdit       *text2;

    QDockWidget     *dock;

(2)、在mainwindow.cpp中变量初始化及属性设置

    this->setFixedSize(400,300);

    //变量初始化及属性设置
    text    = new QTextEdit(this);
    text1   = new QTextEdit();
    text2   = new QTextEdit();
    text->setText(tr("文档"));
    text->setAlignment(Qt::AlignCenter);
    setCentralWidget(text);


    text1->setText(tr("第一个DockWidget示例"));
    text2->setText(tr("第二个DockWidget示例"));


    dock    = new QDockWidget(tr("DockWidget示例1"),this);
    dock->setWidget(text1);
    //停靠窗体可移动
    dock->setFeatures(QDockWidget::DockWidgetMovable);
    //停靠窗体可左右停靠区域
    dock->setAllowedAreas(Qt::LeftDockWidgetArea|Qt::RightDockWidgetArea);

(3)、运行程序,查看结果

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第23张图片

(4)、继续第二个停靠窗口的设计及属性设置

    //第二个停靠窗口
    dock    = new QDockWidget(tr("DockWidget示例2"),this);
    dock->setWidget(text2);
    addDockWidget(Qt::RightDockWidgetArea,dock);

(5)、运行程序,查看结果(窗体要拖动)

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第24张图片

三、QStackedWidget类

新建工程项目文件

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第25张图片

下一步后,完成后进入编辑环境

头文件

#include 
#include 
#include 
#include 

控件变量

private:

    QHBoxLayout         *layout;
    QListWidget         *list;
    QStackedWidget      *stack;

    QLabel              *label1;
    QLabel              *label2;
    QLabel              *label3;

(2)、在dialog.cpp中变量初始化及布局

    //布局初始化
    layout      = new QHBoxLayout(this);

    //控件初始化
    list        = new QListWidget(this);
    stack       = new QStackedWidget(this);

    //添加布局和比例
    layout->addWidget(list);
    layout->addWidget(stack,0);
    layout->setStretchFactor(list,1);
    layout->setStretchFactor(stack,3);

    //控件初始化和文本
    label1      = new QLabel;
    label2      = new QLabel;
    label3      = new QLabel;

    label1->setText(tr("测试窗口1"));
    label2->setText(tr("测试窗口2"));
    label3->setText(tr("测试窗口3"));

运行程序,查看结果

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第26张图片

(3)、将QListWidget中的三个条目与QStackedWidget建立联系

    //将QListWidget中的三个条目与QStackedWidget建立联系
    list->insertItem(0,tr("测试项目1"));
    list->insertItem(1,tr("测试项目2"));
    list->insertItem(2,tr("测试项目3"));

    stack->addWidget(label1);
    stack->addWidget(label2);
    stack->addWidget(label3);

    //建立联系
    connect(list,SIGNAL(currentRowChanged(int)),stack,SLOT(setCurrentIndex(int)));

运行程序,查看结果

Qt5 学习之路及嵌入式开发教程10: Qt5布局管理之QSplitter、QDockWidget和QStackedWidget_第27张图片

代码:

//dialog.h
#ifndef DIALOG_H
#define DIALOG_H

#include 

#include 
#include 
#include 
#include 

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:

    QHBoxLayout         *layout;
    QListWidget         *list;
    QStackedWidget      *stack;

    QLabel              *label1;
    QLabel              *label2;
    QLabel              *label3;
};

#endif // DIALOG_H


//dialog.cpp
#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    //布局初始化
    layout      = new QHBoxLayout(this);

    //控件初始化
    list        = new QListWidget(this);
    stack       = new QStackedWidget(this);

    //添加布局和比例
    layout->addWidget(list);
    layout->addWidget(stack,0);
    layout->setStretchFactor(list,1);
    layout->setStretchFactor(stack,3);

    //控件初始化和文本
    label1      = new QLabel;
    label2      = new QLabel;
    label3      = new QLabel;

    label1->setText(tr("测试窗口1"));
    label2->setText(tr("测试窗口2"));
    label3->setText(tr("测试窗口3"));


    //将QListWidget中的三个条目与QStackedWidget建立联系
    list->insertItem(0,tr("测试项目1"));
    list->insertItem(1,tr("测试项目2"));
    list->insertItem(2,tr("测试项目3"));

    stack->addWidget(label1);
    stack->addWidget(label2);
    stack->addWidget(label3);

    //建立联系
    connect(list,SIGNAL(currentRowChanged(int)),stack,SLOT(setCurrentIndex(int)));


}

Dialog::~Dialog()
{

}


//main.cpp
#include "dialog.h"
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;
    w.show();

    return a.exec();
}

 

你可能感兴趣的:(Qt5开发教程)