qt实现 标签控件

qt实现 标签控件

咱先别说啥了，直接上图：

对照图大体介绍一哈：

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

实现原理：

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

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

重点代码

输入框的回车处理：

if (event->type() == QEvent::KeyPress)
{
    QKeyEvent *pEvent = dynamic_cast<QKeyEvent*>(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);

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

源码下载