QT 使用QLsitView 实现数据的分组多级显示,子列表可动态显示/隐藏

效果图

在这里插入图片描述


概述

  • 在QT中多级显示应该是QTreeView该干的事,但是当我们还需要图标显示的时候,也就是 setViewMode(QListView::IconMode)QTreeView就无法满足了。
  • 描述下核心思想:整体分为俩层结构,都是继承于QWidget
    1. 最上层为一个QWidget,用于存放所有第二级的QWidget
    2. 第二层为QWidget,就也是所看到的每一个组。里面都有一个QListView,用于控制隐藏/显示,看似为一个按钮,其实也是一个QWidget
    3. 也就是说整体就是有多个组拼起来的,而每个组中都有一个QListView按钮,从而形成多级结构。
  • 图中所示虽然只有俩级,但还可以再加三级,四级…,完全可以实现树的多级显示。

部分代码

  • 代码好像都没啥好描述的,主要就是实现思路,自己去拉源码看吧。这里就贴下按钮的绘制吧。
void ControlToolButtons::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);
    painter.fillRect(event->rect(), QColor(qRgb(235, 243, 254)));

    QPen pen;
    QColor colorNormal("#005A92");
    QColor colorPressed("#036EB7");
    pen.setWidth(1);
    pen.setColor(m_isPressed ? colorPressed : colorNormal);
    painter.setPen(pen);
    QFont font("Microsoft YaHei");
    font.setPixelSize(14);
    font.setBold(true);
    painter.setFont(font);
    int w = QFontMetrics(font).width(m_text);
    int h = QFontMetrics(font).height();
    QRect rect(10, (height() - h) / 2, w + 1, h + 1);
    painter.drawText(rect, m_text);

    QPainterPath path;
    int width = event->rect().width();
    if (!m_isHovered)
    { // 展开
        QPoint pos1(width - 10, 12);
        QPoint pos2(width - 20, 12);
        QPoint pos3(width - 15, 17);
        path.moveTo(pos1);
        path.lineTo(pos2);
        path.lineTo(pos3);
        path.lineTo(pos1);
        painter.fillPath(path, m_isPressed ? colorPressed : colorNormal);
    }
    else
    { // 收缩
        QPoint pos1(width - 20, 12);
        QPoint pos2(width - 20, 18);
        QPoint pos3(width - 12, 15);
        path.moveTo(pos1);
        path.lineTo(pos2);
        path.lineTo(pos3);
        path.lineTo(pos1);
        painter.fillPath(path, m_isPressed ? colorPressed : colorNormal);
    }
    pen.setColor(QColor(206, 206, 206));
    pen.setWidth(2);
    painter.setPen(pen);
    painter.drawRect(event->rect());
}

总结

  • 知识理应共享,源码在此。
  • 这个示例中的功能点,还是比较简单的,只要你理解了思路,应该可以轻松实现。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-01 04:46:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-01 04:46:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-01 04:46:04       82 阅读
  4. Python语言-面向对象

    2024-05-01 04:46:04       91 阅读

热门阅读

  1. 大话人工智能之训练数据集

    2024-05-01 04:46:04       33 阅读
  2. [Mac软件]Adobe Photoshop 2024 v25.7 中文激活版

    2024-05-01 04:46:04       37 阅读
  3. 同源策略

    2024-05-01 04:46:04       31 阅读
  4. vue3路由跳转传递参数: params传参接收不到?

    2024-05-01 04:46:04       36 阅读
  5. LEFT JOIN 子查询可能引发的误删数据

    2024-05-01 04:46:04       31 阅读