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的布局:

菜单-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的大小。下面是效果图:

目前这个编辑器用起来还太鸡肋,之后我们再加一个打开文件,保存文件的功能吧。

posted @ 2013-01-11 16:26 pigfly 阅读(...) 评论(...) 编辑 收藏