Qt之QTableView 鼠标动作特效

http://blog.sina.com.cn/s/blog_a6fb6cc90101i8it.html

 

之前有讲解过QTableWidget的使用（QTableWidget详解（样式、右键菜单、表头塌陷、多选等）），已经算是很详细了，这节再讲更常用的视图部件QTableView的高级用法。

    Qt中有几种纯粹的视图部件：QListView、QTableView、QColumnView、QTreeView，所有的这些视图都必须提供一个模型（无论是自定义，还是Qt中已提供的）来与之配合。Qt仍然提供了一些便利的窗口部件（“便利”是因为它们提供了自己内置的模型，并能直接使用），如;QListWidget、QTableWidget、和QTreeWidget。还有QComboBox，既是一个便利的窗口部件也是一个视图部件，也就是说，我们既可以直接使用（因为它提供了内置的模型），也能把它当做一个模型的视图部件（这种情况下，可以提供一个合适的模型给它）。

    之所以说视图部件常用，是因为在编程的过程当中经常遇到大数据集，使用视图/模型就显得更有效率。当然，对于数据集较小（数百或数千个项）的应用程序，选择便利部件比较合适。

    这节不再去过多的讲解模型/视图如何使用（Qt之模型/视图（实时更新数据）一节有特别介绍），更多的是讨论QTableView的深入用法。

 

一、实现QToolTip

1.设置鼠标跟随

table_view->setMouseTracking(true); 

2.实现自定义槽函数

void TableView::showToolTip(const QModelIndex &index)
{
        if(!index.isValid())
                return;

        int row = index.row();
        QString file_name = list_file.at(row);

        if(file_name.isEmpty())
                return;

        QToolTip::showText(QCursor::pos(), file_name); 
}

3.连接信号与槽

connect(this, &TableView::entered, this, &TableView::showToolTip); 

 

效果如下：

 

 

二、整行选中（去掉选中时的虚线），并设置选中色

1.设置整行选中

table_view->setSelectionBehavior(QAbstractItemView::SelectRows); 

2.实现自定义委托（QStyledItemDelegate）

void StyledDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const  
{  
        QStyleOptionViewItem  view_option(option);  
        if (view_option.state & QStyle::State_HasFocus) {  
                view_option.state = view_option.state ^ QStyle::State_HasFocus;  
        }

        QStyledItemDelegate::paint(painter, view_option, index);
}

3.设置委托

table_view->setItemDelegate(styled_delegate);

4.使用QSS设置选中色

QTableView{
        border:none;
        background:white;
}
QTableView::item:selected{
        color:white;
        background:rgb(34, 175, 75);    
}

 

效果如下：

 

三、设置鼠标滑过颜色

 

1.鼠标滑过某item项高亮（自定义代理里面添加滑过样式）

void StyledDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const  
{  
        QStyleOptionViewItem  view_option(option);  
        if (view_option.state & QStyle::State_HasFocus) {  
                view_option.state = view_option.state ^ QStyle::State_HasFocus;  
        }

        //添加鼠标滑过的背景色
        if(option.state & QStyle::State_MouseOver){
                painter->fillRect(view_option.rect, QColor(180, 200, 220));
        }

        QStyledItemDelegate::paint(painter, view_option, index);
}  

 

效果如下：

 

    这种情况下，可以看出，当鼠标滑过某个item项的时候，改项会改变颜色，但选中的时候是整行选中，则看起来很不协调，下面将讲述如何实现鼠标滑过后整行高亮效果。

 

2.鼠标滑过整行高亮

 

自定义视图中实现以下几个方法：

void TableView::mouseMoveEvent ( QMouseEvent * event)

{
        int row = indexAt(event->pos()).row();
        updateRow(row);
}

void TableView::leaveEvent ( QEvent * event )

{
        table_model->setHoverRow(-1);

    int column_count= model()->columnCount();
        for (int i = column_count- 1; i >= 0; i--)
        {
                update(model()->index(current_row, i));
        }
        current_row = -1;
}

void TableView::updateRow(int row)

{
        if (row == current_row)
                return;

        table_model->setHoverRow(row);

   int column_count= model()->columnCount();
        for (int i = column_count- 1; i >= 0; i--)
        {
                update(model()->index(current_row, i));
                update(model()->index(row, i));
        }
        table_model->showToolTip(row);  //自定义方法用来进行QToolTip的显示
        current_row = row;
}

 

自定义模型中实现以下几个方法：

void TableModel::setHoverRow(int hover_row)

{
        this->hover_row = hover_row;
}

QVariant ConvertPdfModel::data(const QModelIndex &index, int role) const
{
        if (!index.isValid())
                return QVariant();

        int row = index.row();  //行号
        if (row < 0 || row >= list_file.size())
                return QVariant();

        int column = index.column();
        QString name = list_file.at(row);
        switch (role) {
        case Qt::BackgroundColorRole:{
                        if (row == hover_row) {
                                return QColor(180, 200, 220);
                        }
                }
        case Qt::DecorationRole: {  //图标
                        //...
                }
        case Qt::DisplayRole: {  //文本
                        //...
                }
        case Qt::TextAlignmentRole: {  //对齐方式
                        //...
                }
        default:
                return QVariant();
        }

        return QVariant();
}

 

效果如下：

 

    updateRow主要是进行颜色更新的，鼠标所在行号若与之前的行号保持一致（鼠标一直处于当前行），则直接返回，否则（行号改变），进行更新。mouseMoveEvent、leaveEvent主要处理鼠标移动、离开过程中的逻辑 —— 然后调用updateRow函数进行实时更新。

 

总结：   

    以上针对QTableView做了高级、深入的讲解，加上之前章节对模型/视图的详细用法的介绍，大家应该对这些控件有了更深入的了解，并能更好的使用它们。关于如何处理更为细节的问题，根据这些介绍也能悟出一二，所有的东西都不能尽善尽美，留下的小细节就在实战中慢慢摸索，也许只有遇到困难时，你才会发现还有进步的空间。。。