学习记录-Qt编写自定义控件

自定义一个带表格的窗口控件。很多时候，Qt自带的基本控件满足不了我们的需求，但是可以使用Qt的基本控件构造我们所需的控件。以下是我掌握的方法，记录一下。

需求是：一个自定义的控件上，能动态的添加和删除自定义的另一个控件。

主要两种方式：一种是使用QtDesigner拖控件实现，另一种是纯代码实现。我采用拖控件的方式。

首先，新建一个界面类，选择一个基础部件，是选用的是QFrame，然后使用Designer做出如下效果

包括，两个按钮，一个Scroll Area和水平布局控件，QFrame采用栅格布局，调整成如图。

然后在水平布局控件里我使用代码的方式加入了一个QtableView控件，并设置模型和插入了一些数据。

TestFrame.h

#ifndef TESTFRAME_H
#define TESTFRAME_H

#include <QFrame>
#include <QtGui>

namespace Ui {
class TestFrame;
}

class TestFrame : public QFrame
{
    Q_OBJECT
    
public:
    explicit TestFrame(QString title, QWidget *parent = 0);
    ~TestFrame();
    
signals:
    void sigExpand();
    void sigCollap();

private slots:
    void on_btnClose_clicked();
    void slotBtnClicked(int no);

private:
    Ui::TestFrame *ui;
    void initVariable();
    void initUI();
    void initStyle();
    QTableView *itb;
    QStandardItemModel *md;

};

#endif // TESTFRAME_H

testframe.cpp

#include "testframe.h"
#include "ui_testframe.h"
#include <QtGui>

TestFrame::TestFrame(QString title,QWidget *parent) :
    QFrame(parent),
    ui(new Ui::TestFrame)
{
    ui->setupUi(this);
    ui->label->setText(title);
    initVariable();
    initUI();
    initStyle();
}

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

void TestFrame::initVariable()
{
}

void TestFrame::initUI()
{
    md = new QStandardItemModel;

    itb = new QTableView;
    itb->setModel(md);
    ui->verticalLayout->addWidget(itb);

    QStandardItem *it1 = new QStandardItem("1");
    QStandardItem *it2 = new QStandardItem("2");
    QStandardItem *it3 = new QStandardItem("3");
    QList<QStandardItem *> list1;
    list1 << it1 << it2 << it3;
    md->appendRow(list1);
    md->setData(md->index(0,0),QColor(Qt::red),Qt::BackgroundColorRole);

    QStandardItem *it21 = new QStandardItem("1");
    QStandardItem *it22 = new QStandardItem("2");
    QStandardItem *it23 = new QStandardItem("3");
    QList<QStandardItem *> list2;
    list2 << it21 << it22 << it23;
    md->appendRow(list2);
    md->setData(md->index(1,1),QColor(Qt::red),Qt::BackgroundColorRole);

    QStandardItem *it31 = new QStandardItem("1");
    QStandardItem *it32 = new QStandardItem("2");
    QStandardItem *it33 = new QStandardItem("3");
    QList<QStandardItem *> list3;
    list3 << it31 << it32 << it33;
    md->appendRow(list3);
    md->setData(md->index(2,2),QColor(Qt::red),Qt::BackgroundColorRole);

}

void TestFrame::initStyle()
{
}

void TestFrame::on_btnClose_clicked()
{
    QStandardItem *it1 = new QStandardItem("1");
    QStandardItem *it2 = new QStandardItem("2");
    QStandardItem *it3 = new QStandardItem("3");
    QList<QStandardItem *> list1;
    list1 << it1 << it2 << it3;
    md->appendRow(list1);
    md->setData(md->index(0,0),QColor(Qt::red),Qt::BackgroundColorRole);
}

void TestFrame::slotBtnClicked(int no)
{

}

然后，是放置他的另一个控件，新建一个界面类，也选frame基类，两个按键、一个标签、一个Spacer和一个垂直布局器，效果如下：

boxframe.h

#ifndef BOXFRAME_H
#define BOXFRAME_H

#include <QFrame>
#include "testframe.h"

namespace Ui {
class BoxFrame;
}

class BoxFrame : public QFrame
{
    Q_OBJECT
    
public:
    explicit BoxFrame(QString objName,QWidget *parent = 0);
    ~BoxFrame();    

signals:
    void sigExpand();
    void sigCollap();

private:
    Ui::BoxFrame *ui;
    void initVariable();
    void initUI();
    void initStyle();
    void createMenu();
    TestFrame *it1;
    TestFrame *it2;
    TestFrame *it3;
    TestFrame *it4;

};

#endif // BOXFRAME_H

boxframe.cpp

#include "boxframe.h"
#include "ui_boxframe.h"
#include <QtGui>
#include "testframe.h"

BoxFrame::BoxFrame(QString objName, QWidget *parent) :
    QFrame(parent),
    ui(new Ui::BoxFrame)
{
    ui->setupUi(this);
    initVariable();
    setObjectName(objName);
    initUI();
    initStyle();
}

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

void BoxFrame::initVariable()
{
}

void BoxFrame::initUI()
{
    it1 = new TestFrame("test01");
    it2 = new TestFrame("test02");
    it3 = new TestFrame("test03");
    it4 = new TestFrame("test04");
    connect(this,SIGNAL(sigExpand()),it1,SIGNAL(sigExpand()));
    connect(this,SIGNAL(sigExpand()),it2,SIGNAL(sigExpand()));
    connect(this,SIGNAL(sigExpand()),it3,SIGNAL(sigExpand()));
    connect(this,SIGNAL(sigExpand()),it4,SIGNAL(sigExpand()));
    connect(this,SIGNAL(sigCollap()),it1,SIGNAL(sigCollap()));
    connect(this,SIGNAL(sigCollap()),it2,SIGNAL(sigCollap()));
    connect(this,SIGNAL(sigCollap()),it3,SIGNAL(sigCollap()));
    connect(this,SIGNAL(sigCollap()),it4,SIGNAL(sigCollap()));
    ui->gridLayout->addWidget(it1,0,0);
    ui->gridLayout->addWidget(it2,0,1);
    ui->gridLayout->addWidget(it3,0,2);
    ui->gridLayout->addWidget(it4,0,3);
    QHBoxLayout * hb = new QHBoxLayout;
    hb->addStretch();
    ui->gridLayout->addLayout(hb,0,4);

    createMenu();
}

void BoxFrame::initStyle()
{
}

void BoxFrame::createMenu()
{
    //生成菜单栏
    QMenu *pMenu = new QMenu(ui->btnCfg);
    pMenu->addAction(QString("测试1"));
    pMenu->addAction(QString("测试2"));
    pMenu->addAction(QString("测试3"));
    pMenu->addAction(QString("测试4"));
    pMenu->addAction(QString("测试5"));

    ui->btnCfg->setMenu(pMenu);
    //ui->btnCfg->setStyleSheet("QPushButton::menu-indicator{image:None;}"); //去除右边小三角
}

main.cpp

#include <QtGui/QApplication>
#include <QTextCodec>
#include <QtGui>
#include "boxframe.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QTextCodec *gbk = QTextCodec::codecForName("utf-8");
    QTextCodec::setCodecForTr(gbk);
    QTextCodec::setCodecForLocale(gbk);
    QTextCodec::setCodecForCStrings(gbk);
    BoxFrame w("yu");
    w.show();
    return a.exec();
}

运行效果：

点击右上角按钮，表格会添加新行。