Qt 混合方式UI设计

之前了解了可视化UI设计和代码UI设计，各有优点吧，可以将这两种方式进行混合。

下面举例进行深入体验：

整体思想就是先进行可视化设计，实在不能添加的组件再选择用编码的形式添加。

先学一下怎么创建资源文件:

菜单和工具栏的设计功能需要用Action实现，如下图

每行内容都是通过下面表格内容填写实现的：

 菜单栏编辑：如下图，先将主菜单确定

菜单项： 主菜单分组完成后，从Action编辑器中拖动到主菜单某个分组上，就可以创建菜单项

 分割条：双击“添加分隔符”

 

工具栏也是同样的方法：

 工具栏按钮显示方式可以更改：

 出现问题：现在运行没有显示工具栏的图标

问题解决：

 

解决方法：在Action编辑添加图标时选择资源而不是选择文件解决。

 

工具栏也有个弊端：将SpinBox、FontComboBox等组件拖到工具栏会被拒收，这是UI设计器的局限性，某些界面效果无法用可视化设计方式实现。所以转为代码实现：

头文件里这样编辑：

#ifndef QWMAINWIND_H
#define QWMAINWIND_H

#include <QMainWindow>
#include <QLabel>
#include <QProgressBar>
#include <QSpinBox>
#include <QFontComboBox>

QT_BEGIN_NAMESPACE
namespace Ui { class QWMainWind; }
QT_END_NAMESPACE

class QWMainWind : public QMainWindow
{
    Q_OBJECT

public:
    QWMainWind(QWidget *parent = nullptr);
    ~QWMainWind();

private:
    Ui::QWMainWind *ui;
    QLabel *flabCurFile;   //状态栏里显示当前文件的Label
    QProgressBar *progressBar1;//状态栏上的进度条
    QSpinBox *spinFontSize;//字体大小 spinBox
    QFontComboBox *comboFont;//字体名称 comboBox
    void iniUI();
};
#endif // QWMAINWIND_H

实现代码.cpp内容如下：

#include "qwmainwind.h"
#include "ui_qwmainwind.h"

QWMainWind::QWMainWind(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::QWMainWind)
{
    ui->setupUi(this);
    iniUI();
    iniSignalSlots();
}

QWMainWind::~QWMainWind()
{
    delete ui;
}
void QWMainWind::iniUI()
{
    //状态栏添加组件
    flabCurFile=new QLabel;
    flabCurFile->setMinimumWidth(150);
    flabCurFile->setText("当前文件：");
    ui->statusBar->addWidget(flabCurFile);//添加到状态栏

    progressBar1=new QProgressBar;
    progressBar1->setMaximumWidth(200);
    progressBar1->setMinimum(5);
    progressBar1->setMaximum(50);
    progressBar1->setValue(ui->txtEdit->font().pointSize());
    ui->statusBar->addWidget(progressBar1);  //添加到状态栏

    //工具栏上添加组件
    spinFontSize=new QSpinBox;// 文字大小 SpinBox
    spinFontSize->setMinimum(5);
    spinFontSize->setMaximum(50);
    spinFontSize->setValue(ui->txtEdit->font().pointSize());
    spinFontSize->setMinimumWidth(50);
    ui->toolBar->addWidget(new QLabel("字体大小"));
    ui->toolBar->addWidget(spinFontSize);//SpinBox添加到工具栏

    ui->toolBar->addSeparator();//分隔条
    ui->toolBar->addWidget(new QLabel("字体"));
    comboFont=new QFontComboBox;
    comboFont->setMinimumWidth(150);
    ui->toolBar->addWidget(comboFont);//添加到工具栏

    setCentralWidget(ui->txtEdit);
}

void QWMainWind::iniSignalSlots()
{
    //信号与槽的关联
    connect(spinFontSize,SIGNAL(valueChanged(int)),this,SLOT(on_spinBoxFontSize_valueChanged(int)));
    connect(comboFont,SIGNAL(currentIndexChanged(const QString &)),this,SLOT(on_comboFont_currentIndexChanged(const QString &)));
}


void QWMainWind::on_actFontBold_triggered(bool checked)
{
    QTextCharFormat fmt;
    fmt=ui->txtEdit->currentCharFormat();
    if(checked)
        fmt.setFontWeight(QFont::Bold);
    else
        fmt.setFontWeight(QFont::Normal);
    ui->txtEdit->mergeCurrentCharFormat(fmt);
}

void QWMainWind::on_txtEdit_copyAvailable(bool b)
{
    //更新cut copy paste 的enable属性
    ui->actCut->setEnabled(b);
    ui->actCopy->setEnabled(b);
    ui->actPaste->setEnabled(ui->txtEdit->canPaste());
}

void QWMainWind::on_txtEdit_selectionChanged()
{
    //更新粗体、斜体、下划线3种action的checked属性
    QTextCharFormat fmt;
    fmt=ui->txtEdit->currentCharFormat();   //获取文字的格式
    ui->actFontItalic->setChecked(fmt.fontItalic());  //是否斜体
    ui->actFontBold->setChecked(fmt.font().bold());  //是否粗体
    ui->actFontUnder->setChecked(fmt.fontUnderline()); //是否有下划线
}

void QWMainWind::on_spinBoxFontSize_valueChanged(int aFontSize)
{
    //改变字体大小的SpinBox
    QTextCharFormat fmt;
    fmt.setFontPointSize(aFontSize);   //设置字体大小
    ui->txtEdit->mergeCurrentCharFormat(fmt);
    progressBar1->setValue(aFontSize);
}

void QWMainWind::on_comboFont_currentIndexChanged(const QString &arg1)
{
    //FontCombobox的响应，选择字体名称
    QTextCharFormat fmt;
    fmt.setFontFamily(arg1);   //设置字体大小
    ui->txtEdit->mergeCurrentCharFormat(fmt);
}

写完函数声明、函数内容后，需要在构造函数里实现。

为应用程序设置图标：

1、将一个图标文件（必须是 ".ico" 后缀的图标文件）复制到项目源程序目录下。

2、在项目配置文件里用RC_ICONS设置图标文件名，添加一行代码。