这一章节我们开始搭建整个软件的UI部分，也就是最外面的那层皮，我曾经在网上看到有人用Qt做的高仿QQ和360，几乎可以以假乱真，所以，Qt的功能还是很强大的，只要下功夫，Qt还是可以做出非常酷炫的界面的。
那Qt做UI界面呢，可以通过两种方式，一种是通过设计模式，即通过可视化的方式，拖拽、编辑控件进行设计，优点是简单粗暴，所见即所得。
还有一种方式是直接通过代码来实现，这个可能会对编码要求稍高一些，效率也较低，有点儿自虐，但我本人比较习惯用这种方式，因为代码从头到尾都是自己撸的，对整体的代码结构会更清晰，后面修改啊、调试起来会更容易一些。
如果一些没有编码基础的同学，希望能了解下代码实现UI的方法，可以多看看Qt自带的demo，我最开始就是通过这些demo来学习的，墙裂推荐的例子是“Application Example”，一个简单的记事本程序，但是包含了创建一个桌面程序的基本逻辑和功能。
1、新建项目
首先我们先新建一个项目，项目类型选择Application->Qt Widgets Application。
设置好项目名称和项目的路径，给项目命名一个自己喜欢的名字，放在一个独立的目录下，项目名称和路径最好使用英文。
选择开发套件，这里显示了咱们在第一章节中的准备工作中配置好的开发套件，当然，如果你想开发多个平台的软件，这里可能会显示不同的开发套件，咱们这只配置了一个，也是默认选择的。
基本类信息的设置，已经为我们预制了mainwindow的基本类，当然也可以选择QWidget或者QDialog的基本类，因为咱们这个软件主体是窗口程序，所以这里选择使用mainwindow。
最下面的创建界面选项，我去掉了勾选，因为前面已经说过了，我习惯使用代码模式去创建界面，如果你不喜欢这种方式，也可以勾选上，后续直接在设计模式下创建界面就可以了。
汇总页面，可以配置版本控制器，可以添加自己习惯的工具，git或者svn之类的。
点击完成，咱们的项目就创建成功啦。
新建好的项目中有一个main.cpp的源文件和一个mainwindow的类（包括头文件和源文件）。在main中新建了一个mainwindow示例，并调用了它的show()函数，所以运行之后我们就可以看到一个空的窗口程序显示出来。
下面我们就按照前面设计好的原型，将这个空的窗口程序进行完善。
2、MainWindow简介
在开始之前先介绍一些QMainWindow这个类吧，QMainWindow呢，是Qt已经设计好的一个控件，其布局和子控件如下图所示，我们可以直接拿过来使用，非常的方便。我们自己创建的基本类mainwindow就是继承了QMainWindow。
最上面是menu bar，就是我们所谓的菜单栏，绝大部分的桌面程序都带有菜单栏；
接下来是toolbars，是工具栏，这个工具栏是用来放置一些常用工具按钮的一个控件，上下左右都可以放，可以看出它是个浮动的控件。
再往中间是dock widgets，就是浮动窗口区，这个在一些大型软件中比较常见，功能多，工具多，窗口多，所以需要用浮动窗口来展示更多的内容。
最中间是central widget，就是中间控件，mainwindow的核心内容；
最下面是status bar，简单来说就是状态栏，这个也很常见，用来实时展示程序的运行状态；
3、添加菜单栏
按照从上到下，从左到右的顺序，我们先创建菜单栏。
我们在mainwindow的头文件中mainwindow.h中添加一个private函数：void creatMenu();
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
void creatMenu();
};这个函数就是用来创建菜单栏的，然后我们在mainwindow.cpp内的函数体中添加如下语句：
void MainWindow::creatMenu()
{
QMenu *fileMenu = menuBar()->addMenu("文件");//添加文件菜单项
}这条语句的意思是，我们调用mainwindow的menubar()，添加了一个叫filemenu的菜单选项，这个菜单项显示的名字叫“文件”。
在mainwindow的构造函数中增加creatMenu()，运行后会发现程序的菜单栏已经有了一个“文件”的菜单项：
按照以上方式，我们继续添加“编辑”、“查看”、“帮助”等菜单项：
void MainWindow::creatMenu()
{
QMenu *fileMenu = menuBar()->addMenu("文件");//添加文件菜单项
QMenu *editMenu = menuBar()->addMenu("编辑");//添加编辑菜单项
QMenu *checkMenu = menuBar()->addMenu("查看");//添加查看菜单项
QMenu *helpMenu = menuBar()->addMenu("帮助");//添加帮助菜单项
}
4、添加工具栏
原型设计稿右上角有个登录按钮，本来想加在菜单栏，发现很难搞，所以干脆放在菜单栏下面的工具栏中；
跟创建菜单栏一样，我们新建一个creatTool()函数，在函数体内编写如下内容：
void MainWindow::creatTool()
{
QToolBar *loginToolBar = addToolBar("登录");//添加登录工具条
QWidget *spacer = new QWidget(this);
spacer->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
loginToolBar->addWidget(spacer);
QAction *loginAct = new QAction("登录", this);//新建登录动作
loginToolBar->addAction(loginAct);
loginToolBar->setMovable(false);
}因为这个登录的按钮是在最右侧，所以这里先添加了一个叫spacer的widget，它的大小属性是膨胀的，也就是说它会尽可能的填充它所在的空间，把它先添加到toolbar中，再添加一个登录的动作按钮loginAct，spacer就会膨胀填充，把loginAct顶到最右侧。
因为我不想让这个toolbar是浮动的、可以拖来拖去的，所以最后一句我把它的是否可以移动属性设定为了false，即不可以移动。
同样，把creatTool()添加到构造函数中，运行后可以看到，登录按钮已经可以显示出来了。
5、创建侧边导航栏
原型设计图的最左侧是一个导航栏，在上面我们已经知道，mainwindow的toolbar在窗口的上下左右都可以放置，所以我们还是可以通过使用toolbar来实现这个纵向的导航栏，我们还是在mainwindow类中新建一个private函数creatNaviBar()，函数体中编写如下内容：
void MainWindow::creatNaviBar()
{
QToolBar *naviBar = new QToolBar("导航",this);
addToolBar(Qt::LeftToolBarArea,naviBar);
QAction *homeAction = new QAction("主页",this);
naviBar->addAction(homeAction);
QAction *supplierAction = new QAction("供应商管理",this);
naviBar->addAction(supplierAction);
QAction *goodsAction = new QAction("商品管理",this);
naviBar->addAction(goodsAction);
QAction *stockAction = new QAction("库存管理",this);
naviBar->addAction(stockAction);
QAction *infoAction = new QAction("信息管理",this);
naviBar->addAction(infoAction);
QAction *userAction = new QAction("用户管理",this);
naviBar->addAction(userAction);
naviBar->setMovable(false);
}在这里，我们新建了一个QtoolBar，叫做naviBar，并通过mainwindow的addToolBar将naviBar放到了窗口的左侧（第一个参数是位置，我们将参数置为Qt::LeftToolBarArea）。
然后，我们新建了6个动作按钮，分别对应6个页签的内容。
最后，我们还是将toolbar的移动属性置为false，不允许移动。
将creatNaviBar()函数添加到构造函数中，运行一下，可以看到，一个很简陋的导航栏已经添加上去了。
6、创建主体页面
窗口的主体应该是一个多个页签组合的展示区。
因为这是一个页面组合的形式，所以我们得找个容器，来容纳这些页面。我这里选择了堆栈窗体QStackedWidget作为容器，这个类呢，可以把控件一层一层的叠起来，每次只展示其中的一层。
因为需要和左侧的导航条联动，即点击导航栏不同的按钮后，堆栈容器要展示不同层的控件，所以这里我们在mainwindow中建立一个QStackedWidget的成员，以便能在全局调用：
QStackedWidget *stackWidget;同样的，我们新建个函数叫creatStackWidgget()，把6个标有不同数字的标签控件放到了堆栈容器内，并把这个堆栈容器设置为mainwindow的主控件。函数体内如下：
void MainWindow::creatStackWidget()
{
stackWidget = new QStackedWidget;
QLabel *label1 = new QLabel("1");
QLabel *label2 = new QLabel("2");
QLabel *label3 = new QLabel("3");
QLabel *label4 = new QLabel("4");
QLabel *label5 = new QLabel("5");
QLabel *label6 = new QLabel("6");
stackWidget->addWidget(label1);
stackWidget->addWidget(label2);
stackWidget->addWidget(label3);
stackWidget->addWidget(label4);
stackWidget->addWidget(label5);
stackWidget->addWidget(label6);
setCentralWidget(stackWidget);
}同样在构造函数中添加该函数，运行后可以看到mainwindow主体显示出堆栈容器的第一层的内容。
到这里，整体的UI框架已经搭建完成了，当然，这个程度说实话离预期的效果还差很远，后面我们继续完善。
