[Qt]自定義表頭實現過濾功能

時間 2019-12-08

標籤自定義表頭實現過濾功能简体版

原文原文鏈接

1. 寫在前面git

過濾功能源自項目上交互優化用戶體驗，在表頭添加過濾符號實現過濾，替換以往在表格上方佔用一行過濾項進行過濾。github

2. 過濾提示ide

過濾提示就是三態圖標(normal，hover，press)。這三種狀態的實現經過鼠標移動事件和鼠標點擊事件來實現。具體實現以下：函數

1）hover狀態在鼠標移動事件中實現優化

void CFilterHeaderView::mouseMoveEvent(QMouseEvent *e)
{
    m_hover = logicalIndexAt(e->pos());
    if (m_hover != -1)
        updateSection(m_hover);
    QHeaderView::mouseMoveEvent(e);
}

bool CFilterHeaderView::event(QEvent *e)
{
    switch(e->type())
    {
    case QEvent::Leave:
    case QEvent::HoverLeave:
        if (m_hover != -1)
            updateSection(m_hover);
        m_hover = -1;
        break;
    default:
        break;
    }
    return QHeaderView::event(e);
}

若是懸浮在某一列上，hover值等於該列的index，不然等於-1。若是hover值不等於-1，則刷新該列(updateSection)。this

mouseMoveEvent中檢測鼠標懸浮在那個表格列上。event函數中監聽Leave和HoverLeave事件。spa

2）press狀態在鼠標點擊事件中實現rest

void CFilterHeaderView::mousePressEvent(QMouseEvent *e)
{
    m_press = logicalIndexAt(e->pos());
    if (m_press != -1)
        updateSection(m_press);
    QHeaderView::mousePressEvent(e);
}

void CFilterHeaderView::mouseReleaseEvent(QMouseEvent *e)
{
    m_press = -1;
    QHeaderView::mouseReleaseEvent(e);
}

press的實現較爲簡單，鼠標點擊更新press，鼠標釋放press置爲-1。code

3）過濾提示的實現。orm

過濾提示在paintSection函數中實現，首先是調用基類paintSection實現表頭的繪製，而後是檢測有沒有定義過濾角色。若是有定義過濾角色，則根據三態選擇對應的圖標，繪製位置默認水平靠右垂直居住，也能夠本身指定位置。最後是繪製過濾提示。具體實現以下：

void CFilterHeaderView::paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const
{
    painter->save();
    QHeaderView::paintSection(painter, rect, logicalIndex);
    painter->restore();

    QVariant filterVar = model()->headerData(logicalIndex, orientation(), FilterRole);
    if (filterVar.isValid() && filterVar.toBool())
    {
        QPixmap pix = m_norFilterPix;
        bool b_contain = getFilterRect(rect).contains(cursor().pos());
        if (logicalIndex == m_hover && b_contain)
        {
            pix = m_hovFilterPix;
        }
        if (logicalIndex == m_press && b_contain)
        {
            pix = m_preFilterPix;
        }

        int align = Qt::AlignRight | Qt::AlignVCenter;
        QVariant alignVar = model()->headerData(logicalIndex, orientation(), FilterAlignmentRole);
        if (alignVar.isValid())
        {
            align = alignVar.toInt();
        }
        style()->drawItemPixmap(painter, rect, align, pix);
    }
}

表格繪製的區域和過濾提示繪製的區域不一致，要根據過濾圖標大小進行計算過濾提示的區域。只有當鼠標在過濾區域位置上方，hover和press纔有效，不然仍然是normal狀態。過濾區域繪製的位置能夠從外面獲取，也能夠使用默認位置。最後style()->drawItemPixmap進行繪製。

調用基類paintSection方法先後調用QPainter::save()和QPainter::restore()是必要的。若是不調用，style()->drawItemPixmap是不會起做用的。

4）過濾提示點擊信號

點擊過濾提示會發出信號，鏈接此信號能夠進行過濾功能的實現。具體實現以下：

void CFilterHeaderView::mouseReleaseEvent(QMouseEvent *e)
{
    if (e->button() == Qt::LeftButton)
    {
        int section = logicalIndexAt(e->pos());
        QVariant filterVar = model()->headerData(section, orientation(), FilterRole);
        if (filterVar.isValid() && filterVar.toBool())
        {
            QRect rect(sectionViewportPosition(section), 0, sectionSize(section), height());
            if (getFilterRect(rect).contains(cursor().pos()))
            {
                emit filterClicked(section);
            }
        }
    }
    QHeaderView::mouseReleaseEvent(e);
}

過濾信號發出的條件：1. 左鍵點擊，2. 定義了過濾功能，3. 鼠標在過濾提示區域中

3. 使用過濾功能

使用過濾表頭的方法以下：

    m_tableView = new QTableView(this);
    m_model = new QStandardItemModel(this);
    m_filterModel = new QSortFilterProxyModel(this);
    m_filterModel->setSourceModel(m_model);
    m_filterModel->setSortRole(Qt::ToolTipRole);
    m_tableView->setModel(m_filterModel);

    QHBoxLayout* mainLayout = new QHBoxLayout(this);
    mainLayout->setMargin(0);
    mainLayout->addWidget(m_tableView);
    setLayout(mainLayout);

    m_tableView->setEditTriggers(QAbstractItemView::NoEditTriggers);
    m_tableView->setSelectionMode(QAbstractItemView::SingleSelection);
    m_tableView->setSelectionBehavior(QAbstractItemView::SelectRows);

    m_tableView->verticalHeader()->hide();
    CFilterHeaderView* pHeader = new CFilterHeaderView(this);
    connect(pHeader, &CFilterHeaderView::filterClicked, this, &Widget::onFilterClicked);
    m_tableView->setHorizontalHeader(pHeader);