QT自定义代理且实现ComboxBox图标加载（个人理解）

最新推荐文章于 2025-05-03 06:30:00 发布
最新推荐文章于 2025-05-03 06:30:00 发布
阅读量974 收藏 8
点赞数 23
文章标签： qt QT自定义代理 QT自定义代理组件增加图标显示 c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vhhsp/article/details/147639855
版权

1、需求分析

        在QStandardItemModel + QItemSelectionModel + QTableView组件的基础下实现了一个类似如下的表格：

为了防止人为输入数据导致错误，能否实现下面类似这种输入方式（对每个item项进行控制）：

也就是修改生日时候弹出一个日历控件，岗位可以有一个下拉列表来选择，性别一样还带图标，薪资使用spinBox来控制。这就涉及到了自定义代理了。

2、自定义代理的概念

        官方概念：指通过继承QStyledItemDelegate或QAbstractItemDelegate类来创建自定义的项渲染和编辑方式。

        个人理解就是：

步骤2：将tableView的item设置为自定义组件，代码一般是：ui->tableView->setItemDelegateForColumn(1, &genderDelegate); 这里的genderDelegate是自定义类的对象，这个类里面会创建一个QComboBox组件的指针。这句代码也很容易理解就是给下标1的列（性别）设置一个代理，代理对象就是我们自定义类创建的一个实例。

步骤1：就是从Model中获取数据，然后用这数据设置自己的代理对象。这个通常改写父类的setEditorData方法实现。

步骤1+2 ：就能实现从Model数据传给代理然后，tableView再以代理组件方式进行显示了。

步骤3：用户输入数据了，会改变代理的数据。

步骤4：把代理组件中用户输入的数据传递给Model，这样就能保证Model和TableView进行同步了。这个通常改写setModelData方法实现。

步骤3+4：就能实现从用户数据传给代理，然后代理再传给Model，达到同步数据的效果。

总结就是：代理组件就是一个中间介，其目的是为了控制显示效果，和对数据格式进行控制限定等。

3、一个简单代理组件的代码实现

先看效果：

        

代码如下：

//qsalarydelegate.h （自定义类的头文件）

#ifndef QSALARYDELEGATE_H
#define QSALARYDELEGATE_H
#include <QStyledItemDelegate>

//继承QStyledItemDelegate
class QSalaryDelegate : public QStyledItemDelegate
{
    Q_OBJECT
public:
    QSalaryDelegate(QObject *parent = nullptr);

    QWidget *createEditor(QWidget *parent,
                          const QStyleOptionViewItem &option,
                          const QModelIndex &index) const override;

    void setEditorData(QWidget *editor, const QModelIndex &index) const override;
    void setModelData(QWidget *editor,
                      QAbstractItemModel *model,
                      const QModelIndex &index) const override;

    void updateEditorGeometry(QWidget *editor,
                              const QStyleOptionViewItem &option,
                              const QModelIndex &index) const override;

};

#endif // QSALARYDELEGATE_H


//qsalarydelegate.cpp

#include "qsalarydelegate.h"
#include <QSpinBox>

QSalaryDelegate::QSalaryDelegate(QObject *parent):QStyledItemDelegate(parent)
{

}

QWidget *QSalaryDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    //用来创建一个代理组件给薪资一列使用，并返回其指针
    QSpinBox *spinBox = new QSpinBox(parent);
    //给这个组件设置进行一些设置
    spinBox->setMaximum(100000);    //最大值
    spinBox->setMinimum(8000);      //最小值
    spinBox->setSingleStep(100);    //单步长

    return  spinBox;    //返回组件指针

}

void QSalaryDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
    //把model的数据读取到组件上，然后再通过组件和tableView的item进行关联显示
    //这里是把model的读取到组件上
    /*
        代码解释：
             1、model()->data(index)返回的是一个QVariant类型，它是Qt中的一个万能容器类，它可以存储多种不同类型的值。
                不同的Model可能需要返回不同类型的数据，QVariant提供了一个统一的返回类型，可以进行类型转换得到数据。
            2、index.model()获取与该索引关联的数据模型。
            3、spinBox可以直接设置int，所以提取到的数据直接转为int。
    */
     int value = index.model()->data(index).toInt();
    /*
        代码解释：
            1、QWidget *editor类型是无法设置组件的数据的，因为editor
            2、static_cast<QSpinBox*>(editor)是将QWidget *类型转为QSpinBox *类型，一般来说是子类转父类，
                这里可以从父类转到子类是因为上面返回的editer指针是指向子类（QSpinBox *）的，所以可以转换。
    */
    QSpinBox *spinBox = static_cast<QSpinBox*>(editor);
    //设置组件值，指针传递所以可以更改对象的值
    spinBox->setValue(value);
}

void QSalaryDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
    //这里是把用户输入到spinbox的值设置到model里面去
    //获取spinbox的值，同样还是需要强转一次
    QSpinBox *spinBox = static_cast<QSpinBox*>(editor);
    int value = spinBox->value();
    //设置model的数据
    model->setData(index, value);

}

void QSalaryDelegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    //设置组件的位置
    /*
        将编辑器精确定位到：
                位置：与表格/列表中的当前项相同的位置
                大小：与表格/列表中的当前项相同的大小
    */
    editor->setGeometry(option.rect);
}

//mainwindow.h
QSalaryDelegate salaryDelegate;    //MainWindow类内定义一个QSalaryDelegate对象

//mainwindow.cpp
ui->tableView->setItemDelegateForColumn(4, &salaryDelegate);    //自定义组件对象和视图的item关联

总结：自定义一个QWiget类，它继承QStyledItemDelegate，然后分别在这个类里面实现构建一个组件指针，设置改组件指针格式、把Model的数据取到改组件指针中，把用户输入的数据通过改组件指针来设置Model，最后再设置一下组件的位置大小。这就是一个自定义代理组件的大概框架，然后其他一些复杂的东西，你就可以通过折腾你构建的组件指针来达到你想要的目的。

最后再加一句：QTableView默认代理组件是QLineEdit。

4、使用QComboBox组件作为代理组件实现下拉框和图标

        上面代理组件简单的原因是没有给QSpinBox设置原始数据和其他图标之类的，但是总的步骤是一样的，只不过是增加了对自定义组件的数据增加了处理。

        先看效果：

代码如下（提示如果有调试不出来的可以先清理所有项目再重新构建项目，再运行）：

/********************qgenderdelegate.h文件**********************************/

#ifndef QGENDERDELEGATE_H
#define QGENDERDELEGATE_H
#include <QStyledItemDelegate>
#include <QStandardItemModel>

class QGenderDelegate : public QStyledItemDelegate
{
    Q_OBJECT
public:
    QGenderDelegate(QObject *parent = nullptr);

    QWidget *createEditor(QWidget *parent,
                          const QStyleOptionViewItem &option,
                          const QModelIndex &index) const override;

    void setEditorData(QWidget *editor, const QModelIndex &index) const override;
    void setModelData(QWidget *editor,
                      QAbstractItemModel *model,
                      const QModelIndex &index) const override;

    void updateEditorGeometry(QWidget *editor,
                              const QStyleOptionViewItem &option,
                              const QModelIndex &index) const override;   
    void paint(QPainter *painter,
               const QStyleOptionViewItem &option, const QModelIndex &index) const override;
private:



};

#endif // QGENDERDELEGATE_H

/********************qgenderdelegate.cpp文件**********************************/

#include "qgenderdelegate.h"
#include <QComboBox>
#include <QPainter>          // 提供绘图功能(QPainter类)
#include <QStyleOptionViewItem> // 提供绘图选项参数
#include <QPalette>          // 提供颜色调色板
#include <QIcon>             // 提供图标功能
#include <QRect>             // 提供矩形区域定义
#include <QApplication>

QGenderDelegate::QGenderDelegate(QObject *parent):QStyledItemDelegate(parent)
{

}


QWidget *QGenderDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    //没有使用的参数，进行说明
    Q_UNUSED(option);
    Q_UNUSED(index);

    //新建一个下拉框组件指针作为editor， 同时对其进行设置， 并返回
    QComboBox *editor = new QComboBox(parent);
    //给这个组件添加相应的item，这样你点击这个下拉框就能看到这两个item了
    editor->addItem(QIcon(":/source/images/boy.png"), "男");
    editor->addItem(QIcon(":/source/images/girl.png"), "女");

    return editor;
}

void QGenderDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
      //从model里面获取数据，再通过editor设置显示到tableView中
      //这里的index是属于model的不是属于代理组件的
      QString value = index.data(Qt::DecorationRole).toString();
      //强行转换，获取下拉列表组件的指针
      QComboBox *genderCombox = static_cast<QComboBox *>(editor);
      //给这个组件设置从model获取的值  
      genderCombox->setCurrentText(value);
}

void QGenderDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
    //从代理组件中获取数据设置到model中
    QComboBox *genderCombox = static_cast<QComboBox *>(editor);
    QString selectedText = genderCombox->currentText();
    //保存到model中去
    model->setData(index, selectedText, Qt::EditRole);

}

void QGenderDelegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    Q_UNUSED(editor);
    Q_UNUSED(index);
    editor->setGeometry(option.rect);
}


/*
    用户双击性别单元格

    委托调用createEditor创建QComboBox

    setEditorData被调用，将当前值"男"加载到下拉框

    用户选择"女"

    用户按Enter确认

    setModelData被调用，将"女"保存到模型

    模型发出dataChanged信号

    视图调用paint()更新显示

*/

void QGenderDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    /*
 这里算是一个新重点！！！

        1、paint函数的作用是对自定义控件的渲染
        需要的头文件：
                #include <QPainter>          // 提供绘图功能(QPainter类)
                #include <QStyleOptionViewItem> // 提供绘图选项参数
                #include <QPalette>          // 提供颜色调色板
                #include <QIcon>             // 提供图标功能
                #include <QRect>             // 提供矩形区域定义

        2、paint方法也是继承QStyledItemDelegate的方法。其原理是：用户双击性别单元格，
委托调用createEditor创建QComboBox，setEditorData被调用，将之前添加的"男"、"女"加载到
下拉框，假如用户选择"女"后按Enter确认（或者双击）后，setModelData会被调用，将"女"保存到model，
model发出dataChanged信号，视图收到这个信号后调用paint()更新显示。

        
    */

    //获取model中获取存储的文本
    QString text = index.data(Qt::EditRole).toString();
    //根据text创建icon
    QIcon icon = (text == "男") ? QIcon(":/source/images/boy.png"): QIcon(":/source/images/girl.png");
    //绘制背景
    //检查单元格是否被选中, 如果选中：使用高亮颜色填充背景, 如果未选中：使用基础颜色填充背景
    if(option.state & QStyle::State_Selected){
        painter->fillRect(option.rect, option.palette.highlight());
    }
    else{
        painter->fillRect(option.rect, option.palette.base());
    }

    //绘制图标部分
    //创建一个正方形区域 (高度和宽度相同),在这个区域内绘制图标 (自动处理图标的缩放和居中)
    QRect iconRect = option.rect;
    iconRect.setWidth(iconRect.height());
    icon.paint(painter, iconRect);

    //绘制文本部分
    //文本区域从图标右侧开始，留4像素间距，根据选中状态设置文本颜色 (选中时用高亮文本色)
    //垂直居中绘制文本
    QRect textRect = option.rect;
    textRect.setLeft(iconRect.right() + 8);
    painter->setPen(option.state & QStyle::State_Selected ?
                   option.palette.highlightedText().color() :
                   option.palette.text().color());
    painter->drawText(textRect, Qt::AlignVCenter, text);

}

/*************************mainwindow.h 文件*******************************/

QGenderDelegate genderDelegate;    //给mainwindow类增加一个属性


/*************************mainwindow.cpp 文件*******************************/

ui->tableView->setItemDelegateForColumn(1, &genderDelegate);    //进行关联

总结：这个自定义代理下拉框组件和上面的SpinBox组件构建方式还是一样的，只不过在它的基础上增加了一个对应的图标，这里面关键的部分是这个图标并不会加载到model和下拉组件中去，而是调用了point方法，point方法会根据当前model的值是"男"还是"女"选择相应的图标进行渲染。这上面还有一个小瑕疵，就是因为下拉框默认的顺序是"男"在第一列、"女"在第二列，所以在当前单元格为"女"的时候双击会直接变成"男"给人一种突兀感。这个问题想要修改的可自行探索。

5、使用QDateEdit组件作为代理组件

先看效果:

代码如下：

/************************qdateeditdelegate.h 文件******************************/
#ifndef QDATEEDITDELEGATE_H
#define QDATEEDITDELEGATE_H
#include <QStyledItemDelegate>

class QDateEditDelegate : public QStyledItemDelegate
{
    Q_OBJECT
public:
    QDateEditDelegate(QObject *parent = nullptr);

    QWidget *createEditor(QWidget *parent,
                          const QStyleOptionViewItem &option,
                          const QModelIndex &index) const override;

    void setEditorData(QWidget *editor, const QModelIndex &index) const override;
    void setModelData(QWidget *editor,
                      QAbstractItemModel *model,
                      const QModelIndex &index) const override;

    void updateEditorGeometry(QWidget *editor,
                              const QStyleOptionViewItem &option,
                              const QModelIndex &index) const override;


};

#endif // QDATEEDITDELEGATE_H

/************************qdateeditdelegate.cpp 文件******************************/

#include "qdateeditdelegate.h"
#include <QDateEdit>

QDateEditDelegate::QDateEditDelegate(QObject *parent):QStyledItemDelegate(parent)
{

}

QWidget *QDateEditDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    QDateEdit *dateEdit = new QDateEdit(parent);
    //设置日期范围
    dateEdit->setMinimumDate(QDate(1900, 1, 1));
    dateEdit->setMaximumDate(QDate(2029, 8, 5));
    //开启日历控件
    dateEdit->setCalendarPopup(true);
    //给日期编辑组件设置为当前日期，数据来源于model
    //这样表格里面是什么日期，双击修改的时候开始显示的也是这个日期增加用户体验
    QString value  = index.data().toString();
    QDate date = QDate::fromString(value, "yyyy-M-dd");
    dateEdit->setDate(date);

    return  dateEdit;
}

void QDateEditDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
    //从model获取数据传给editor
     QString value  = index.data().toString();
     QDate date = QDate::fromString(value, "yyyy-M-dd");
     QDateEdit *dateEdit = static_cast<QDateEdit *>(editor);
     dateEdit->setDate(date);

}

void QDateEditDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
    //从editor获取数据给model
    QDateEdit *dateEdit = static_cast<QDateEdit *>(editor);
    QDate  date = dateEdit->date();
    //因为没有重写point所以model填入怎么格式的数据在tableView中就会怎么显示
    QString value = date.toString("yyyy-M-dd");
    model->setData(index, value);
}

void QDateEditDelegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    editor->setGeometry(option.rect);
}


/*************************mainwindow.h 文件*******************************/

QDateEditDelegate dateEditDelegate;    //给mainwindow类增加一个属性


/*************************mainwindow.cpp 文件*******************************/

ui->tableView->setItemDelegateForColumn(2, &dateEditDelegate);    //进行关联

以上就是为tableView的item增加一个自定义日历组件的代理了。

QComboBox自定义绘制下拉列表
weixin_46424582的博客
12-03 2927
文章目录前言一、子类化QAbstractListModel二、子类化QStyledItemDelegate三、使用总结 前言 最近一直在对QComboBox的模型和视图委托进行了一些深入的研究，因此在这里做一个记录，总结一下。前两篇是对QCombobox的下拉表格的说明，以及对自定义委托和排序的讲解。本篇是对QComboBox的委托样式进行一些说明，然后做一个类似于QQ登录时的下拉框，会显示历史登录的账号头像等信息。 提示：以下是本篇文章正文内容，下面案例可供参考 一、子类化QAbstractListM
QT listView学习
Ccqingkong的博客
12-12 6285
QT listView学习 & 委托学习 & 自绘图形
QT开发串口助手(四)——实现发送数据功能
FourLeafCloverLLLS的博客
08-13 7969
今天我们首先来完善数据接收功能， 同时完成数据发送功能 一. 完善数据接收功能 主要有以下几点需要完善： 需要接收中文 打开串口的pushbotton，点击打开后需要改为关闭串口功能 1. 完善接收中文功能 这一块我在帮助手册上是找不到解决办法，只能在网上看有没有解决办法了， 参考了网上这位博主的https://blog.csdn.net/ouening/article/details/89469468，接收函数修改为 /*显示串口数据函数*/ void MainWindow::displayDa.
QT开发串口助手(三)——实现接收数据功能
FourLeafCloverLLLS的博客
08-12 5904
上一章我们实现了显示串口号的功能，接下来我们继续完善我们的功能，考虑到我的需求是要做一个串口配置esp8266的上位机， 而往往这类起配置作用的上位机只需要选择串口号和波特率就可以了，并不需要选择数据位，校验位，停止位。这部分是协议规定好的。 一. 实现选择波特率功能 1. 功能规划 ...
QT开发串口助手(二)——实现点击按钮刷新串口功能
FourLeafCloverLLLS的博客
08-05 2429
上一章我们完成了串口库的导入，并写了一段测试代码，接下来我们撸代码。今天由于网速比较慢，进不了QT官网， 但是我在QT助手上搜索，也可以看到帮助文档。 一. 测试代码讲解 QList QSerialPortInfo::availablePorts()函数返回一系列可使用的QSerialPortInfo对象 我们再看看QSerialPortInfo对象有什么熟悉或者方法，如下图所示，有这些方法， 所以我们的测试代码中，直接打印端口的portName()。 二. 页面显示可用的串口信息 1. UI布局 .
【个人记录】ComboxBox绑定key和value
T_suanY的博客
03-31 614
string sql = "SELECT id,项目名称 FROM uploder项目表"; DataTable dt = DBHepler.Query(sql); cbxXm.DataSource = dt; cbxXm.DisplayMember = "项目名称"; // Text，即显式的文本 cbxXm.ValueMember = "id"; // Value，即实际的值 .
qt comboBox在设计其中添加选择项
aoxuestudy的专栏
03-12 4344
qt comboBox在设计其中添加选择项 1. 在qtCreator设计器中拖入ComboxBox控件 2.右键点击combox，选中“编辑项目”， 3.单击“+”添加子项
QT里的基本控件-＞上
qq_54395977的博客
01-11 2152
一、setupUi 1、setupUi的作用 setupUi下面的作用的是用来初始化窗口上面的控件(是在设计里面拖过去的控件才有，如果是自己写的那么是不会有的)，可以理解为在设计下拖的控件，那么要经过执行setupUi之后才会被创建，所以拖过去的控件使用就必须要在setupUi之后，不能在之前 例： 我们在这个ui->setupUi(this)上随便设置对控件的操作。我们也不难发现会报错，错误信息如下 这个结果也反映出对控件之后的使用一定要在setupUi之后，不...
去除QT list中item被选中时的边框
juebukeni的博客
09-18 953
问题 list中的item在选中时，会出现边框，导致设置的样式不美观 解决方案 ui.tableView->setFocusPolicy(Qt::NoFocus); 设置一下列表的焦点策略为NoFocus就可以了 参考 https://blog.csdn.net/qq_39805297/article/details/88847725 ...
MFC ComboxBox自定义重绘类实现详解
综上所述，MFC ComboxBox重绘类的知识点涵盖了MFC环境下ComboBox控件的使用、重绘时机及原因、自定义重绘类的设计和实现、代码组织以及注意事项等多个方面。通过自定义重绘类，开发者可以实现复杂的UI定制，提供用户...
表格ComboxBox加载数据
05-22
在Windows编程领域，MFC（Microsoft Foundation Classes）是一个C++库，用于简化开发Windows应用程序的过程。在MFC中，ComboBox控件是...正确地实现这些操作，可以提供更加灵活且用户友好的界面，提高用户的交互体验。
MFC ComboxBox重绘类
04-22
在这个场景中，我们关注的是`CMyComboBox`，这是一个自定义的组合框（ComboBox）类，它是MFC中的标准`CComboBox`类的扩展，专门为了实现自定义重绘功能而设计。 在MFC中，`CComboBox`类是用来处理Windows API中的...
Qt QComboBox 下拉复选多选（multicombobox）
csdndenglu的专栏
04-30 180
Qt QComboBox 下拉复选多选（multicombobox），备忘，待更多测试。
Qt 的信号与槽机制依赖元对象系统（Meta-Object System）实现
程序员黄老师的精品课！
04-30 79
在 Qt 中，信号和槽之间的连接主要通过 类及其相关的私有类进行管理。每个 实例都维护着一个指向其 的指针，该对象包含了有关类的所有元信息，包括信号、槽等。此外，还有一个关键的数据结构用于存储信号与槽之间的连接信息，即 结构体。 是 Qt 内部使用的一个结构体，用于表示单个信号到槽的连接。它通常包含以下字段：QMetaObject：包含类名、父类信息、属性列表、方法列表（包括信号和槽）、信号与槽的元信息等。它是 Qt 元对象系统的核心。QObjectPrivate： 类的私有部分，包含了一些对开发者
【C++ Qt】快速上手 显⽰类控件（Label、LCDNumber、ProcessBar、CalendarWidget）
溟洵的博客
04-28 1365
本文围绕Qt中常用的显示类控件展开，重点讲解了 QLabel（文本/图片显示）、QLCDNumber（数字显示）、QProgressBar（进度条） 和 QCalendarWidget（日历控件） 的核心属性、使用场景及代码实例，帮助快速上手Qt界面开发中的基础显示功能。
QT6 源（68）：阅读与注释按钮类 QAbstractButton，及各种属性验证，QT 为按钮中的图片编码的过程，
zhangzhangkeji的博客
05-03 59
（1）（2）
cmake qt 项目编译
hongyanwang
04-28 272
这两个文件通常一起使用，AuthenticateDialog.h提供类的接口，而AuthenticateDialog.cpp提供这些接口的具体实现。在你的项目中，如果启用了UPDATE_CHECKER选项，这两个文件会被添加到项目的源文件列表中，从而参与到项目的编译过程中。AuthenticateDialog.h 是一个C++头文件，包含了AuthenticateDialog类的声明，包括类的成员函数、成员变量以及可能的常量定义等。mkdir build && cd build 重新生成build文件夹。
施磊老师rpc(二)
最新发布
weixin_65612492的博客
05-03 392
service表示定义一个服务类；rpc 方法名 (参数类型) returns (返回类型)；对应业务逻辑中的远程函数。// 在protobuf 定义描述 rpc类型必须启用为了真正执行 RPC 远程调用，需要开发者自己实现一个类public:// 1. 对 request 序列化// 2. 构造 RPC 请求包// 3. 发送网络请求// 4. 接收响应并反序列化到 response该类实现了 CallMethod 的逻辑，真正完成 RPC 通信。并不会执行业务逻辑。而是调用。
Qt的WindowFlags窗口怎么选？
qq_41707090的博客
04-29 187
Qt的WindowFlags窗口怎么选? 进行一个详细的解释
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值