【QT实战の心情笔记】

文章目录

- 界面布局
- - 主要界面分为三部分：
  - - [1. 笔记列表区域](#1. 笔记列表区域)
    - [2. 笔记内容编辑区域](#2. 笔记内容编辑区域)
    - [3. 操作按钮区域](#3. 操作按钮区域)
  - [Qt Designer 界面设计步骤](#Qt Designer 界面设计步骤)
  - 完整界面布局图
  - 各控件设置和属性
  - [Qt Designer 文件 (.ui)](#Qt Designer 文件 (.ui))
- 数据库表结构
- - - [SQL 表结构：](#SQL 表结构：)
- 逻辑代码
- - [1. 项目结构](#1. 项目结构)
  - [2. Note 类 (`Note.h` 和 `Note.cpp`)](#2. Note 类 (Note.h 和 Note.cpp))
  - - `Note.h`
    - `Note.cpp`
  - [3. DatabaseManager 类 (`DatabaseManager.h` 和 `DatabaseManager.cpp`)](#3. DatabaseManager 类 (DatabaseManager.h 和 DatabaseManager.cpp))
  - - `DatabaseManager.h`
    - `DatabaseManager.cpp`
  - [4. MainWindow 类 (`MainWindow.ui`, `MainWindow.cpp` 和 `MainWindow.h`)](#4. MainWindow 类 (MainWindow.ui, MainWindow.cpp 和 MainWindow.h))
  - [5. 总结](#5. 总结)

此程序使用 Qt Widgets 和 SQLite 来实现，并展示了笔记的标题、内容以及修改时间。

为了帮助你理解如何设计这个个人笔记应用的界面，下面我将详细描述界面布局以及各个控件的功能。由于我无法直接生成图像，我会尽量通过文字和布局描述来帮助你在 Qt Designer 中实现界面。

界面布局

主要界面分为三部分：

笔记列表区域（显示所有笔记的标题和修改时间）
笔记内容编辑区域（编辑选中的笔记的内容）
操作按钮区域（添加、删除、保存等按钮）

1. 笔记列表区域

使用 QListView 来显示笔记的标题和修改时间。
每个笔记的显示格式为：
- 标题（一行文字）
- 修改时间 （时间戳，格式为 yyyy-MM-dd HH:mm:ss）

QListView 上需要显示的内容是：

复制代码

Title 1
2024-12-18 15:30:00

Title 2
2024-12-17 14:20:00

2. 笔记内容编辑区域

使用 QTextEdit 来显示和编辑选中的笔记的详细内容。
用户可以在这里修改笔记内容，当保存时内容会更新到数据库。

3. 操作按钮区域

添加按钮：用户点击后可以创建一个新笔记。
删除按钮：用户点击后可以删除当前选中的笔记。
保存按钮：用户点击后保存当前编辑的笔记内容。

Qt Designer 界面设计步骤

在 Qt Designer 中，你可以按照以下步骤创建界面：

创建一个 QMainWindow：
- 选择 QMainWindow 作为主窗口类型。
添加一个 QWidget：
- 将一个 QWidget 拖入 QMainWindow 中，作为主界面的容器。
设置布局：
- 在 QWidget 中，设置一个 QHBoxLayout 或 QVBoxLayout 来组织控件。
- 推荐使用 QVBoxLayout，将界面分成垂直区域。
添加 QListView 控件：
- 在上方区域添加一个 QListView 控件，宽度设置为适当的大小来显示笔记的标题和修改时间。
- 设置 QListView 的大小策略，使其能够填充上方区域。
添加 QTextEdit 控件：
- 在下方区域添加一个 QTextEdit 控件，用来显示和编辑笔记的内容。
- 设置其大小策略，使其填充剩余的空间。
添加操作按钮：
- 在界面底部，使用 QHBoxLayout 添加三个按钮：
  - Add 按钮：用于创建新笔记。
  - Delete 按钮：用于删除选中的笔记。
  - Save 按钮：用于保存当前编辑的笔记。

完整界面布局图

复制代码

--------------------------------------
|             笔记列表区域            |
|------------------------------------|
| Title 1       2024-12-18 15:30:00  |
| Title 2       2024-12-17 14:20:00  |
| ...                                  |
--------------------------------------
|             笔记内容编辑区域        |
|------------------------------------|
| [此处显示或编辑笔记内容]              |
--------------------------------------
|      [Add]    [Delete]    [Save]    |
--------------------------------------

各控件设置和属性

QListView：
- 需要绑定一个 QStringListModel 或 QListView 模型来显示笔记的标题和修改时间。
- 在模型中，每个条目应当是 "标题 + 修改时间"。
QTextEdit：
- 设置 setPlainText() 或 setHtml() 方法来显示笔记内容。
- 用户可以编辑其中的内容。
按钮：
- 设置按钮的文本为 Add 、Delete 和 Save，并为这些按钮添加相应的信号与槽连接。

Qt Designer 文件 (.ui)

你可以按照以上描述在 Qt Designer 中创建界面，下面是一个简化版的 .ui 文件结构，你可以在 Qt Designer 中直接创建这个界面。

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <widget class="QListView" name="noteListView"/>
    <widget class="QTextEdit" name="noteTextEdit"/>
    <layout class="QHBoxLayout" name="buttonLayout">
     <widget class="QPushButton" name="addButton">
      <property name="text">
       <string>Add</string>
      </property>
     </widget>
     <widget class="QPushButton" name="deleteButton">
      <property name="text">
       <string>Delete</string>
      </property>
     </widget>
     <widget class="QPushButton" name="saveButton">
      <property name="text">
       <string>Save</string>
      </property>
     </widget>
    </layout>
   </layout>
  </widget>
  <centralwidget/>
  <statusbar/>
 </widget>
</ui>

数据库表结构

首先，我们需要一个数据库表来存储笔记。创建数据库和表结构。

SQL 表结构：

sql 复制代码

CREATE TABLE IF NOT EXISTS notes (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    content TEXT,
    modified_time TEXT
);

id：笔记的唯一标识符。
title：笔记的标题。
content：笔记的内容。
modified_time ：笔记的修改时间（格式为 yyyy-MM-dd HH:mm:ss）。

逻辑代码

1. 项目结构

该项目包含以下文件：

Note.h 和 Note.cpp：定义笔记类。
DatabaseManager.h 和 DatabaseManager.cpp：管理数据库的类。
MainWindow.ui：Qt Designer 设计的主窗口界面。
MainWindow.cpp 和 MainWindow.h：主窗口的实现和交互逻辑。

2. Note 类 (`Note.h` 和 `Note.cpp`)

Note 类用于表示单个笔记，包含标题、内容和修改时间等信息。

`Note.h`

cpp 复制代码

#ifndef NOTE_H
#define NOTE_H

#include <QString>

class Note
{
public:
    Note();
    int getId() const;
    QString getTitle() const;
    QString getContent() const;
    QString getModifiedTime() const;
    void setId(int id);
    void setTitle(const QString &title);
    void setContent(const QString &content);
    void setModifiedTime(const QString &modifiedTime);

private:
    int id;
    QString title;
    QString content;
    QString modifiedTime;
};

#endif // NOTE_H

`Note.cpp`

cpp 复制代码

#include "Note.h"

Note::Note() : id(-1), title(""), content(""), modifiedTime("") {}

int Note::getId() const { return id; }
QString Note::getTitle() const { return title; }
QString Note::getContent() const { return content; }
QString Note::getModifiedTime() const { return modifiedTime; }

void Note::setId(int id) { this->id = id; }
void Note::setTitle(const QString &title) { this->title = title; }
void Note::setContent(const QString &content) { this->content = content; }
void Note::setModifiedTime(const QString &modifiedTime) { this->modifiedTime = modifiedTime; }

3. DatabaseManager 类 (`DatabaseManager.h` 和 `DatabaseManager.cpp`)

DatabaseManager 类用于操作 SQLite 数据库，执行插入、删除、更新和查询等操作。

`DatabaseManager.h`

cpp 复制代码

#ifndef DATABASEMANAGER_H
#define DATABASEMANAGER_H

#include <QObject>
#include <QSqlDatabase>
#include <QSqlQuery>
#include <QSqlError>
#include <QVariant>
#include <QList>
#include "Note.h"

class DatabaseManager : public QObject
{
    Q_OBJECT

public:
    DatabaseManager();
    bool openDatabase();
    bool addNote(const QString &title, const QString &content);
    bool deleteNote(int id);
    bool updateNote(int id, const QString &title, const QString &content);
    QList<Note> getAllNotes();

private:
    QSqlDatabase db;
};

#endif // DATABASEMANAGER_H

`DatabaseManager.cpp`

cpp 复制代码

#include "DatabaseManager.h"
#include <QSqlError>
#include <QDebug>
#include <QDateTime>

DatabaseManager::DatabaseManager()
{
    db = QSqlDatabase::addDatabase("QSQLITE");
    db.setDatabaseName("notes.db");
}

bool DatabaseManager::openDatabase()
{
    if (!db.open()) {
        qDebug() << "Error: Failed to open database!";
        return false;
    }
    return true;
}

bool DatabaseManager::addNote(const QString &title, const QString &content)
{
    QSqlQuery query;
    query.prepare("INSERT INTO notes (title, content, modified_time) VALUES (?, ?, ?)");
    query.addBindValue(title);
    query.addBindValue(content);
    query.addBindValue(QDateTime::currentDateTime().toString("yyyy-MM-dd HH:mm:ss"));
    if (!query.exec()) {
        qDebug() << "Error: Failed to add note!";
        return false;
    }
    return true;
}

bool DatabaseManager::deleteNote(int id)
{
    QSqlQuery query;
    query.prepare("DELETE FROM notes WHERE id = ?");
    query.addBindValue(id);
    if (!query.exec()) {
        qDebug() << "Error: Failed to delete note!";
        return false;
    }
    return true;
}

bool DatabaseManager::updateNote(int id, const QString &title, const QString &content)
{
    QSqlQuery query;
    query.prepare("UPDATE notes SET title = ?, content = ?, modified_time = ? WHERE id = ?");
    query.addBindValue(title);
    query.addBindValue(content);
    query.addBindValue(QDateTime::currentDateTime().toString("yyyy-MM-dd HH:mm:ss"));
    query.addBindValue(id);
    if (!query.exec()) {
        qDebug() << "Error: Failed to update note!";
        return false;
    }
    return true;
}

QList<Note> DatabaseManager::getAllNotes()
{
    QList<Note> notes;
    QSqlQuery query("SELECT * FROM notes");
    while (query.next()) {
        Note note;
        note.setId(query.value("id").toInt());
        note.setTitle(query.value("title").toString());
        note.setContent(query.value("content").toString());
        note.setModifiedTime(query.value("modified_time").toString());
        notes.append(note);
    }
    return notes;
}

4. MainWindow 类 (`MainWindow.ui`, `MainWindow.cpp` 和 `MainWindow.h`)

在 MainWindow 类中，我们需要显示笔记的列表，包括标题、内容和修改时间，同时实现笔记的添加、删除和保存功能。

`MainWindow.ui`

在 Qt Designer 中，设计一个界面：

使用 QListView 显示笔记列表，格式化显示标题和 修改时间。
使用 QTextEdit 编辑和显示笔记内容。
使用 QPushButton 实现笔记的添加、删除和保存功能。

`MainWindow.cpp`

cpp 复制代码

#include "MainWindow.h"
#include "ui_MainWindow.h"
#include "DatabaseManager.h"
#include "Note.h"
#include <QInputDialog>
#include <QMessageBox>
#include <QDateTime>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    dbManager = new DatabaseManager();

    // 打开数据库
    if (!dbManager->openDatabase()) {
        qDebug() << "Failed to open the database!";
        return;
    }

    // 更新笔记列表
    updateNoteList();

    // 连接按钮的信号槽
    connect(ui->addButton, &QPushButton::clicked, this, &MainWindow::addNote);
    connect(ui->deleteButton, &QPushButton::clicked, this, &MainWindow::deleteNote);
    connect(ui->saveButton, &QPushButton::clicked, this, &MainWindow::saveNote);
}

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

void MainWindow::updateNoteList()
{
    // 获取所有笔记
    QList<Note> notes = dbManager->getAllNotes();
    QStringList noteTitles;

    // 格式化笔记标题和修改时间
    for (const Note &note : notes) {
        QString displayText = note.getTitle() + "\n" + note.getModifiedTime();
        noteTitles.append(displayText);
    }

    // 更新笔记列表显示
    ui->noteListView->clear();
    ui->noteListView->addItems(noteTitles);

    // 更新当前选中的笔记内容
    if (!notes.isEmpty()) {
        ui->noteTextEdit->setText(notes.first().getContent());
    }
}

void MainWindow::addNote()
{
    bool ok;
    QString title = QInputDialog::getText(this, "New Note", "Enter note title:", QLineEdit::Normal, "", &ok);
    if (ok && !title.isEmpty()) {
        dbManager->addNote(title, "");
        updateNoteList();
    }
}

void MainWindow::deleteNote()
{
    QModelIndex selectedIndex = ui->noteListView->currentIndex();
    if (selectedIndex.isValid()) {
        int noteId = selectedIndex.row() + 1;
        dbManager->deleteNote(noteId);
        updateNoteList();
    }
}

void MainWindow::saveNote()
{
    QModelIndex selectedIndex = ui->noteListView->currentIndex();
    if (selectedIndex.isValid()) {
        int noteId = selectedIndex.row() + 1;
        QString content = ui->noteTextEdit->toPlainText();
        dbManager->updateNote(noteId, ui->noteListView->currentItem()->text(), content);
        updateNoteList(); // 更新笔记列表
    }
}

`MainWindow.h`

cpp 复制代码

#ifndef MAINWINDOW_H
#define

 MAINWINDOW_H

#include <QMainWindow>
#include "DatabaseManager.h"

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void addNote();
    void deleteNote();
    void saveNote();

private:
    Ui::MainWindow *ui;
    DatabaseManager *dbManager;
    void updateNoteList();
};

#endif // MAINWINDOW_H

5. 总结

这段代码实现了一个简单的笔记应用，支持：

添加笔记：点击按钮输入标题创建新笔记。
删除笔记：选择列表中的笔记删除。
保存笔记：编辑笔记内容后点击保存。

笔记列表中显示每个笔记的标题和 修改时间 ，通过 SQLite 数据库进行数据存储和管理。

可以进一步扩展应用功能，例如：

添加笔记的分类。
笔记搜索功能。
导出和导入笔记等。

世界上的事情，最忌讳的就是个十全十美，凡事总要稍留欠缺，才能持恒

【QT实战の心情笔记】

文章目录

界面布局

主要界面分为三部分：

1. 笔记列表区域

2. 笔记内容编辑区域

3. 操作按钮区域

Qt Designer 界面设计步骤

完整界面布局图

各控件设置和属性

Qt Designer 文件 (.ui)

数据库表结构

SQL 表结构：

逻辑代码

1. 项目结构

2. Note 类 (Note.h 和 Note.cpp)

Note.h

Note.cpp

3. DatabaseManager 类 (DatabaseManager.h 和 DatabaseManager.cpp)

DatabaseManager.h

DatabaseManager.cpp

4. MainWindow 类 (MainWindow.ui, MainWindow.cpp 和 MainWindow.h)

MainWindow.ui

MainWindow.cpp

MainWindow.h

5. 总结

2. Note 类 (`Note.h` 和 `Note.cpp`)

`Note.h`

`Note.cpp`

3. DatabaseManager 类 (`DatabaseManager.h` 和 `DatabaseManager.cpp`)

`DatabaseManager.h`

`DatabaseManager.cpp`

4. MainWindow 类 (`MainWindow.ui`, `MainWindow.cpp` 和 `MainWindow.h`)

`MainWindow.ui`

`MainWindow.cpp`

`MainWindow.h`