自定义树形结构导航栏 - QTCN开发网

离线sssooonnnggg

新手上路

图酷模式

只看楼主倒序阅读楼主发表于: 2015-01-26

应网友 @heartlessjun 要求，将项目中实现的树形结构导航栏的源码剥离出来，与各位分享。

树形结构的数据通过读取xml文件来获取，xml文件结构如下：

复制代码

<?xml version="1.0" encoding="UTF-8"?>
<root>
<layout>
<Node label="基本信息"></Node>
<Node label="密码信息" count="100"></Node>
<Node label="内置应用" collapse="0">
<Node label="短信" count="1000"></Node>
<Node label="通讯录" count="256"></Node>
<Node label="通话记录" count="20"></Node>
</Node>
<Node label="社交应用" collapse="0">
<Node label="QQ" count="231"></Node>
<Node label="微信"></Node>
</Node>
<Node label="浏览器" collapse="0">
<Node label="系统浏览器" count="99"></Node>
<Node label="UC浏览器" count="66"></Node>
<Node label="QQ浏览器" count="2"></Node>
<Node label="百度浏览器" count="123"></Node>
<Node label="猎豹浏览器" ></Node>
</Node>
<Node label="模拟仿真">
</Node>
<Node label="镜像分析">
</Node>
</layout>
</root>

collapse 代表父节点初始化时是否展开， count 代表节点中 tag 显示的数字， 0 为不显示

使用了 item/view/delegate 来实现自定义的导航栏，详见源码

http://download.csdn.net/detail/sssooonnnggg/8396829

效果：

共1条评分，金钱+1

xiongyingeng

金钱 +1

-

2016-12-07

分享到 淘江湖新浪 QQ微博 QQ空间开心人人豆瓣网易微博百度鲜果白社会飞信

离线sssooonnnggg

新手上路

只看该作者 1楼发表于: 2015-01-26

在项目中的使用效果

离线toby520

论坛版主

只看该作者 2楼发表于: 2015-01-26

不错做的加油吧分享更多更好的

QtQML多多指教开发社区 http://qtclub.heilqt.com
将QtCoding进行到底
关注移动互联网，关注金融
开发跨平台客户端，服务于金融行业
专业定制界面
群号:312125701 373955953(qml控件定做)

离线xsjqqq123

侠客

只看该作者 3楼发表于: 2015-01-26

取证工具是什么？我将做一个linux上手机管理的，和你这个有几分相似，导航栏就不客气地收下了，话说，你那个分区大小是如何得到的？adb似乎没这样的功能吧

离线sssooonnnggg

新手上路

只看该作者 4楼发表于: 2015-01-26

回 xsjqqq123 的帖子

xsjqqq123:取证工具是什么？我将做一个linux上手机管理的，和你这个有几分相似，导航栏就不客气地收下了，话说，你那个分区大小是如何得到的？adb似乎没这样的功能吧 (2015-01-26 13:10)

linux大部分命令都可以通过adb 来调用，分区大小可以用 adb shell df 来看

离线zjmmlab

新手上路

只看该作者 5楼发表于: 2015-01-26

感谢分享

下载源码编译运行到这里总是无法得到正确的 node 指针，调试看到 node 中都是无效的地址：

NavModel::TreeNode* node = (NavModel::TreeNode*)index.data(Qt::UserRole).toUInt();

后稍作修改：

NavModel::TreeNode* node = index.data(Qt::UserRole).value<NavModel::TreeNode*>();

相应的 NavModel 类的函数也修改如下：
QVariant NavModel::data(const QModelIndex &index, int role) const
{
    ...
    ...
    if (role == QT::DisplayRole)
        return m_list[index.row()].label;
    else if (role == Qt::UserRole)
        return QVariant::fromValue(m_list[index.row()].treeNode);
    ....
}
这样即可正常运行。楼主原来的方法是将 treeNode 指针转换为 unsigned int 再放到 QVariant 中传回，使用时先 QVariant::toUInt() 再强制类型转换为地址，这种方法不知是否可行，在我的电脑上总是出错（WIN8.1 + Qt5.3.2 + VS2013)。

离线qhxnwrz

新手上路

只看该作者 6楼发表于: 2015-01-26

感谢分享

离线咬蚊嚼渍

新手上路

只看该作者 7楼发表于: 2015-01-26

mark一个，
非常感谢分享，如果我以后会用到，肯定会在代码里标记你的ID的，再次感谢

离线liudianwu

总版主

只看该作者 8楼发表于: 2015-01-27

真心不错，谢谢分享！

欢迎关注微信公众号：Qt实战/Qt入门和进阶(各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发) QQ：517216493 WX：feiyangqingyun QQ群：751439350

离线morg

新手上路

只看该作者 9楼发表于: 2015-01-27

谢谢，挺好用。调整到了Qt5并加了hover row功能(原mouse move hover row好像没有起作用)。请大家继续完善。源码

test_NavView.rar (12 K) 下载次数:656

离线sssooonnnggg

新手上路

只看该作者 10楼发表于: 2015-01-28

我的开发环境是4.8，使用5.0进行开发的兄弟可以使用楼上修改过的代码

离线liudianwu

总版主

只看该作者 11楼发表于: 2015-01-28

回 sssooonnnggg 的帖子

sssooonnnggg:
我的开发环境是4.8，使用5.0进行开发的兄弟可以使用楼上修改过的代码

楼上的忘记把config.xml打包进去了！

config.zip (1 K) 下载次数:431

欢迎关注微信公众号：Qt实战/Qt入门和进阶(各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发) QQ：517216493 WX：feiyangqingyun QQ群：751439350

离线圣域天子

总版主

只看该作者 12楼发表于: 2015-01-28

能做成控件，就最好了

离线咬蚊嚼渍

新手上路

只看该作者 13楼发表于: 2015-02-01

这个导航条，我试着用QTreeWidget来实现，现在可以做成这个样子：

有些是用QSS写的样式，有些是直接在QT设计师里改属性的。
现在感觉到了这个步，如果想加一些图片到QTreeWidget的item里面，
是不是需要用到模型视图才行？QT文档里的qss说明说得不太清楚，
不少东西没法用qss改。
有大神可以帮忙改改就好了。

离线sssooonnnggg

新手上路

只看该作者 14楼发表于: 2015-02-02

回咬蚊嚼渍的帖子

咬蚊嚼渍:这个导航条，我试着用QTreeWidget来实现，现在可以做成这个样子：
[图片]
有些是用QSS写的样式，有些是直接在QT设计师里改属性的。
现在感觉到了这个步，如果想加一些图片到QTreeWidget的item里面，
是不是需要用到模型视图才行？QT文档里的qss说明说得不太清楚，
... .. (2015-02-01 17:07)

想要加图标到 item 里面，直接调用 QTreeWidgetItem 的 setIcon 就可以了，但是无法根据目标当前的状态来切换图标。比如我希望当 item 选中时图标是白色的，不选中时图标是黑色的，这种需求无法通过纯 qss 来实现。

通过继承 QItemDelegate ，重写 paint 函数，实现的导航栏就比较灵活了，想怎么画就怎么画

离线xinlanbobo

新手上路

只看该作者 15楼发表于: 2015-03-05

谢谢分享

离线zichuangyang

新手上路

只看该作者 16楼发表于: 2015-03-06

离线zhangzhenti

禁止发言

只看该作者 17楼发表于: 2015-04-10

牛逼，不错啊

离线傲天雪

新手上路

只看该作者 18楼发表于: 2015-05-13

真心不错

离线fly_fine

新手上路

只看该作者 19楼发表于: 2015-05-13

如果导航栏列表的数据不固定，是从数据库获取的，能够实时更新吗？

离线heartlessjun

新手上路

只看该作者 20楼发表于: 2015-06-09

你这确实是个好思路，调取XML实现，我用QTreeWidget 实现的，加了些美化，还是谢谢你。。。。学习了！

离线liyiq_82

新手上路

只看该作者 21楼发表于: 2015-07-18

您好，楼主。你给的是最多2级菜单，我把代码下载下来后，怎么都实现不了三级菜单，求解

离线toby520

论坛版主

只看该作者 22楼发表于: 2015-07-21

mac下面直接崩溃

QtQML多多指教开发社区 http://qtclub.heilqt.com
将QtCoding进行到底
关注移动互联网，关注金融
开发跨平台客户端，服务于金融行业
专业定制界面
群号:312125701 373955953(qml控件定做)

离线wang17321

新手上路

只看该作者 23楼发表于: 2015-07-21

楼主能把修改后的源代码发出来，让我们这些菜鸟学习吗？

本帖提到的人: @sssooonnnggg

离线liyiq_82

新手上路

只看该作者 24楼发表于: 2015-07-22

现在我想把线条变细，但是无论怎么调，最底部的那条线还是比其他线更粗，楼主能否告知下怎么解决

离线371933024

新手上路

只看该作者 25楼发表于: 2015-10-12

在网上找了好几天没有找到这种效果，多谢楼主！！！

离线xyinfotech01

新手上路

只看该作者 26楼发表于: 2015-11-17

真心好东西，学习了

离线thomye

新手上路

只看该作者 27楼发表于: 2016-02-02

楼主，你好，我想请教一下，通过什么方法，点击导航就出现对应的窗口

离线pamxy

新手上路

只看该作者 28楼发表于: 2016-02-04

根据5楼兄台修改了的，QT5能够运行，也用VS2013编译过的版本

test_NavView.1.1

test_NavView1.1.7z (4758 K) 下载次数:604

你不是最优秀的，但你可以成为最优秀的, you are the best!

离线hunterzf

侠客

只看该作者 29楼发表于: 2016-09-22

谢谢楼主，正在做这么个东西

离线hunterzf

侠客

只看该作者 30楼发表于: 2016-09-23

楼主，真是谢谢了

离线yyzq

新手上路

只看该作者 31楼发表于: 2016-09-24

感觉像是遇到熟人了，TJ。。。。。。。。。。

离线liudianwu

总版主

只看该作者 32楼发表于: 2016-11-11

更新过一个版本：
* 1:合并成一个文件
* 2:隐藏多余接口,只保留readData函数接口
* 3:修正重复加载数据BUG及关闭时有时候崩溃的BUG
* 4:修正当范围值中最小值为负数时的bug
* 5:增加默认支持鼠标悬停
* 6:增加一些完整性校验
* 7:增加设置各种颜色
* 8:+-伸缩图形改成绘制,同时支持+-图形及三角形图形
* 9:增加setData数据接口,使之同时支持字符串链表作为数据源
* 10:增加设置分割线条是否可见
* 11:增加设置伸缩图片采用何种颜色
* 12:改进分割线条高度
* 13:将显示未读条数部分改成提示信息,可以是字符串
*/