Qt实例2 - 文本编辑器(1)加入查找框
实例1我们做了一个查找框,这东西必须得配合文本才能发挥作用,所以我们再做一个很简单的文本编辑器。
Qt里面有一个叫做QPlainTextEdit的东西可以实现文本编辑的功能,类似于HTML里的textarea。废话不多说,我们开始写代码。
我们用QPlainTextEdit实现文本编辑功能
1.新建一个项目,名字就叫editor吧,取消创建界面,类名默认,基类默认为MainWindow就可以了。
2.修改mainwindow.h,给他一些类和变量的声明:
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QtGui/QMainWindow> class QPlainTextEdit; class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = 0); ~MainWindow(); private: QPlainTextEdit *textArea; }; #endif // MAINWINDOW_H
修改mainwindow.cpp,把声明的组件加进去:
#include "mainwindow.h" #include <QPlainTextEdit> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { setWindowTitle(tr("MyEditor")); //类似于html里的textarea textArea = new QPlainTextEdit; //设为中央部件 setCentralWidget(textArea); } MainWindow::~MainWindow() { }
点击绿色播放按钮运行一下看看效果吧,我们可以在里面写文字了:
加入一个工具条
那如果要实现查找,还要有个东西触发才行呢,我们要在上面加一个工具来触发查找框弹出来。首先我们了解下MainWindow的布局:
修改mainwindow.h:
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QtGui/QMainWindow> class QPlainTextEdit; class QAction;//动作,比如打开,关闭。 class QToolBar;//工具条 class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = 0); ~MainWindow(); private: QPlainTextEdit *textArea; QToolBar *toolBar; QAction *searchAction; private slots: }; #endif // MAINWINDOW_H
修改mainwindow.cpp
#include "mainwindow.h" #include <QPlainTextEdit> #include <QToolBar> #include <QAction> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { setWindowTitle(tr("MyEditor")); //第二个参数this指明这个action是属于MainWindow的,不加的话会出错。 searchAction = new QAction(tr("search"), this); toolBar = addToolBar(tr("&Edit")); toolBar->addAction(searchAction); //类似于html里的textarea textArea = new QPlainTextEdit; //设为中央部件 setCentralWidget(textArea); } MainWindow::~MainWindow() { }
运行看下,现在已经有一个search给我们来点了,之后我们再处理search的的点击触发查找框的弹出:
下面就把实例1做好的那个FindDialog加进去,让他去查找编辑器里的内容。
我们右键项目名-添加新文件-概要-文本文件-选择,名称:finddialog.h。重复上述步骤,再新增一个finddialog.cpp。我们再把之前写好的的那两个文件(finddialog.h,finddialog.cpp)覆盖过来。在Qt Creator里新增文件的目的是不用我们手动去修改editor.pro了,我们现在可以打开editor.pro文件看里面的配置多了关于finddialog的:)
修改mainwindow.h:
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QtGui/QMainWindow> class QPlainTextEdit; class QAction; class QToolBar; class FindDialog;//潜质声明,因为下面要声明一个查找框的实例化 class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = 0); ~MainWindow(); private: QPlainTextEdit *textArea; QToolBar *toolBar; QAction *searchAction; FindDialog *findDialog;//前置声明一个查找框的实例化 private slots: void showFindDialog();//显示查找框 }; #endif // MAINWINDOW_H
修改mainwindow.cpp,我们一个连接,把search的行为与触发搜索框显示的方法连接一下:
#include "mainwindow.h" #include "finddialog.h" #include <QPlainTextEdit> #include <QToolBar> #include <QAction> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { setWindowTitle(tr("MyEditor")); //第二个参数this指明这个action是属于MainWindow的,不加的话会出错。 searchAction = new QAction(tr("search"), this); toolBar = addToolBar(tr("&Edit")); toolBar->addAction(searchAction); //类似于html里的textarea textArea = new QPlainTextEdit; //设为中央部件 setCentralWidget(textArea); connect(searchAction, SIGNAL(triggered()), this, SLOT(showFindDialog())); } void MainWindow::showFindDialog(){ findDialog = new FindDialog; findDialog->show(); } MainWindow::~MainWindow() { }
这时候我们点击运行-search,搜索框出来了,之前的中文翻译没效果了,是因为没把qm文件加过来,我们到最后再处理吧:
接下来很重要的一步就是FindDialog要把search的内容发送给MainWindow,因为MainWindow是没办法直接操作FindDialog里的部件的,他们只能用相互的信号和槽进行沟通。
首先我们要修改finddialog,当searchButton按下时,用一个槽连接,然后这个槽再发射一个信号,这个信号为mainwindow做准备。
通俗点就是说一个信号不能直接触发另一个信号,中间加个槽就可以了。我们画个图可能更形象点:
finddialog.h的slots多加一个定义:void emitSearchSignal(); 这里就不把全部代码贴出了。
finddialog.cpp:在构造函数里添加一个connect:
connect(searchButton, SIGNAL(clicked()), this, SLOT(emitSearchSignal()));
然后在外面定义这个槽,这个槽又发射一个信号:
//发射一个搜索的信号,因为上边的connect第四个参数没法写成SIGNAL啊,死规定第四个必须是SLOT //看完了这个函数再去看看mainwindow.cpp里的一个connect,应该就明白了。 void FindDialog::emitSearchSignal(){ QString text = searchLineEdit->text(); if(!text.isEmpty()){ emit searchSignal(text); } }
mainwindow.h添加一个slot:
void searchText(const QString &text);
mainwindow.cpp的显示搜索框里加一个connect:
void MainWindow::showFindDialog(){ findDialog = new FindDialog; connect(findDialog, SIGNAL(searchSignal(const QString &)), this, SLOT(searchText(const QString &))); findDialog->show(); } void MainWindow::searchText(const QString &text){ textArea->find(text, QTextDocument::FindBackward); }
当我们搜索a的时候,文本框里的a已经有背景颜色了:
那么简单的查找功能到此就已经实现了,我们把翻译按照之前的方法实现,并且在MainWindow的构造函数里用resize(800,600)重定义一下mainwindow的大小。下面是效果图:
目前这个编辑器用起来还太鸡肋,之后我们再加一个打开文件,保存文件的功能吧。