qt实现 标签控件

qt实现 标签控件

咱先别说啥了,直接上图:
这里写图片描述

对照图大体介绍一哈:

  • 右边是个输入框,在右边输入内容后直接回车,就可以以标签的形式加到前边,每个标签并且有自己的删除按钮。(对!对!对!就是这个效果!!!

实现原理:

  • 首先分析控件,将这个控件可以划分为以下几个部分:①标签控件;②输入框;③外面的布局窗口

①:其实就是一个窗口设置一个横向布局器,左边一个label,右边一个button
②:输入框只要是监视回车事件
③:外面窗体布局是重点,需要动态去更新布局,动态有两种:一种是将布局销毁,重新去new,适合修改复杂布局的窗体;第二种就是动态的去插入(insertWidget)和删除(removeWidget)布局中的窗体,适合窗体布局简单的窗体。咱们这个控件就是一个简单的横向布局,所以就动态去插入和删除窗体。
④:其次就是使用信号和槽,将输入框的回车和添加槽函数,标签自身的关闭和删除槽函数连接即可。

重点代码

输入框的回车处理:

if (event->type() == QEvent::KeyPress)
{
    QKeyEvent *pEvent = dynamic_cast(event);
    if (pEvent->key() == Qt::Key_Enter || pEvent->key() == Qt::Key_Return)
    {
        if (!m_pInputEdit->text().isEmpty())
        {
        //添加新标签
            addLabel(new LabelClose(this, m_pInputEdit->text()));
            m_pInputEdit->setText("");
        }
    }
}

添加新标签:

m_oLabelList.append(p);
m_pMainLayout->insertWidget(m_oLabelList.size() - 1, p);
connect(p, SIGNAL(closeWidget(QWidget*)), this, SLOT(childClose(QWidget*)));

删除新标签:

m_pMainLayout->removeWidget(self);
m_oLabelList.removeAll((LabelClose*)self);

其他也就剩一些布局和样式的问题了,在这就不多说了。

源码下载

你可能感兴趣的:(Qt)