qt实用学习案例：数据库设计+图表显示+model-view模式+样式表定制

整理不易，如有帮助，请点赞收藏--------彡皮

一 需求

1，使用MySQL存储数据，合理设计数据内容和存储方式

2，数据展示要基于饼状图、柱状图和折线图，展示的源数据来自数据库，数据内容可自行设计

3，提供tableview等表格显示数据源

4，使用model-view设计模式，使用qss样式表（以加载资源表的方式，方便后续修改界面样式）进行样式设计

5，总代码行不少于2000行

6，整体UI界面需布局合理，用户交互方便

7，在关键处需要有代码注释

二 设计

1，数据库设计：创建一个简单的数据库，用于存储销售数据

2，程序主要功能：连接mysql，实用tableview显示数据，并允许用户增删改查

3，提供三种图表显示：饼状图（显示各产品销售占比）、柱状图（按月展示销售额）、折线图（按月展示销售额趋势）

4，使用MVD（Model-View-Delegate）模式，其中Model使用QSqlTableModel，View使用QTableView，Delegate用于自定义显示或编辑。

5，使用QSS样式表美化界面，并通过资源文件加载。

6，使用QTabWidget将表格和图表放在不同的标签页中，同时提供一些按钮和组合框用于交互（比如选择图表类型、筛选数据等）。

代码结构

三 核心代码

database.cpp

• 连接数据库

    db = QSqlDatabase::addDatabase("QMYSQL");
    db.setHostName("localhost");
    db.setDatabaseName("mysql");
    db.setUserName("root");
    db.setPassword("112233");

    if (!db.open()) {
        qDebug() << "Error: Failed to connect to database." << db.lastError();
        connected = false;
        return false;
    }

• 初始化数据库

    // 检查表是否存在，不存在则创建
    createTables();

    // 检查是否有数据，没有则插入示例数据
    QSqlQuery query("SELECT COUNT(*) FROM products");
    if (query.next() && query.value(0).toInt() == 0) {
        insertSampleData();
    }

database.h

#ifndef DATABASE_H
#define DATABASE_H

#include <QObject>
#include <QSqlDatabase>
#include <QSqlError>
#include <QSqlQuery>
#include <QDebug>
#include <QSqlQueryModel>

class Database : public QObject
{
    Q_OBJECT
public:
    explicit Database(QObject *parent = nullptr);
    ~Database();

    bool connectToDatabase();
    void initializeDatabase();
    bool isConnected() const;

    // 数据操作接口
    QSqlQueryModel* getSalesData();
    QSqlQueryModel* getProductsData();
    QSqlQueryModel* getRegionsData();
    bool addSaleRecord(const QVariantMap &record);
    bool updateSaleRecord(int id, const QVariantMap &record);
    bool deleteSaleRecord(int id);

private:
    QSqlDatabase db;
    bool connected;

    void createTables();
    void insertSampleData();
};

#endif // DATABASE_H

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QSqlTableModel>
#include <QChartView>
#include <QBarSeries>
#include <QPieSeries>
#include <QLineSeries>
#include <QValueAxis>
#include <QCategoryAxis>
#include "database.h"
#include <QTreeWidgetItem>
#include <QDateEdit>

QT_CHARTS_USE_NAMESPACE

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private slots:
    void onTreeViewItemClicked(QTreeWidgetItem *item, int column);
    void onAddRecord(bool checked);
    void onDeleteRecord(bool checked);
    void onRefreshData(bool checked);
    void onFilterChanged(const QString &);
    void toggleDarkMode(bool checked);
    void showAboutDialog(bool checked);

    void on_filterComboBox_currentTextChanged(const QString &arg1);


private:
    Ui::MainWindow *ui;
    Database *db;
    QSqlTableModel *salesModel;
    QSqlTableModel *productsModel;
    QSqlTableModel *regionsModel;

    bool darkMode;

    void setupDatabase();
    void setupUI();
    void setupCharts();
    void setupConnections();
    void applyStyleSheet(const QString &styleSheet);

    void showSalesTable();
    void showProductsTable();
    void showRegionsTable();

    void showSalesPieChart();
    void showSalesBarChart();
    void showSalesTrendChart();

    void updateSalesPieChart();
    void updateSalesBarChart();
    void updateSalesTrendChart();
};

#endif // MAINWINDOW_H

四 运行结果

运行视频

源码链接

源码链接