QML学习系列-模型和视图

gmcnoah

已于 2023-03-29 20:30:37 修改

阅读量217

点赞数 1

分类专栏： QML学习系列文章标签：学习 javascript html qt

于 2023-03-29 20:12:45 首次发布

本文链接：https://blog.csdn.net/gmcnoah/article/details/129844433

版权

QML学习系列专栏收录该内容

16 篇文章 11 订阅

订阅专栏

在 QML 中，模型和视图常常用于在用户界面中展示数据。模型是数据的抽象表示，而视图则是将数据呈现给用户的方式。从本质上讲，模型和视图是分离的，这使得 QML 可以更加灵活和易于扩展。

下面是一些 QML 中使用模型和视图的示例：

ListView

ListView 是一个可以用于展示列表数据的组件，它允许用户滚动和选择列表项。要在 ListView 中展示数据，我们需要使用一个模型来提供列表项。模型通常是一个 JavaScript 数组，每个数组元素都代表一个列表项。

以下是一个简单的使用 ListView 组件的示例：

ListView {
    width: 200
    height: 300
    model: [
        { name: "Alice", age: 26 },
        { name: "Bob", age: 30 },
        { name: "Charlie", age: 40 }
    ]
    delegate: Text {
        text: name + ", Age: " + age
    }
}

在上述示例中，我们使用了一个包含三个对象的数组作为模型。每个对象都包含了一个 name 属性和一个 age 属性。我们使用 delegate 属性来指定一个列表项的外观，这里我们使用了一个简单的文本控件来呈现每个对象的名称和年龄。

GridView

GridView 是一个可以用于展示数据网格的组件，它允许用户滚动和选择网格项。与 ListView 类似，要在 GridView 中展示数据，我们需要使用一个模型来提供网格项。模型仍然是一个 JavaScript 数组，每个数组元素仍然代表一个网格项。不同的是，我们需要为每个网格项指定 row 和 column 属性，这样 GridView 才能将这些项放置在正确的位置。

以下是一个简单的使用 GridView 组件的示例：

GridView {
    width: 200
    height: 300
    model: [
        { name: "Alice", age: 26, row: 0, column: 0 },
        { name: "Bob", age: 30, row: 0, column: 1 },
        { name: "Charlie", age: 40, row: 1, column: 0 }
    ]
    delegate: Text {
        text: name + ", Age: " + age
    }
}

在上述示例中，我们同样使用了一个包含三个对象的数组作为模型。每个对象仍然包含了一个 name 属性和一个 age 属性，不同的是还加入了 row 和 column 属性。在 delegate 中，我们同样使用了一个简单的文本控件来呈现每个对象的名称和年龄。

TableView

TableView 是一个可以用于展示表格数据的组件，它允许用户滚动和选择单元格。与 ListView 和 GridView 类似，要在 TableView 中展示数据，我们需要使用一个模型来提供单元格数据。但与前两者不同的是，模型通常是一个二维的 JavaScript 数组，每个数组元素代表表格中的一个单元格。

以下是一个简单的使用 TableView 组件的示例：

TableView {
    width: 200
    height: 300
    model: [
        [ "Alice", 26 ],
        [ "Bob", 30 ],
        [ "Charlie", 40 ]
    ]
    TableViewColumn {
        title: "Name"
        role: "name"
    }
    TableViewColumn {
        title: "Age"
        role: "age"
    }
}

在上述示例中，我们使用了一个包含三个数组的数组作为模型。每个数组代表表格中的一行，其中数组元素又代表这一行中的每个单元格。

我们使用 TableViewColumn 组件来指定每一列的标题和对应的数据角色。在这个例子中，我们指定了两个列，一个显示名称，一个显示年龄。每个列都有一个 title 属性用于显示列标题，以及一个 role 属性用于指定模型中对应的数据角色。