前言

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

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

基礎(chǔ)模型

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

舉個簡單的例子，下面的例子中，一個repeater元素創(chuàng)建了10個子項，子項的數(shù)量由model屬性控制。對于每個子項Rectangle包含了一個Text元素，你可以將text屬性設(shè)置為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 } } } }}

運行效果如下：

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

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 } } } }}

運行效果如下：

將數(shù)據(jù)暴露成一組序列，你可以通過標號迅速的找到你需要的信息。這是一個最簡單的模型，也是經(jīng)常會用到的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創(chuàng)建的每個Rectangle和Text項引用。這不僅可以方便的訪問數(shù)據(jù)，也可以使源代碼更加容易閱讀。surfaceColor是名字左邊的圓的顏色。

repeater內(nèi)容的每個子項實例化時綁定了默認的代理。這意味著上面第一個例子中的代碼和下面的代碼是相同的。注意，唯一不同的是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 } } } }}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。