前言

對于開發用戶界面，最重要的一方面是保持數據與可視化的分離。例如，一個電話簿可以使用一個垂直文本鏈表排列或者使用一個網格聯系人圖片排列。在這兩種情況中，數據都是相同的，但是可視化效果卻是不同的。這種方法通常被稱作模型-視圖模式。在這種模式中，數據通常被稱作模型，可視化處理稱作視圖。

在QtQuick中，數據通過模型-視圖分離。對于每個視圖，每個數據元素的可視化都分給一個代理。QtQuick附帶了一組預定義的模型與視圖。想要使用這個系統，必須理解這些類，并且知道如何創建合適的代理來獲得正確的顯示和交互。

基礎模型

最基礎的分離數據與顯示的方法是使用Repeater元素。它被用于實例化一組元素項，并且很容易與一個用于填充用戶界面的定位器相結合。

舉個簡單的例子，下面的例子中，一個repeater元素創建了10個子項，子項的數量由model屬性控制。對于每個子項Rectangle包含了一個Text元素，你可以將text屬性設置為index的值，因此可以看到子項的編號是0~9。

import QtQuick 2.3import QtQuick.Window 2.2Window { id: root visible: true width: 640 height: 480 Column { spacing: 2 Repeater { model: 10 Rectangle { width: 100 height: 40 radius: 3 color: "lightblue" Text { anchors.centerIn: parent text: index } } } }}

運行效果如下：

上面的示例是一個不錯的編號列表，有時我們想顯示一些更復雜的數據的話，使用一個JavaScript序列來替換整型變量model的值可以達到我們的目的。序列可以使用任何類型的內容，可以是字符串，整數，或者對象。在下面的例子中，使用了一個字符串鏈表。我們仍然使用index的值作為變量，并且我們也訪問modelData中包含的每個元素的數據。

import QtQuick 2.3import QtQuick.Window 2.2Window { id: root visible: true width: 640 height: 480 Column { spacing: 2 Repeater { model: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"] Rectangle { width: 100 height: 40 radius: 3 color: "lightblue" Text { anchors.centerIn: parent text: index + ":" + modelData } } } }}

運行效果如下：

將數據暴露成一組序列，你可以通過標號迅速的找到你需要的信息。這是一個最簡單的模型，也是經常會用到的ListModel(l鏈表模型)。一個鏈表模型由許多ListElement(鏈表元素)組成。在每個鏈表元素中，可以綁定值在屬性上。例如在下面這個例子中，每個元素都提供了一個名字和一個顏色。

import QtQuick 2.3import QtQuick.Window 2.2Window { id: root visible: true width: 640 height: 480 Column { spacing: 2 Repeater { model: ListModel { ListElement { name: "水星"; surfaceColor: "gray" } ListElement { name: "金星"; surfaceColor: "yellow" } ListElement { name: "地星"; surfaceColor: "blue" } ListElement { name: "火星"; surfaceColor: "orange" } ListElement { name: "木星"; surfaceColor: "orange" } ListElement { name: "土星"; surfaceColor: "yellow" } ListElement { name: "天星"; surfaceColor: "lightblue" } ListElement { name: "海王星"; surfaceColor: "lightblue" } } Rectangle { width: 100 height: 40 radius: 3 color: "lightblue" Text { anchors.centerIn: parent text: name } Rectangle { anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter anchors.leftMargin: 2 width: 16 height: 16 radius: 8 border.color: "black" border.width: 1 color: surfaceColor } } } }}

運行效果如下：

上面的例子中，每個元素的屬性綁定連接到repeater實例化的子項上。這意味著變量name和surfaceColor可以被repeater創建的每個Rectangle和Text項引用。這不僅可以方便的訪問數據，也可以使源代碼更加容易閱讀。surfaceColor是名字左邊的圓的顏色。

repeater內容的每個子項實例化時綁定了默認的代理。這意味著上面第一個例子中的代碼和下面的代碼是相同的。注意，唯一不同的是delegate屬性名，我們將會在后面詳細講解。

import QtQuick 2.3import QtQuick.Window 2.2Window { id: root visible: true width: 640 height: 480 Column { spacing: 2 Repeater { model: 10 delegate: Rectangle { width: 100 height: 40 radius: 3 color: "lightblue" Text { anchors.centerIn: parent text: index } } } }}

總結

以上是生活随笔為你收集整理的cmenu 隐藏子项中的一个子项_QML中的模型-视图-代理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。