持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

📒博客首页：何名取的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

画竹之人，心中有竹

前言

在创建工程时我选择了不勾选Generate form，这意味着就不能使用拖拉拽的方式来创建页面、放置控件和进行布局了。

但是这并不影响什么，俗话说“画竹之人，心中有竹”。我的脑子里已经有了PDF学习宝的大概轮廓，只要照着目标去做，把握好方向即可。

布局

在Qt中最常用的布局就是这三个：

Qt类	描述	示例
QVBoxLayout	垂直排列
QHBoxLayout	水平排列
QGridLayout	栅格布局

在使用时需要在头文件中引入以下三个类：

#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QGridLayout>

这三种布局方式一般在使用中搭配起来使用，先用垂直排列或水平排列将小部件进行排列，再将垂直排列或水平排列放在栅格布局中，最后将栅格布局应用到Widget上。

主页面布局

主页面的部件主要有标题栏和QStackView。

标题栏布局

标题栏的布局选用水平排列布局,依次将标题文字、设置、最小化、最大化和关闭按钮进行排列：

    //新建水平布局管理器-标题文字、按钮布局
    QHBoxLayout *layout1 = new QHBoxLayout;
    //设置、最小化、最大化、关闭按钮水平排列
    layout1->addWidget(lab_title);          //将title文字添加到布局中
    layout1->addWidget(btn_setting);        //将设置按钮添加到布局中
    layout1->addWidget(btn_min);            //将最小化按钮添加到布局中
    layout1->addWidget(btn_max);            //将最大化按钮添加到布局中
    layout1->addWidget(btn_close);          //将关闭按钮添加到布局中
    layout1->setSpacing(6);                 //间隔6px
    layout1->setContentsMargins(0,0,0,0);   //左上右下边框设置为0

stackview布局

将stackview放置在垂直排列布局中：

    //新建垂直布局管理器-stackview布局
    QHBoxLayout *layout2 = new QHBoxLayout;
    //stackview
    stackview = new QStackedWidget;
    stackview->resize(winrect.width(),winrect.height());
    //设置排列
    layout2->addWidget(stackview);

总体布局

将标题栏布局和stackview布局放入栅格布局中，将栅格布局设置为总体布局。

    //新建水平布局管理器-lay1、lay2布局
    QGridLayout *layout3 = new QGridLayout;
    layout3->addLayout(layout1,0,0);
    layout3->addLayout(layout2,1,0);
    layout3->setContentsMargins(6,0,6,6);   //左上右下边框设置为0
    setLayout(layout3);

书库/题库页面布局

将stackview的页面1选为书库/题库页面，其布局中暂时包括书库侧边和图书展示窗口：

    //页面1布局
    QHBoxLayout *lay1 = new QHBoxLayout;
    //书库侧边
    lab_side = new QLabel;
    lab_side->resize(winrect.width()/8,winrect.height());
    lab_side->setText("My Books");
    //书库区域
    scra = new QScrollArea;
    scra->resize(winrect.width(),winrect.height());
    //设置排列
    lay1->addWidget(lab_side);
    lay1->addWidget(scra);
    //页面1排列
    page1 = new QWidget;
    page1->setLayout(lay1);
    stackview->addWidget(page1);

下图是原始程序页面图，目前尚未进行美化：

PDF浏览/题库页面

将stackview的页面2选为PDF浏览/题库页面,其中布局包括PDF导航栏、PDF阅读栏和题库编辑/显示栏：

    //页面2布局
    QHBoxLayout *lay2 = new QHBoxLayout;
    //导航栏
    navpdf = new QTreeView;
    navpdf->setMaximumWidth(winrect.width()/8);
    //pdf显示区域
    pdfview = new QPdfView;
    pdfview->resize(stackview->width()/8*5,stackview->height());
    //题库编辑与显示区域
    scra_q = new QScrollArea;
    scra_q->setMaximumWidth(winrect.width()/8*2);
    //设置排列
    lay2->addWidget(navpdf);
    lay2->addWidget(pdfview);
    lay2->addWidget(scra_q);
    //页面2排列
    page2 = new QWidget;
    page2->setLayout(lay2);
    stackview->addWidget(page2);