QML TreeView
时间: 2025-02-04 09:23:40 浏览: 49
### QML TreeView 组件概述
QML 的 `TreeView` 是用于显示分层数据结构的视图组件。此组件非常适合展示具有父子关系的数据集,如文件系统目录树或组织架构图表。
#### 基本属性和方法
- **model**: 定义要显示的数据模型。可以是简单的字符串列表、复杂对象数组或是自定义模型[^1]。
- **columns**: 设置列的数量以及每列的内容配置方式。
- **onCurrentIndexChanged**: 当前索引改变时触发事件处理函数。
- **selectionMode**: 控制选择模式(单选或多选)。
#### 使用示例
下面是一个简单例子来说明如何创建并填充一个基本的 `TreeView`:
```qml
import QtQuick 2.15
import Qt.labs.qmlmodels 1.0
ApplicationWindow {
visible: true
width: 640; height: 480
ListModel {
id: folderListModel
// 添加一些初始项作为根节点
ListElement { name: "Documents"; children: [] }
ListElement { name: "Pictures"; children: [
ListElement { name: "Summer Vacation" },
ListElement { name: "Family Photos" }]
}
}
TreeView {
anchors.fill: parent
model: folderListModel
TableViewColumn { role: "name"; title: "Name"; width: 200 }
delegate: ItemDelegate {
text: styleData.value.name
onClicked: {
console.log(styleData.row, ": ", styleData.value.name);
if (styleData.hasChildren && !expanded) {
expanded = true;
} else if (!styleData.parent.expanded){
expanded = false;
}
}
onExpandedChanged: {
if(expanded){
treeview.expand(styleData.indexPath)
}else{
treeview.collapse(styleData.indexPath)
}
}
}
}
}
```
这段代码展示了如何构建一个带有两层嵌套项目的 `TreeView` 实例,并设置了点击项目展开/折叠子级的功能。
阅读全文
相关推荐


















