使用QML的ListView自制树形结构图TreeView

news2024/11/24 0:06:32

背景

感觉QML自带的TreeView不是很好用,用在文件路径树形结构比较多,但是想用在自己数据里,就不太方便了,所以自己做一个。

用‘ListView里迭代ListView’的方法,制作树形结构,成果图:
在这里插入图片描述

代码

新建一个MyTreeView.qml用来写主要代码,再在main.qml中调用MyTreeView,并为它填充数据。
这里数据是在qml中用JSON.parse构建的json数据,也可以在cpp中用QJsonArray和QJsonObject来构建数据。

// MyTreeView.qml
import QtQuick 2.0

Item {
    id: root
    property alias model: list_view.model

    ListView {
        id: list_view
        width: contentWidth
        anchors.fill: parent
        anchors.margins: 10
        delegate: list_delegate
    }

    Component {
        id: list_delegate

        Item{
            id: list_itemgroup
            width: leftLine.width + centre.width + rightLine.width + listView.width
            height: Math.max(centre.height, listView.height)
            property int lineY: leftLine.y


            Rectangle {
                id: leftLine
                width: 20
                height: 1
                color: "#d3dee4"
                visible: modelData.id >= 0
                anchors.verticalCenter: centre.verticalCenter
            }

            Rectangle {
                id: centre
                width: 150
                height: 50
                color: "#d3dee4"
                radius: 5
                anchors.left: leftLine.right
                anchors.verticalCenter: parent.verticalCenter
                Text {
                    text: qsTr(modelData.name)
                    font.pixelSize: 20
                    font.bold: true
                    anchors.centerIn: parent
                }
            }

            Rectangle {
                id: rightLine
                width: 20
                height: 1
                color: "#d3dee4"
                visible: modelData.subnodes.length > 0
                anchors.verticalCenter: centre.verticalCenter
                anchors.left: centre.right
            }

            Rectangle {
                id: verticalLine
                width: 1
                color: "#d3dee4"
                x: parent.width + 1
                visible: modelData.subnodes.length > 1
                anchors.top: parent.top
                anchors.bottom: parent.bottom
            }

            ListView {
                id: listView
                delegate: list_delegate
                height: contentHeight
                width: contentWidth
                anchors.right: parent.right
                model: modelData.subnodes
                spacing: 10
                onModelChanged: {
                }
            }

            Component.onCompleted: {
                listView.forceLayout()  // 要先确保listView加载子项完成
                // 画一下verticalLine的y坐标起点和终点
                for (var i = 0; i < modelData.subnodes.length; i++) {
                    var item = listView.itemAtIndex(i)
                    if (i === 0) {
                        verticalLine.anchors.topMargin = item.lineY
                    } else if (i === modelData.subnodes.length-1) {
                        verticalLine.anchors.bottomMargin = item.lineY
                    }
                }
            }
        }
    }
}

// main.qml
import QtQuick 2.15
import QtQml.Models 2.15
import QtQuick.Window 2.12
import QtQuick.Controls 1.4

Window {
    id: window_
    width: 940
    height: 680
    visible: true
    title: qsTr("Hello World")
    color: "#103e6f"


    Item {
        id: home
        anchors.fill: parent

        MyTreeView {
            id: treeView
            anchors.fill: parent
        }
    }



    Component.onCompleted: {
        var data = JSON.parse('[{
                "id": -1,
                "name": "目录",
                "subnodes": [{
                    "id": 0,
                    "name": "第一本书",
                    "subnodes": [{
                        "id": 1,
                        "name": "第一章",
                        "subnodes": [{
                            "id": 2,
                            "name": "第一节",
                            "subnodes": []
                        }, {
                            "id": 3,
                            "name": "第二节",
                            "subnodes": []
                        }]
                    }, {
                        "id": 4,
                        "name": "第二章",
                        "subnodes": [{
                            "id": 5,
                            "name": "第一节",
                            "subnodes": []
                        }, {
                            "id": 6,
                            "name": "第二节",
                            "subnodes": []
                        }, {
                            "id": 7,
                            "name": "第三节",
                            "subnodes": []
                        }]
                    }]
                }, {
                    "id": 8,
                    "name": "第二本书",
                    "subnodes": [{
                        "id": 9,
                        "name": "第一章",
                        "subnodes": [{
                            "id": 10,
                            "name": "第一节",
                            "subnodes": []
                        }, {
                            "id": 11,
                            "name": "第二节",
                            "subnodes": []
                        }]
                    }, {
                        "id": 12,
                        "name": "第二章",
                        "subnodes": [{
                            "id": 13,
                            "name": "第一节",
                            "subnodes": []
                        }]
                    }]
                }]
            }]')
        treeView.model = data
    }

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1987227.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

尚硅谷谷粒商城项目笔记——四、使用docker安装redis【电脑CPU:AMD】

四、使用docker安装redis 注意&#xff1a; 因为电脑是AMD芯片&#xff0c;自己知识储备不够&#xff0c;无法保证和课程中用到的环境一样&#xff0c;所以环境都是自己根据适应硬件软件环境重新配置的&#xff0c;这里的虚拟机使用的是VMware。 在解决了 Docker 安装的问题之…

app逆向抓包技巧:SSL Pinning检测绕过

本篇博客旨在记录学习过程&#xff0c;不可用于商用等其它途径 场景 在charles抓包下&#xff0c;某斑马app在注册时发现点击登录毫无反应&#xff0c;看抓包结果提示SSL handshake with client failed&#xff0c;确定是触发了SSL/TLS Pinning&#xff08;证书锁定&#xff…

Flutter 正在迁移到 Swift Package Manager ,未来会弃用 CocoaPods 吗?

什么是 Swift Package Manager &#xff1f;其实 Swift Package Manager (SwiftPM) 出现已经挺长一段时间了&#xff0c;我记得第一次听说 SwiftPM 的时候&#xff0c;应该还是在 2016 年&#xff0c;那时候 Swift 3 刚发布&#xff0c;不过正式出场应该还是在 2018 年的 Apple…

【研发日记】嵌入式处理器技能解锁(二)——TI C2000 DSP的SCI(串口)通信

文章目录 前言 背景介绍 SCI通信 Transmitter Receiver SCI中断 分析和应用 总结 参考资料 前言 见《【研发日记】嵌入式处理器技能解锁(一)——多任务异步执行调度的三种方法》 背景介绍 近期使用TI C2000 DSP做的一个嵌入式系统开发项目中&#xff0c;在使用它的SCI&…

缓存异常:缓存雪崩、击穿、穿透

缓存异常&#xff1a;缓存雪崩、击穿、穿透 缓存雪崩 定义 大量的应用请求无法在 Redis 缓存中进行处理&#xff0c;会将这些请求发送到数据库&#xff0c;导致数据库的压力激增&#xff0c;是发生在大量数据同时失效的场景下 原因 1. 缓存中有大量数据同时过期&#xff0…

常见中间件漏洞复现之【Apache】!

CVE-2021-41773 Apache HTTP Server 路径穿越漏洞 漏洞简介 该漏洞是由于Apache HTTP Server 2.4.49版本存在⽬录穿越漏洞,在路径穿越⽬录 <Directory/>Require all granted</Directory>允许被访问的的情况下&#xff08;默认开启&#xff09;&#xff0c;攻击者…

【机器人学】6-4.六自由度机器人运动学参数辨识-机器人精度验证【附MATLAB代码】

前言 前两个章节以及完成了机器人参数辨识。 【机器人学】6-1.六自由度机器人运动学参数辨识-辨识数学模型的建立 【机器人学】6-2.六自由度机器人运动学参数辨识-优化方法求解辨识参数 标定了工具端、基座以及机器人本身的DH参数。那么我们的机器人精度如何呢&#xff1f;机…

实操: 如何在AirBox上跑Stable Diffusion 3

以下文章来源于Radxa &#xff0c;作者瑞莎 Stable Diffusion 3 Medium 是一种多模态扩散变换器 (MMDiT) 文本到图像模型&#xff0c;在图像质量、排版、复杂提示理解和资源效率方面具有显著提升的性能。 目前瑞莎团队使用 Stable Diffusion 3 Medium 开源模型&#xff0c;通过…

领域驱动设计实战:使用Wow框架重构银行转账系统

银行账户转账案例是一个经典的领域驱动设计&#xff08;DDD&#xff09;应用场景。 接下来我们通过一个简单的银行账户转账案例&#xff0c;来了解如何使用 Wow 进行领域驱动设计以及服务开发。 银行转账流程 准备转账&#xff08;Prepare&#xff09;&#xff1a; 用户发起…

24/8/6算法笔记 不同核函数

import numpy as np from sklearn import datasets from sklearn.svm import SVC from sklearn.model_selection import train_test_split from sklearn.metrics import accuracy_score import matplotlib.pyplot as plt 加载数据 X,ydatasets.load_wine(return_X_y True) d…

python中的turtle库(适用于计算机二级)

窗体函数 turtle.setup(width,height,startx,starty) width:窗口宽度 height:窗口高度 startx&#xff1a;窗口与屏幕左侧的距离 starty&#xff1a;窗口与屏幕顶部的距离 常用的引进turtle方法 # 引入turtle import turtle# 引入turtle库中的所有函数 from turtle import *# …

如何使用AI提问提示词(Prompt):让你的提问回答更有效

现在AI模型在日常工作和生活中的应用越来越广泛&#xff0c;无论是生成文本、回答问题&#xff0c;还是进行对话互动&#xff0c;提示词&#xff08;Prompt&#xff09;在与AI交互时起着至关重要的作用&#xff0c;一个好的提示词可以引导AI生成更加准确、有价值的内容。 那么…

【简历】宜春某二本学院:Java简历指导,秋招简历通过率低

简历说明 这是一个25届的二本宜春某学院的这个Java简历&#xff0c;今天看了两个简历&#xff0c;包括前面个985的&#xff0c;也是12306&#xff0c;这个12306已经烂大街&#xff0c;是个人都知道这个项目了&#xff0c;所以不要放在简历上&#xff0c;你不管大厂中厂还是小公…

力扣——11.盛最多水的容器

题目 暴力解 思路&#xff1a; 遍历每一个可能组成的容器&#xff0c;然后计算比较最大值。 代码&#xff1a; int maxArea(vector<int>& height) {int z1 0, z2 0;int len height.size();int val 0;for (z1; z1 < len - 1; z1) {for (z2 z1 1; z2 < l…

5分钟0基础快速上手亚马逊云科技AWS核心云开发/云架构知识 - 利用S3桶托管网页静态资源

简介&#xff1a; 小李哥从今天开始将开启全新亚马逊云科技AWS云计算知识学习系列&#xff0c;适用于任何无云计算或者亚马逊云科技技术背景的开发者&#xff0c;让大家0基础5分钟通过这篇文章就能完全学会亚马逊云科技一个经典的服务开发架构。 我将每天介绍一个基于亚马逊云…

Day-16 SpringBoot原理

SpingBoot原理 在前面十多天的课程当中&#xff0c;我们学习的都是web开发的技术使用&#xff0c;都是面向应用层面的&#xff0c;我们学会了怎么样去用。而我们今天所要学习的是web后端开发的最后一个篇章springboot原理篇&#xff0c;主要偏向于底层原理。 我们今天的课程安…

AppBoot:像 Django 一样使用 FastAPI

App Boot 开发 AppBoot 的背景是我一直没能寻找到满意的 FastAPI 项目模板。相比之下&#xff0c;Django 的项目结构和开发方式一直深得我心&#xff0c;因此我决定创建一个类似 Django 的 FastAPI 项目模板。 AppBoot 完全采用异步模式&#xff0c;内置 SQLAlchemy 2.0&…

Debian | Vscode 安装与配置 C 环境

Debian | Vscode 安装与配置 C 环境 安装 vscode sudo apt update sudo apt install software-properties-common apt-transport-https curlcurl -sSL https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -sudo add-apt-repository "deb [archamd64…

Golang | Leetcode Golang题解之第327题区间和的个数

题目&#xff1a; 题解&#xff1a; import "math/rand" // 默认导入的 rand 不是这个库&#xff0c;需要显式指明type node struct {ch [2]*nodepriority intkey intdupCnt intsz int }func (o *node) cmp(b int) int {switch {case b < o.k…

独家探讨BIGO ads投放海外休闲游戏广告优势

在探讨BIGO投放海外休闲游戏广告的优势时&#xff0c;不得不提的是其全球化的战略布局与强大的技术支撑。BIGO作为深耕海外市场的先行者&#xff0c;已经构建了覆盖全球多个国家和地区的用户网络&#xff0c;这为休闲游戏广告的广泛传播提供了得天独厚的条件。通过精准定位不同…