qml使用tableview的简单例子
时间: 2023-09-28 19:07:22 浏览: 139
QML TableView Demo演示示例
5星 · 资源好评率100%
好的,以下是一个简单的 QML TableView 的例子:
```qml
TableView {
width: 400
height: 200
TableViewColumn {
title: "Name"
width: 100
property string name: ""
delegate: Text {
text: name
font.bold: true
font.pointSize: 14
}
}
TableViewColumn {
title: "Age"
width: 100
property int age: 0
delegate: Text {
text: age
font.pointSize: 14
}
}
model: ListModel {
ListElement { name: "John"; age: 30 }
ListElement { name: "Jane"; age: 25 }
ListElement { name: "Bob"; age: 40 }
}
}
```
这个例子展示了如何在 TableView 中使用两个 TableViewColumn 来展示数据。
通过设置 model 属性为 ListModel,我们可以通过添加 ListElement 在 JavaScript 中添加数据到 TableView 中。
每个 TableViewColumn 有一个 title 属性来设置列标题,以及一个 delegate 属性来确定列中数据的展示方式。在这个例子中,我们将 delegate 设置为一个 Text 组件,通过设置其 text 属性来展示数据。
希望这个例子能帮助回答你的问题!
阅读全文