QT学习篇（三）总结界面设计相关类

一、问题：这几天开始学习使用QT设计一款简单的代码编辑器，目的主要是学习一些类的使用，然后逐渐完善编辑器的功能，但是模仿其他编辑器的时候，总是不知道同样的窗口或者功能该用什么类，想了想该知道些软件设计的常识，对于初学者来说，利用已知的一些软件界面选项来说明QT里边对应的相同功能或者相似的类的使用是一个不错的方法。

二、编辑器

1、参考一个尚未完成的编辑器界面

上面是一个基本窗口，但是也是主要窗口，该窗口分为菜单栏（黑色圈出）、工具栏（红色圈出）和状态栏（绿色圈出）

2、菜单栏、工具栏和状态栏如何使用

    //一、在菜单栏添加File
    QMenu *fileMenu = menuBar()->addMenu(tr("&File"));
    //   在工具栏添加File
    QToolBar *fileToolBar = addToolBar(tr("File"));

（说明一下，我是在QT里边现有的一个例子上进行设计的）
        其实在图片上直接标注这些类的名字其实更好，QMenu和QToolBar就是对应上面黑色和红色部分，当然还有一个状态栏，状态栏不是一个单独的类（可能有错吧），按我的理解，似乎当我们在一个窗口的构造函数里边使用：

statusBar()->showMessage(tr("Ready"));

当我们打开软件后，在状态栏就显示出“Ready”，当然按照常识，当我们将鼠标指到某个地方，还没有点击下去的时候，在状态栏会出现提示这个选择的功能是什么，这个在下边就开始慢慢说明。

3、如何在菜单栏或者工具栏添加选项

       随便提到，上面说明到当我们鼠标放到某一个选项的时候，下面状态栏出现的效果就是下面红色部分。

       当我们要实现上面的效果如上面绿色部分时，该如何做：

    //添加File->New
    const QIcon newIcon = QIcon::fromTheme("document-new", QIcon(":/images/new.png"));
    QAction *newAct = new QAction(newIcon, tr("&New"), this);
    newAct->setShortcuts(QKeySequence::New);
    newAct->setStatusTip(tr("Create a new file"));//状态栏提示
    connect(newAct, &QAction::triggered, this, &MainWindow::newFile);
    fileMenu->addAction(newAct);
    fileToolBar->addAction(newAct);

    //添加File->Open
    const QIcon openIcon = QIcon::fromTheme("document-open", QIcon(":/images/open.png"));
    QAction *openAct = new QAction(openIcon, tr("&Open..."), this);
    openAct->setShortcuts(QKeySequence::Open);
    openAct->setStatusTip(tr("Open an existing file"));
    connect(openAct, &QAction::triggered, this, &MainWindow::open);
    fileMenu->addAction(openAct);
    fileToolBar->addAction(openAct);

上面的代码就是一个例子，fileMenu和fileToolBar在上面已经声明了，相当于我们的主窗口已经有一个file选项的菜单栏并且工具栏也出现了，上面的代码就是往这个file里边添加新建、打开和保存的选项，同时在状态栏显示相应的提示。

4、在Tool菜单栏下添加一个设置选项

          在菜单栏添加一个设置选项与前面的一致，不同在于点击这个设置选项打开一个新的的窗口如图：

点击Tool->设置，出现上面的Tab Dialog界面，好吧，想了想，目的主要是介绍常见的这些界面到底是上面类组成的，说说类叫上面名字就行了吧：

1-----------------------左边的白色框是QListWidget，白色框里边的选项是QListWidgetItem，算了还是贴几行官方参考代码吧：

    setupListBox = new QListWidget;//白色框

    QListWidgetItem *configButton = new QListWidgetItem(setupListBox);//在白框里边添加选项
    configButton->setIcon(QIcon(":/images/config.png"));
    configButton->setText(tr("Configuration"));//选项的名字
    configButton->setTextAlignment(Qt::AlignHCenter);
    configButton->setFlags(Qt::ItemIsSelectable | Qt::ItemIsEnabled);

上面只是一个Configuration的添加，像Update的添加基本一样。

2-----------------------右边是一个QStackedWidget和QTabWidget，具体关系：

QStackedWidget就是右边一个总的页面，在这个页面里边添加了几个QTabWidget，参考代码如下：

    tabWidget3 = new QTabWidget;
    tabWidget3->addTab(new GeneralTab(fileInfo), tr("General"));
    tabWidget3->addTab(new PermissionsTab(fileInfo), tr("Permissions"));
    tabWidget3->addTab(new ApplicationsTab(fileInfo), tr("Applications"));

    //将建立的Tab页面添加到一个总的管理机构
    //最终这个界面通过该对象实现页面的切换
    pagesWidget = new QStackedWidget;
    pagesWidget->addWidget(tabWidget1);
    pagesWidget->addWidget(tabWidget2);
    pagesWidget->addWidget(tabWidget3);

由于QT才初学几天，术语不是很准，上面只是贴出部分代码，逻辑如下：先使用QTabWidget声明与左边白色框里边的选项相同数目的页面，因为按照使用其他软件的经验，没点击白色框里边不同选项的使用会切换右边的框（即为QTabWidget），而右边的页面又包含多个如上图General和Applications选项，如何玩呢？？？看看上边的tabWidget3->addTab(new ******)就明白了。

好吧，还有一个问题，addTab函数里边的GeneralTab是什么（点击横着的Tab键会出现不同页面，不同页面如何设置？？？）：

GeneralTab当然是我们声明的一个类，页面包含的具体设置选项就在这个类里边，看看代码吧：

ApplicationsTab::ApplicationsTab(const QFileInfo &fileInfo, QWidget *parent)
    : QWidget(parent)
{
    QLabel *topLabel = new QLabel(tr("Open with:"));

    QListWidget *applicationsListBox = new QListWidget;
    QStringList applications;

    for (int i = 1; i <= 30; ++i)
        applications.append(tr("Application %1").arg(i));
    applicationsListBox->insertItems(0, applications);

    QCheckBox *alwaysCheckBox;

    if (fileInfo.suffix().isEmpty())
        alwaysCheckBox = new QCheckBox(tr("Always use this application to "
            "open this type of file"));
    else
        alwaysCheckBox = new QCheckBox(tr("Always use this application to "
            "open files with the extension '%1'").arg(fileInfo.suffix()));

    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(topLabel);
    layout->addWidget(applicationsListBox);
    layout->addWidget(alwaysCheckBox);
    setLayout(layout);
}

上面都只是什么样的界面用上面类，没有涉及到真正的技术问题，都只是常识问题，//持续更新中。