文章目录
- 界面布局
- 主要界面分为三部分:
- 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. 总结
此程序使用 Qt Widgets 和 SQLite 来实现,并展示了笔记的标题、内容以及修改时间。
为了帮助你理解如何设计这个个人笔记应用的界面,下面我将详细描述界面布局以及各个控件的功能。由于我无法直接生成图像,我会尽量通过文字和布局描述来帮助你在 Qt Designer 中实现界面。
界面布局
主要界面分为三部分:
- 笔记列表区域(显示所有笔记的标题和修改时间)
- 笔记内容编辑区域(编辑选中的笔记的内容)
- 操作按钮区域(添加、删除、保存等按钮)
1. 笔记列表区域
- 使用 QListView 来显示笔记的标题和修改时间。
- 每个笔记的显示格式为:
- 标题(一行文字)
- 修改时间(时间戳,格式为
yyyy-MM-dd HH:mm:ss
)
QListView 上需要显示的内容是:
Title 1
2024-12-18 15:30:00Title 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 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 表结构:
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
#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
#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
#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_OBJECTpublic: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
#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
#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 ¬e : 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
#ifndef MAINWINDOW_H
#defineMAINWINDOW_H#include <QMainWindow>
#include "DatabaseManager.h"namespace Ui {
class MainWindow;
}class MainWindow : public QMainWindow
{Q_OBJECTpublic: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 数据库进行数据存储和管理。
可以进一步扩展应用功能,例如:
- 添加笔记的分类。
- 笔记搜索功能。
- 导出和导入笔记等。
世界上的事情,最忌讳的就是个十全十美,凡事总要稍留欠缺,才能持恒