code_edit项目实例08：纯代码自定义代码组件(QPlainTextEdit实现)

创建类

 

 

 

#ifndef MYCODEEDIT_H
#define MYCODEEDIT_H

#include <QPlainTextEdit>
// 全局声明，否则在MyCodeEdit使用这个类的时候会提示error: unknown type name 'LineNumberWidget'
class LineNumberWidget;

class MyCodeEdit : public QPlainTextEdit
{
    Q_OBJECT
public:
    explicit MyCodeEdit(QWidget *parent = nullptr);
    //
    void lineNumberWidgetPaintEvent(QPaintEvent *event);
    // 鼠标点击事件处理，在类外部调用
    void lineNumberWidgetMousePessEvent(QMouseEvent *event);
    // 把滚轮任务提交给MyCodeEditor
    void lineNumberWidgetWheelEvent(QWheelEvent *event);

private slots:
    // 行高亮
    void HighLightCurrentLine();
    void UpdateLineNumberWidget(QRect rect, int dy);
    // 更新行号显示边距
    void updateLIneNumberWIdgetWidth();

protected:
    // 重写resizeEvent方法,方法名要与继承的方法名称保持一致
    void resizeEvent(QResizeEvent *event);

private:
    // 初始字体
    void InitFont();
    // 信号槽绑定
    void InitConnection();
    // 高亮
    void InitHighLighter();
    // 获取行号显示区域宽度
    int GetLineNumberWidgetWidth();
    // 新建任务的成员变量
    LineNumberWidget *lineNumberWidget;

signals:

};

// 新建一个类，用于重写QPaintEvent方法，用于行号显示
class LineNumberWidget : public QWidget
{
public:
    // 构造函数，参数为父级部件（即需要显示行号的组件，如 QPlainTextEdit 等）
    explicit LineNumberWidget(MyCodeEdit *editor = nullptr) : QWidget(editor) {
        codeEditor = editor; // 初始化 codeEditor 指针为传入的 editor 参数
    }

protected:
    // 绘制事件，重写 QWidget 的 paintEvent 方法
    void paintEvent(QPaintEvent *event) override {
        // 调用 codeEditor 的 lineNumberWidgetPaintEvent 方法，实现行号的绘制
        // 把绘制任务交给codeEditor，lineNumberWidgetPaintEvent用于重写QPaintEvent方法
        codeEditor->lineNumberWidgetPaintEvent(event);
    }
    // 重写鼠标点击事件
    void mousePressEvent(QMouseEvent *event) override {
        // 把鼠标点击任务交给MyCodeEdit
        codeEditor->lineNumberWidgetMousePessEvent(event);
    }
    // 重写鼠标滚轮事件
    void wheelEvent(QWheelEvent *event) override {
        // 把滚轮任务提交给MyCodeEditor
        codeEditor->lineNumberWidgetWheelEvent(event);

    }
private:
    MyCodeEdit *codeEditor; // 指向需要显示行号的组件，一切绘制任务交给codeEditor
};

#endif // MYCODEEDIT_H

#include "mycodeedit.h"
#include "myhightlighter.h"
#include <QDebug>
#include <QPainter>
#include <QFontMetricsF>
#include <QScrollBar>

MyCodeEdit::MyCodeEdit(QWidget *parent) : QPlainTextEdit(parent)
{
    lineNumberWidget = new LineNumberWidget(this); // this 相当于是把MyCodeEdit作为参数传进LineNumberWidget类中
    // 信号槽绑定
    InitConnection();
    // 初始字体
    InitFont();
    // 高亮
    InitHighLighter();
    // 行高亮
    HighLightCurrentLine();
    // 设置高亮显示边距，与行号显示宽度保持一致
    updateLIneNumberWIdgetWidth();
    // 水平滚动条, 不自动换行
    setLineWrapMode(QPlainTextEdit::NoWrap);
}

// 信号槽绑定
void MyCodeEdit::InitConnection()
{
    // cursor
    connect(this, SIGNAL(cursorPositionChanged()), this, SLOT(HighLightCurrentLine()));
    // blockCount更新边距
    connect(this, SIGNAL(blockCountChanged(int)), this, SLOT(updateLIneNumberWIdgetWidth()));
    // updateRequest
    connect(this, SIGNAL(updateRequest(QRect, int)), this, SLOT(UpdateLineNumberWidget(QRect, int)));
}

void MyCodeEdit::InitFont()
{
    // 初始字体
    this->setFont(QFont("Consolas", 14));
}

// 高亮
void MyCodeEdit::InitHighLighter()
{
    new MyHightLighter(document());
}

// 获取行号显示区域宽度
int MyCodeEdit::GetLineNumberWidgetWidth()
{
    // 获取合适的宽度
    // 旧版本的 Qt 中，没有 `horizontalAdvance` 函数，这个函数在较新的版本中才被引入。
    // return 30 + QString::number(blockCount() + 1).length() * fontMetrics().horizontalAdvance(QChar('0'));
    // return 30 + QString::number(blockCount() + 1).length() * QFontMetricsF(font()).horizontalAdvance(QChar('0'));
    return 30 + QString::number(blockCount() + 1).length() * QFontMetricsF(font()).width(QChar('0'));
}

void MyCodeEdit::HighLightCurrentLine()
{
    // 声明一个额外选择区域列表 `QList<QTextEdit::ExtraSelection> extraSelections
    QList<QTextEdit::ExtraSelection> extraSelections; // //声明一个额外选择区域列表,用于多行高亮
    // `QTextEdit::ExtraSelection` 是一个用于在 `QTextEdit` 中添加额外选择区域的类。可以使用它来实现高亮、定位光
    QTextEdit::ExtraSelection selection;  //获取文本光标
    selection.format.setBackground(QColor(0, 100, 100, 20)); // 设置光标所在行的背景颜色和背景透明度
    selection.format.setProperty(QTextFormat::FullWidthSelection, true);
    selection.cursor = textCursor(); // 设置为文本编辑器的当前光标
    // 将 `selection` 添加到 `extraSelections` 中，并将整个 `extraSelections` 设置为额外选择区域。
    extraSelections.append(selection);
    setExtraSelections(extraSelections); // 将选择列表设置为额外选择区域
}

void MyCodeEdit::UpdateLineNumberWidget(QRect rect, int dy)
{
    // dy纵向的偏移值
    if (dy) {
        lineNumberWidget->scroll(0, dy);
    } else {
        lineNumberWidget->update(0, rect.y(), GetLineNumberWidgetWidth(), rect.height());
    }
}

// 更新行号显示边距
void MyCodeEdit::updateLIneNumberWIdgetWidth()
{
    // 设置高亮显示边距，与行号显示宽度保持一致
    setViewportMargins(GetLineNumberWidgetWidth(), 0, 0, 0);
}

// 重写resizeEvent方法
void MyCodeEdit::resizeEvent(QResizeEvent *event)
{
    // 调用父类 QPlainTextEdit 的 resizeEvent 事件
    // `QPlainTextEdit::resizeEvent(event)` 是一个父类 `QPlainTextEdit` 中的函数，它会在编辑器的大小改变时自动触发。
    QPlainTextEdit::resizeEvent(event);
    // 自适应宽度和高度,重新设置行号部件的位置和大小
    // `0, 0`：是行号部件左上角的坐标点，这表示行号部件在编辑器中的左上角。
    // `contentsRect().height()`：这是编辑器内容区域的高度。通过这个高度，将行号部件的高度设置为与编辑器内容区域的高度相同。
    lineNumberWidget->setGeometry(0, 0, GetLineNumberWidgetWidth(), contentsRect().height());
}

void MyCodeEdit::lineNumberWidgetPaintEvent(QPaintEvent *event)
{
    QPainter painter(lineNumberWidget);
    // 绘制行号区域
    painter.fillRect(event->rect(), QColor(100, 100, 100, 100));
    // 行号显示
    // 拿到block
    QTextBlock block = firstVisibleBlock();
    // 拿到行号
    int blockNumber = block.blockNumber();
    // 拿到当前block的top
    int cursorTop = blockBoundingGeometry(textCursor().block()).translated(contentOffset()).top();
    // 拿到block的top
    int top = blockBoundingGeometry(block).translated(contentOffset()).top();
    // 拿到block的bottom
    int bottom = top + blockBoundingRect(block).height();
    while (block.isValid() && top <= event->rect().bottom()) {
        // 设置画笔颜色
        painter.setPen(cursorTop == top ? Qt::black : Qt::gray);
        painter.drawText(0, top, GetLineNumberWidgetWidth() - 5, blockBoundingRect(block).height(), Qt::AlignRight, QString::number(blockNumber + 1)); // 绘制文字
        // 拿到下一个block
        block = block.next();
        // 拿到一个新的top值
        top = bottom;
        bottom = top + blockBoundingRect(block).height();
        blockNumber++;
    }
}

void MyCodeEdit::lineNumberWidgetMousePessEvent(QMouseEvent *event)
{
    // 计算行号
    // 先拿到点击的block
    QTextBlock block = document()->findBlockByNumber(event->y() / fontMetrics().height() + verticalScrollBar()->value());
    // 设置光标的位置
    setTextCursor(QTextCursor(block));
}

// 把滚轮任务提交给MyCodeEditor
void MyCodeEdit::lineNumberWidgetWheelEvent(QWheelEvent *event)
{
    qDebug() << event->delta();
    if (event->orientation() == Qt::Horizontal) {
        horizontalScrollBar()->setValue(horizontalScrollBar()->value() - event->delta());
    } else {
        verticalScrollBar()->setValue(verticalScrollBar()->value() - event->delta());
    }
    event->accept();
}

 

#include "mainwindow.h"
#include "mycodeedit.h"
#include "mytextedit.h"
#include "mytexteditbycode.h"
#include "ui_mainwindow.h"
#include <QToolBar>
#include <QDebug>
#include <QFileDialog>
#include <QMessageBox>
#include <QFontDialog>
#include <QSettings> // 保存配置文件
#include <QTabWidget>

// 保存打开历史记录
void saveHistory(QString path);
// 获取历史记录
QList<QString> getHistory();

// 先判断是否支持打印


// 定义全局变量
QSettings *mSettings;

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // this->setCentralWidget(ui->textEdit);
    this->setCentralWidget(ui->tabWidget); // 添加标签页

    // 初始化保存历史记录的全局变量
    if (mSettings == NULL) {
        mSettings = new QSettings("settings.ini", QSettings::IniFormat);
    }
    initMenu();
}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::initMenu()
{
    // 获取menu
    // 用于查找MainWindow中名为"recent"的子窗口，并将其存储为指向 `QMenu` 类型对象的指针 `recent`。
    QMenu *recent = this->findChild<QMenu *>("recent");
    // qDebug() << recent->title() << endl;
    qDebug() << "最近打开" << endl;
    // 获取Action
    QSet<QObject *> chList = recent->children().toSet();
    foreach(QObject *ch, chList) {
        QAction *action = (QAction *)ch;
        // 清空子菜单栏action
        recent->removeAction(action);
    }
    QList<QString> lists = getHistory();

    // 打开历史记录按时间从近到远
    for (int i = lists.size() - 1; i >= 0; --i) {
        // 生成子菜单
        recent->addAction(lists[i], this, &MainWindow::on_open_recent_file);
    }
    // 添加"清除历史记录"action
    if (lists.size() > 0) {
        recent->addAction("清楚历史菜单", this, &MainWindow::on_clear_history_triggered, QKeySequence("Ctrl+Alt+Shift+C"));
    }
}

// 获取历史记录
QList<QString> getHistory()
{
    // 打开开始读入
    int size = mSettings->beginReadArray("history");
    // 创建返回对象
    QList<QString> lists;
    for (int i = 0; i < size; i++) {
        mSettings->setArrayIndex(i);
        QString path = mSettings->value("path").toString();
        lists.append(path);
        qDebug() << i << ":" << path;
    }
    // 关闭开始读入
    mSettings->endArray();
    return lists;
}

// 保存打开历史记录
void saveHistory(QString path)
{
    // 获取历史
    QList<QString> lists = getHistory();
    lists.append(path);
    foreach(QString str, lists) {
        if (str == path) {
            lists.removeOne(str);
        }
    }
    lists.append(path);
    // lists.toSet().toList(); // 去重
    // 打开开始写入
    mSettings->beginWriteArray("history");
    for (int i = 0; i < lists.size(); ++i) {
        mSettings->setArrayIndex(i);
        // 保存字符串
        mSettings->setValue("path", lists[i]);
    }
    // 关闭开始写入
    mSettings->endArray();
}

// 新建文件
void MainWindow::on_new_file_triggered()
{
    // 调用自定义组件
    // 由于工程没有导入自定义组件的库，鼠标光标放在"MyTextEdit"上Alt+Enter可以导入
#if 0
    MyTextEdit *myTextEdit = new MyTextEdit(this);
    ui->tabWidget->addTab(myTextEdit, "NewTab.txt"); // 添加一个自定义的标签页（ui实现）
#else
    // QTextEdit类实现
    // ui->tabWidget->addTab(new MyTextEditByCode(this), "newTab.txt"); // 添加一个自定义的标签页 （纯代码实现）
    // QPlainTextEdit类实现
    ui->tabWidget->addTab(new MyCodeEdit(this), "NewTab.txt");

#endif
    return;
//    qDebug() << "start create new file ..." << endl;
//    currentFile.clear(); // 如果之前有文件的话先进性清空
//    ui->textEdit->setText(""); // 清空文件内容
}

void MainWindow::on_open_recent_file()
{
    QAction *action = (QAction*)sender();
    QString filename = action->text();
    QFile file(filename);
    if (!file.open(QIODevice::ReadOnly | QIODevice::Text)) {
        QMessageBox::warning(this, "警告", "无法打开此文件"+file.errorString());
    }
    currentFile = filename;
    setWindowTitle(filename);
    QTextStream in(&file);
    QString text = in.readAll();
    ui->textEdit->setText(text);
    file.close();
    saveHistory(currentFile);
    initMenu();
}

// 打开文件
void MainWindow::on_open_file_triggered()
{
    QString filename = QFileDialog::getOpenFileName(this, "打开文件");
    QFile file(filename);
    if (!file.open(QIODevice::ReadOnly | QFile::Text)) {
        QMessageBox::warning(this, "警告", "无法打开此文件 : " + file.errorString());
        return;
    }
    currentFile = filename;
    setWindowTitle(filename);
    QTextStream in(&file);
    QString text = in.readAll();
    ui->textEdit->setText(text);
    file.close();
    saveHistory(currentFile);
    initMenu();
}

// 保存文件
void MainWindow::on_save_file_triggered()
{
    QString filename;
    if (currentFile.isEmpty()) {
        filename = QFileDialog::getSaveFileName(this, "保存文件");
        currentFile = filename;
    } else {
        filename = currentFile;
    }
    QFile file(filename);
    if (!file.open(QIODevice::WriteOnly | QIODevice::Text)) {
        QMessageBox::warning(this, "警告", "无法保存文件:"+file.errorString());
        return;
    }
    setWindowTitle(filename);
    QTextStream out(&file);
    QString text = ui->textEdit->toPlainText();
    out << text;
    file.close();
    saveHistory(currentFile);
    initMenu();
}

// 另存为
void MainWindow::on_save_as_triggered()
{
    QString filename;
    filename = QFileDialog::getSaveFileName(this, "另存为");
    QFile file(filename);
    if (!file.open(QIODevice::WriteOnly | QIODevice::Text)) {
        QMessageBox::warning(this, "警告", "无法保存文件:"+file.errorString());
        return;
    }
    setWindowTitle(filename);
    QTextStream out(&file);
    QString text = ui->textEdit->toPlainText();
    out << text;
    file.close();
    saveHistory(currentFile);
    initMenu();
}

// 复制
void MainWindow::on_copy_triggered()
{
    ui->textEdit->copy();
}

// 粘贴
void MainWindow::on_paste_triggered()
{
    ui->textEdit->paste();
}

// 剪切
void MainWindow::on_cut_triggered()
{
    ui->textEdit->cut();
}

// 字体
void MainWindow::on_font_triggered()
{
    bool fontSelected;
    QFont font = QFontDialog::getFont(&fontSelected, this);
    if (fontSelected) {
        ui->textEdit->setFont(font);
    }
}

// 撤销
void MainWindow::on_undo_triggered()
{
    ui->textEdit->undo();
}

// 取消撤销
void MainWindow::on_redo_triggered()
{
    ui->textEdit->redo();
}

// 退出
void MainWindow::on_exit_triggered()
{
    QCoreApplication::exit();
}

// 信息
void MainWindow::on_info_triggered()
{
    QMessageBox::about(this, "这是我的notepad", "欢迎学习和使用");
}

// 打印
void MainWindow::on_print_triggered()
{

}

// 加粗
void MainWindow::on_bolder_triggered(bool checked)
{
    qDebug() << "on_bolder_triggered" << endl;
    ui->textEdit->setFontWeight(checked);
}

// 斜体
void MainWindow::on_italics_triggered(bool checked)
{
    ui->textEdit->setFontItalic(checked);
}

// 下划线
void MainWindow::on_underline_triggered(bool checked)
{
    ui->textEdit->setFontUnderline(checked);
}

// 清除历史记录
void MainWindow::on_clear_history_triggered()
{
    qDebug() << "on_clear_history_triggered..." << endl;
    mSettings->remove("history");
    initMenu();
}

`QTextEdit::ExtraSelection` 是一个用于在 `QTextEdit` 中添加额外选择区域的类。可以使用它来实现高亮、定位光标等特效。

`ExtraSelection` 包含以下属性：

- selectionRange: 选择的区域，使用 `QTextEdit::ExtraSelection::Cursor` 和 `QTextEdit::ExtraSelection::FormatRange` 两种方式指定。

- cursor: 光标对象。如果设置了此属性，光标会自动显示在选择区域的末尾。

- format: 文本格式。

- layoutDirection: 文字流的方向。可以指定为 `Qt::LeftToRight` 或 `Qt::RightToLeft`。

- verticalAlignment: 垂直对齐方式。可以指定为 `QTextEdit::ExtraSelection::AlignTop`、

下面是一个使用 `ExtraSelection` 添加额外选择区域的示例：

QTextEdit::ExtraSelection selection;

QTextCursor cursor = textEdit->textCursor(); //获取文本光标

selection.cursor = cursor;

QColor lineColor = QColor(Qt::yellow).lighter(160); //设置高亮颜色

selection.format.setBackground(lineColor);

selection.format.setProperty(QTextFormat::FullWidthSelection, true);

selection.cursor.clearSelection(); //清除光标的选择区域

extraSelections.append(selection); //将选择区域添加到选择列表

textEdit->setExtraSelections(extraSelections); //设置额外选择区域

在示例代码中，我们首先获取 `QTextEdit` 的文本光标，并将其设置为选择区域的末尾。

然后置高亮颜色，并将其设置为选择区域的背景色。

最后将选择区域添加到额外选择列表中，并将其设置为 `QTextEdit` 的额外选择区域。

`explicit` 是在 C++ 中一个关键字，可以用于类定义中的单参数构造函数前面，指示编译器禁止该构造函数进行隐式类型转换。显式类型转换是允许的。

`explicit` 关键字的作用是防止在使用单参数构造函数时，不小心进行了隐式类型转换。

如果没有这个关键字，编译器可能会在一些情况下自动地进行类型转换，导致问题。例如：

```cpp

class MyClass {

public:

    MyClass(int x) : value(x) {}

    int value;

};

void func(MyClass m) {

    std::cout << m.value;

}

int main() {

    func(42); // 自动地将整数 42 转换成 MyClass 对象，导致难以察觉的错误。

    return 0;

}

```

在上面的代码中，`MyClass` 的单参数构造函数可以接收一个整数作为参数。

在 `func` 函数中，`MyClass` 对象被传递进来，并调用了 `value` 属性的值来进行输出。

但是，在 `main` 函数中的调用语句中传递整数值（而不是 `MyClass` 对象）时，

编译器会自动地将整数转换成 `MyClass` 对象，从而导致难以察觉的错误。

可以使用 `explicit` 关键字来防止这种情况的发生。

如果单参数构造函数使用 `explicit` 关键字进行修饰，则不会进行自动的类型转换。

因此，上面的代码可以修改为：

class MyClass

 {

public:

    explicit MyClass(int x) : value(x) {}

    int value;

};

void func(MyClass m) {

    std::cout << m.value;

}

int main() {

    func(MyClass(42)); // 必须显式创建 MyClass 对象，无法自动转换整数值

    return 0;

}

在这个修改后的代码中，`MyClass` 的单参数构造函数使用了 `explicit` 关键字。

因此，在 `func` 函数中必须使用显示创建的 `MyClass` 对象传递，而不能使用整数值进行隐式转换。

总之，`explicit` 关键字可以防止一些常见的类型转换错误，因此在一些情况下可以提高代码的安全性和可读性。

`QPlainTextEdit::resizeEvent(event)` 是一个父类 `QPlainTextEdit` 中的函数，它会在编辑器的大小改变时自动触发。

这个函数默认会处理编辑器大小改变时的一些操作，如视图中的滚动条的位置和显示文本的区域等。

因此，在自定义的 `resizeEvent` 函数中需要先调用父类的 `resizeEvent` 函数来确保继承自 `QPlainTextEdit` 的默认操作得到正确处理。

这段代码的作用是处理编辑器的 `resizeEvent` 事件，它在编辑器大小改变时调用，可以用于重新计算并调整相关控件的位置和大小。

void MyCodeEdit::resizeEvent(QResizeEvent *event)

{

    QPlainTextEdit::resizeEvent(event);

    lineNumberWidget->setGeometry(0, 0, GetLineNumberWidgetWidth(), contentsRect().height());

}

在此段代码中，首先调用了父类的 `resizeEvent` 函数来确保继承自 `QPlainTextEdit` 的默认操作得到正确处理。

然后再重新计算行号部件 `lineNumberWidget` 的位置和大小，并设置为编辑器中的左上角，使其高度与编辑器内容区域的高度相同，并将其宽度设置为 `GetLineNumberWidgetWidth()` 函数返回的值。

总之，`QPlainTextEdit::resizeEvent` 函数是一个重要的、自动触发的编辑器事件，需要在自定义的 `resizeEvent` 函数中先调用父类函数，

以确保继承自 `QPlainTextEdit` 的默认操作得到正确处理，再结合具体的业务逻辑进行控件位置和大小的调整。

1. 为什么重写 `resizeEvent` 方法需要与 `QPlainTextEdit::resizeEvent(event)` 方法名保持一致？

在 C++ 中，函数的名字不只是标识函数的方式，还关系到函数的调用。比如，当一个对象被触发 `resizeEvent` 事件时，该对象所绑定的 `resizeEvent` 函数会被自动调用。如果重写的函数名与父类的函数名不一致，那么重写的函数将不会被调用并无法处理 `resizeEvent` 事件。因此，为了重写事件处理函数，函数名必须与父类中的函数名一致。

在这段代码中，`MyCodeEdit` 继承自 `QPlainTextEdit`，因此需要调用父类中的 `resizeEvent` 函数，让编辑器默认

的重设窗口大小的操作正常进行。

2. 为什么在自定义组件类中没有调用 `MyCodeEdit::resizeEvent`，也会被触发？

这是因为 `QPlainTextEdit` 类在其库文件中已经实现了 `resizeEvent` 函数的实现。

在 `MyCodeEdit` 类中继承自 `QPlainTextEdit`，因此自动继承了这个实现。

如果在 `MyCodeEdit` 中没有定义 `resizeEvent` 函数，那么默认会调用 `QPlainTextEdit` 类中的这个函数，并执行其中的代码。

当自定义 `resizeEvent` 函数时，需要“重载”父类的默认实现以使得自己的代码能够得到正确处理，

可以通过调用父类的函数来做到这点，这使得自定义 `resizeEvent` 函数不需要从头开始实现事件处理逻辑，而只需要在父类的基础上进行微调或调整即可。

1.报错提示：QObject::connect: No such signal MyCodeEdit::cursorPositionCHanged() in ..\codeEdit\mycodeedit.cpp:18

HighLightCurrentLine 

// 信号槽绑定

void MyCodeEdit::InitConnection()

{

    // cursor

    connect(this, SIGNAL(cursorPositionCHanged()), this, SLOT(HighLightCurrentLine()));

}

报错原因分析与修改：

错误提示是因为 `cursorPositionCHanged()` 信号名称拼写错误，应该改为 `cursorPositionChanged()`。

// 修改如下

void MyCodeEdit::InitConnection()

{

    // cursor

    connect(this, SIGNAL(cursorPositionChanged()), this, SLOT(HighLightCurrentLine()));

}