Qt实现表格树控件-自绘树节点虚线
目录
一、开心一刻
二、自绘树节点？
三、效果展示
四、实现思路
1、可扩展接口
2、函数重写
3、同步左侧表头
五、相关文章
原文链接：Qt实现表格树控件-自绘树节点虚线
一、开心一刻
一程序员第一次上女朋友家她妈板着脸问：你想娶我女儿，有多少存款？
程序员低了下头：五百！
她妈更鄙视了：才五百块，买个厕所都不够！
程序员忙说：不是人民币！
她妈：就算是美元，还是不够买厕所！
程序员：其实是比特币！
她妈：哇，贤婿，我给你买只大龙虾去
二、自绘树节点？
自绘树节点？听起来都挺复杂的，可是为什么还要自绘树节点呢？这充分说明产品的脑子是什么东西都能想出来的。
有一天产品说我们的软件里缺少一个美丽的树控件，然后就要求开发去实现这个功能。
对于有一定开发经验的同学可能直接会去百度，或者上Qt帮助文档上查找资料，然后发现直接设置qss就能达到我们需要的效果，于是一顿操作后，发现效果还是不错滴。
setStyleSheet(“”
”QTreeView{outline:none;show-decoration-selected:1;}”
”QTreeView{outline:none;border:0px;}”
”QTreeView::branch{background-color:transparent;}”
”QTreeView::item:hover,QTreeView::branch:hover{background-color:transparent;border-color:rgb(255,0,0);}”
”QTreeView::item:selected,QTreeView::branch:selected{background-color:#C5E0F7;}”
”QTreeView::branch:open:has-children{image:url(:/branch-expand.png);}”
”QTreeView::branch:closed:has-children{image:url(:/branch-collapse.png);}”
”QTreeView::branch:has-siblings:!adjoins-item{border-image:url(:/branch-line.png)0;}”
”QTreeView::branch:has-siblings:adjoins-item{border-image:url(:/branch-more.png)0;}”
”QTreeView::branch:!has-children:!has-siblings:adjoins-item{border-image:url(:/branch-end.png)0;}”
”QTreeView::branch:has-children:!has-siblings:closed,QTreeView::branch:closed:has-children:has-siblings{border-image:none;image:url(:/branch-collapse.png);}”
”QTreeView::branch:open:has-children:!has-siblings,QTreeView::branch:open:has-children:has-siblings{border-image:none;image:url(:/branch-expand.png);}”
);
遂找来产品验证，当产品看到这个效果后，脸直接都绿了。
产品：我不是说要一个树形控件吗？行高需要能动态调整那种！
开发：。。。
开发：行高调整了，那branch上贴的图拉伸后不是模糊了么。。。
产品：。。。
产品：我不管，这个行高可拖拽功能很重要，怎么实现我不管，但是功能必须要有。
开发：卧槽，看来只有出终极大法了，直接自绘吧
三、效果展示
如下图所示，是一个简单的树branch自绘效果。
此处主要是展示一个demo效果，如果需要美化需要专业设计师出图来做。
四、实现思路
既然要自己绘制树形节点，那必然要去研究Qt的源码。
1、可扩展接口
首先我们打开QTreeView类的帮助文档，查找这个类都有哪些可供重写的接口，然后就发现了这么几个函数
看名字大概都知道是什么意思，不过这里还是做简要说明
函数名|含义—|—drawBranches|绘制branchdrawRow|绘制行drawTree|绘制树indexRowSizeHint|默认行高rowHeight|获取行高
前边提到我们要自己绘制branch线条，但是其余的东西还是要走Qt默认的绘制风格，因此在重写绘制函数时，千万不要忘记了调用原有的绘制方法。
表格中前3个函数就是绘制树控件的具体方法，这3个函数搭配起来完成了树控件内容格子的绘制。下面我们来重写这3个函数，分别完成我们的需求
2、函数重写
a、绘制行drawRow
drawRow顾名思义就是绘制一行的意思，这里也确实如此。为什么要重写这个函数呢？答案也很简单。
树控件本身是不具有垂直分割线的，既然我们要模拟表格的样式，那么垂直分割线必然是需要的。
实现代码可能像下面这样，是不是很简单。
voidFrozenTreeView::drawRow(QPainter*painter,constQStyleOptionViewItem&options,constQModelIndex&index)const
{
QTreeView::drawRow(painter,options,index);
//绘制网格线
QPenpen;
pen.setWidth(m_iWidth);
pen.setColor(m_gridLineColor);
painter->save();
painter->setPen(pen);
painter->drawRect(options.rect);
painter->restore();
}
b、绘制branch
绘制行函数主要是添加了单元格边框绘制，接下来就是第一列的branch绘制。
绘制branch时一定不要忘记调用原有的绘制函数，否则界面显示会异常。
{
painter->save();
QTreeView::drawBranches(painter,rect,index);
painter->restore();
}
绘制branch时主要是根据当前节点是否展开、是否有孩子节点、是否有兄弟节点等状态来联合判断并进行绘制
如下是绘制代码，可能有些长，但是应该比较好理解。
需要注意的点
除根节点外，每个节点都需要绘制文字前边的水平线
有父亲的节点需要绘制垂直线。绘制的竖线是否绘制到底，取决于是否有向下的兄弟
有爷爷的节点可能需要额外绘制向下的竖线。是否绘制取决于自己的父亲是否有向下的兄弟
规则3其实是一个循环的处理，也就是说爷爷如果有爸爸，也就是说节点如果有祖爷爷，那么可能还需要绘制更多的向下竖线。是否绘制取决于节点的爷爷是否有向下的兄弟
代码这里就不细说了，有兴趣的可以自己研究研究。绘制规则就是上述4点
//绘制branch
{
DataNode*node=static_cast<DataNode*>(index.internalPointer());
boolhasChild=node->children().size()!=0;//是否有孩子
QList<DataNode*>&children=node->parent()->children();
boolhas_next_siblings=children.indexOf(node)!=(children.size()-1);//是否有向后的兄弟
boolhas_pre_siblings=children.indexOf(node)!=0;//是否有向前的兄弟
intlevel=node->level();
intindentaion=indentation();//缩进
intindentaions=indentaion*(level-1);//缩进距离
QRectr=rect;
r.setLeft(r.left()+indentaions);//图标绘制位置
painter->save();
painter->setPen(m_branchLine);
boolexpaned=isExpanded(index);//节点是否展开
QLineline(r.center()+QPoint(0,r.top()-r.center().y()),r.center()+QPoint(0,r.bottom()-r.center().y()));
line.translate(-indentaion,0);
//QLineline(r.topLeft(),r.bottomLeft());
//循环绘制(具有兄弟节点的)父节点向下的竖线
DataNode*parent_node=node->parent();
DataNode*sub_node=node;
boolisNeed=node->children().size()==0;
for(inti=level-1;i>=0;–i)
{
QList<DataNode*>&children=parent_node->children();
boolhas_next_siblings=children.indexOf(sub_node)!=(children.size()-1);//父节点是否有(向后的)兄弟
if(has_next_siblings)
{
painter->drawLine(line);
}
if(level-1==i)
{
QPointpos=(line.p1()+line.p2())/2;
QPointpos2=pos+QPoint(indentaion/2,0);
painter->drawLine(pos,pos2);
if(!has_next_siblings)
{
painter->drawLine(line.p1(),(line.p1()+line.p2())/2);
}
}
sub_node=parent_node;
parent_node=parent_node->parent();
line.translate(-indentaion,0);
}
QPixmappix;
if(expaned)
{
if(hasChild)
{
pix=QPixmap(“:/branch-expand.png”);
}
}
else
{
if(hasChild)
{
pix=QPixmap(“:/branch-collapse.png”);
}
}
if(pix.isNull()==false)
{
QRectpixRect=QRect(QPoint(0,0),pix.size());
pixRect.moveCenter(r.center());
if(expaned)
{
QLineline(r.center(),r.center()+QPoint(0,r.bottom()-r.center().y()));
painter->drawLine(line);
}
painter->drawPixmap(pixRect,pix);
}
painter->restore();
如需转载，请注明文章出处和来源网址：