入门项目：使用vs2015和Qt Creator制作文本编辑器

Posted on | In | | Visitors:
Words count in article: 1.8k

入门项目：使用vs2015和Qt Creator制作文本编辑器

考虑到许多代码使用vs调试比较方便（而且习惯），但是有一些功能用vs的扩展工具里面又没有，于是可以将二者结合一起来开发。

一.如何同时使用Qt creator与vs2015

方法一 使用Qt creator创建项目

先在Qr Creator新建一个项目

文件结构如下：

使用vs安装的插件打开.pro文件

保存即可

这样就可以同时使用vs和qt creator同时编辑项目了。

方法二 使用vs创建项目

vs创建好项目后，使用插件生成pro文件，然后使用Qt creator打开.pro文件即可。

二.设计过程

2.1 设计目标

制作一个文本编辑器

2.2 添加资源文件

资源文件可以在网盘中下载

链接：https://pan.baidu.com/s/1XZl1y2nbA3Sgnxz8BGEtZg
提取码：si4p

在Qt Creator中点击FIle->open file or object，然后选择Qt栏下选择Qt Resource File，添加即可

在项目文件下新建一个文件夹，存放资源图片

添加文件即可

2.3 设计Action

在QT creator中双击.ui文件进入Qt Designer

新建Action

添加action填写text，对象名称，提示(鼠标悬停显示)，图标，快捷键和cleckable

依次添加以下action

2.4 设计菜单、工具栏、输入框

双击Type Here编辑菜单栏，输入分组名称，然后回车，新建下个分组

依次添加 文件、编辑、格式

然后将Action拖放到菜单的某个分组下

设计工具栏，直接将action拖入工具栏即可

工具栏可以设置显示属性，可在属性窗口中设置

  • Qt::ToolButtonIconOnly———只显示图标
  • Qt::ToolButtonTextOnly———只显示文字
  • Qt::ToolButtonTextBesideIcon————图标旁显示文字
  • Qt::ToolButtonTextUnerIcon————图标下显示文字
  • Qt::ToolButtonFollowStyle———根据QStyle::StyleHint格式显示

添加输入框，拖入即可

添加后，调整文本框大小

将文本框对象命名为txtEdit

此时可以尝试编译运行一下看下效果

如果出现中文乱码，在.h文件中加上如下语句即可

1
2
3
#ifdef WIN32  
#pragma execution_character_set("utf-8")
#endif

2.5 代码创建其他界面组件

我们还需要在工具栏上增加一个SpinBox用于设置字体大小，但是无法通过拖动组件实现，这便是UI设计器的局限性，某些界面效果无法用可视化设计方式实现。

在.h文件中增加一些变量和函数定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#include <QLabel>
#include <QProgressBar>
#include <QSpinBox>
#include <QFontComboBox>//需要增加引入的库

class TextEdit : public QMainWindow
{
private://在private下增加如下定义
	QLabel *fLabCurFile;
	QProgressBar *progressBar1;
	QSpinBox *spinFontSize;
	QFontComboBox *comboFont;
	void iniUI();//用于创建这些界面组件
}

在.cpp（不是main.cpp）中修改构造函数

1
2
3
4
5
6
TextEdit::TextEdit(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);
	iniUI();//增加的初始化函数
}

在.cpp（不是main.cpp）中定义iniUI()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
void TextEdit::iniUI()
{
	fLabCurFile = new QLabel;
	fLabCurFile->setMidLineWidth(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;
	spinFontSize->setMinimum(5);
	spinFontSize->setMaximum(50);
	spinFontSize->setValue(ui.txtEdit->font().pointSize());
	spinFontSize->setMinimumWidth(50);

	ui.mainToolBar->addWidget(new QLabel("字体大小"));
	ui.mainToolBar->addWidget(spinFontSize);//spinbox添加到工具栏

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

	setCentralWidget(ui.txtEdit);
}

这时编译运行后显示的效果。

2.6 Action的功能实现

① 编辑功能Action的实现

用于编辑的Action有剪切、复制、粘贴的功能，QTextEdit类有相应的槽函数，顾可以直接使用UI界面设计

添加后如下

② 其他Action的功能实现

用于设置粗体、斜体和下划线的3个Action具有Checkable数学，选择trigger(bool)信号设计槽函数更合适，该信号的复选状态会作为一个参数传递，在响应代码里可以直接使用。

右击需要设置trigger(bool)，选择go to slot（需要在Qt Creator中，vs中的插件没有该选项）

选择trigger(bool)

点击OK后会跳转到.cpp，编写槽函数

设置粗体

1
2
3
4
5
6
7
8
9
10
void MainWindow::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);
}

设置斜体

1
2
3
4
5
6
7
8
9
10
void MainWindow::on_actFontItalic_triggered(bool checked)
{
    QTextCharFormat fmt;
    fmt=ui->txtEdit->currentCharFormat();
    if(checked)
        fmt.setFontItalic(QFont::StyleItalic);
    else
        fmt.setFontItalic(QFont::StyleNormal);
    ui->txtEdit->mergeCurrentCharFormat(fmt);
}

设置下划线

1
2
3
4
5
6
7
8
9
10
void MainWindow::on_actFontUnder_triggered(bool checked)
{
    QTextCharFormat fmt;
    fmt=ui->txtEdit->currentCharFormat();
    if(checked)
        fmt.setFontUnderline(QFont::UnderlineResolved);
    else
        fmt.setFontUnderline(QFont::StyleNormal);
    ui->txtEdit->mergeCurrentCharFormat(fmt);
}

为了使界面的程序的功能更加智能一点，我们需要根据文本的格式来更新action的状态。选择文本编辑框，右击进入“go to slot”，可以利用其信号。

  • copyAvailable(bool)信号在有内容可以被复制时发射，可以用来改变actCut、actCopy的enable属性
  • selectionChanged()信号在选择的文字发生变化时发射，利用该信号，当有信号发射时，读取此时字体的属性，从而更新粗体、斜体、下划线的checked属性

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
void MainWindow::on_txtEdit_copyAvailable(bool b)
{
    ui->actCut->setEnabled(b);
    ui->actCopy->setEnabled(b);
    ui->actPaste->setEnabled(ui->txtEdit->canPaste());
}
void MainWindow::on_txtEdit_selectionChanged()
{
    QTextCharFormat fmt;
    fmt=ui->txtEdit->currentCharFormat();//获取文字的格式
    ui->actFontItalic->setChecked(fmt.fontItalic());//是否斜体
    ui->actFontBold->setChecked(fmt.font().bold());//是否粗体
    ui->actFontUnder->setChecked(fmt.fontUnderline());//是否有下划线
}

2.7 手工创建的组件的信号与槽

设置字体大小的spinFontSize和设置字体comboFont的信号和槽的功能的实现显然不能通过可视化的方法实现，所以需要通过手工便携槽函数，并将信号和槽关联起来。

在.h中类的定义中增加两个槽函数，以及用于信号和槽关联的函数，如下所示

1
2
3
4
5
6
7
8
9
class MainWindow : public QMainWindow
{
private:
    void iniSignalSlots();//关联信号和槽
private slots:
    void on_spinFontSize_valueChanged(int aFontSize);//改变字体大小

    void on_comboFont_currentIndexChanged(const QString &arg1);//选择字体
}

在.cpp文件中定义槽关联函数

1
2
3
4
5
6
void MainWindow::iniSignalSlots()
{
	bool a;
    a=connect(spinFontSize,SIGNAL(valueChanged(int)),this,SLOT(on_spinFontSize_valueChanged(int)));
    a=connect(comboFont,SIGNAL(currentIndexChanged(const QString &)),this,SLOT(on_comboFont_currentIndexChanged(const QString &)));
}

再在.cpp文件中定义槽函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
void MainWindow::on_spinFontSize_valueChanged(int aFontSize)
{//改变字体大小的SpinBox
    QTextCharFormat fmt;
    fmt.setFontPointSize(aFontSize);
    ui->txtEdit->mergeCurrentCharFormat(fmt);
    progressBar1->setValue(aFontSize);
}

void MainWindow::on_comboFont_currentIndexChanged(const QString &arg1)
{
    QTextCharFormat fmt;
    fmt.setFontFamily(arg1);
    ui->txtEdit->mergeCurrentCharFormat(fmt);
}

还需要在.cpp中类的构造函数中调用槽关联函数

1
2
3
4
5
6
7
8
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    iniUI();//增加的初始化函数
    iniSignalSlots();//槽关联函数
}

2.8 为应用程序设置图标

  1. 将一个图标文件（.ico后缀的图标文件）复制到项目原程序目录下
  2. 在.pro项目配置文件最后加上一行
1
RC_ICONS=AppIcon.ico

完结撒花~