实例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的布局:
菜单-QMenu 工具箱-QToolBar,下面的例子我们省略了菜单,只加一个toolbar,toolbar要添加一个搜索的行为searchAction。
修改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的大小。下面是效果图:
目前这个编辑器用起来还太鸡肋,之后我们再加一个打开文件,保存文件的功能吧。