第QML中動態(tài)與靜態(tài)模型應(yīng)用詳解目錄前言靜態(tài)模型動態(tài)模型

前言

對于開發(fā)用戶界面，最重要的就是保持?jǐn)?shù)據(jù)與UI分離。數(shù)據(jù)通常被稱為為model，可視化處理稱作view。在QML中，model與view都通過delegate連接起來。功能劃分如下，model提供數(shù)據(jù)，對于每個(gè)數(shù)據(jù)項(xiàng)，可能有很多個(gè)值。顯示在view(視圖)中的每項(xiàng)數(shù)據(jù)，都是通過delegate(代理)來實(shí)現(xiàn)可視化的。view(視圖)的任務(wù)是排列這些delegate(代理),每個(gè)delegate(代理)將modelitem(模型項(xiàng))的值呈現(xiàn)給用戶。

一個(gè)模型可以是一個(gè)整數(shù)，提供給代理使用的索引值(index).如果JavaScript數(shù)組被作為一個(gè)模型，模型數(shù)據(jù)變量(modelData)代表了數(shù)組的數(shù)據(jù)的當(dāng)前索引。對于更加復(fù)雜的情況，每個(gè)數(shù)據(jù)項(xiàng)需要提供多個(gè)值，可以使用ListModel與ListElement。

對于靜態(tài)模型，一個(gè)Repeater可以被用作視圖。它可以非常方便的使用行(Row),列(Column),柵格(Grid),或者流(Flow)來創(chuàng)建用戶界面。對于動態(tài)或者更大的數(shù)據(jù)模型，使用ListView或者GridView更加合適。它們會在需要時(shí)動態(tài)的創(chuàng)建代理，減少在場景下一次顯示的元素的數(shù)量。

在視圖中的代理可以與數(shù)據(jù)模型中的屬性靜態(tài)綁定或者動態(tài)綁定。使用onAdd與onRemove信號，可以動態(tài)的播放他們的添加和移除的特效。

靜態(tài)模型

通過Repeater來作視圖，用來創(chuàng)建一些靜態(tài)的顯示界面。

importQtQuick2.12

importQtQuick.Window2.12

Window{

visible:true

width:640

height:480

title:qsTr("靜態(tài)模型")

//靜態(tài)顯示單一的數(shù)據(jù)模型

Column{

id:column1

spacing:10

Repeater{

model:4

Rectangle{

width:300

height:40

radius:3

color:"lightBlue"

Text{

anchors.centerIn:parent

text:index

//靜態(tài)顯示列表數(shù)據(jù)模型

Column{

id:column2

anchors.top:column1.bottom

anchors.topMargin:10

spacing:10

Repeater{

model:["Enterpris","Colombia","Challenger","Discover"]

Rectangle{

width:300

height:40

radius:3

color:"lightBlue"

Text{

anchors.centerIn:parent

text:index+":"+modelData

//使用多元素的ListModel

Row{

id:listModelItem

anchors.top:column2.bottom

anchors.topMargin:10

spacing:10

Repeater{

model:ListModel{

ListElement{name:"項(xiàng)目1";surfaceColor:"gray";}

ListElement{name:"項(xiàng)目2";surfaceColor:"orange";}

ListElement{name:"項(xiàng)目3";surfaceColor:"red";}

Rectangle{

width:150

height:40

radius:3

color:"lightBlue"

Text{

anchors.left:circleItem.right

anchors.leftMargin:10

anchors.centerIn:parent

text:name

Rectangle{

id:circleItem

anchors.left:parent.left

anchors.verticalCenter:parent.verticalCenter

anchors.leftMargin:4

width:32

height:32

radius:16

border.color:"black"

border.width:2

color:surfaceColor

Row{

spacing:5

anchors.top:listModelItem.bottom

anchors.topMargin:10

Repeater{

model:4

delegate:Rectangle{

width:150

height:40

radius:3

color:"lightBlue"

Text{

anchors.centerIn:parent

text:index

}

顯示效果如下圖所示:

動態(tài)模型

Repeator元素適合有限的靜態(tài)元素，但是真正使用的時(shí)候，模型通常更加復(fù)雜和龐大。QtQuick提供了ListView和GridView元素，這兩個(gè)都是基于Flickable區(qū)域的元素，因此用戶可以放入更大的數(shù)據(jù)。

importQtQuick2.12

importQtQuick.Window2.12

Window{

visible:true

width:640

height:480

title:qsTr("動態(tài)模型")

Rectangle{

id:rowView

width:80

height:300

color:"white"

ListView{

anchors.fill:parent

anchors.margins:20

//是否對邊界進(jìn)行裁剪

clip:true

model:5

delegate:numberDelegate

//列表顯示是水平還是垂直

orientation:ListView.Vertical

//focus:true

spacing:10

//頁眉和頁腳

header:headerComponent

footer:footerComponent

Component{

id:numberDelegate

//必須使用Item做為基本元素

Rectangle{

width:40

height:40

color:"lightGreen"

Text{

anchors.centerIn:parent

font.pixelSize:15

text:index

Component{

id:headerComponent

Rectangle{

width:40

height:20

color:"yellow"

Component{

id:footerComponent

Rectangle{

width:40

height:20

color:"yellow"

Rectangle{

id:gridView

width:240

height:300

color:"white"

anchors.left:rowView.right

GridView{

anchors.fill:parent

anchors.margins:20

//是否對邊界進(jìn)行裁剪

clip:true

model:100

delegate:gridDelegate

cellHeight:45

cellWidth:45

focus:true

Component{

id:gridDelegate

//必須使用Item做為基本元素

Rectangle{

width:40

height:40

color:GridView.isCurrentItem"Green":"lightGreen"

Text{

anchors.centerIn:parent

font.pixelSize:10

text:index

}

顯示效果如下圖所示:

有時(shí)候我們需要根據(jù)需要動態(tài)的向數(shù)據(jù)模型中添加或者刪除元素，這時(shí)候我們需要了解元素添加和移除的接口。為了方便使用，QML為每個(gè)視圖綁定了兩個(gè)信號，onAdd和onRemove.使用動畫連接它們，可以方便的創(chuàng)建識別哪些內(nèi)容被添加或刪除的動畫。

importQtQuick2.12

importQtQuick.Window2.12

Window{

visible:true

width:640

height:480

title:qsTr("動態(tài)添加和刪除元素")

Rectangle{

width:480

height:300

color:"white"

ListModel{

id:theModel

ListElement{number:0}

ListElement{number:1}

ListElement{number:2}

ListElement{number:3}

ListElement{number:4}

ListElement{number:5}

ListElement{number:6}

ListElement{number:7}

ListElement{number:8}

Rectangle{

anchors.left:parent.left

anchors.right:parent.right

anchors.bottom:parent.bottom

anchors.margins:20

height:40

color:"darkGreen"

Text{

anchors.centerIn:parent

text:"additem"

MouseArea{

anchors.fill:parent

onClicked:{

theModel.append({"number":++parent.count})

propertyintcount:9

GridView{

anchors.fill:parent

anchors.margins:20

anchors.bottomMargin:80

clip:true

model:theModel

cellWidth:45

cellHeight:45

delegate:numberDelegate

Component{

id:numberDelegate

Rectangle{

id:wrapper

width:40

height:40

color:"lightGreen"

Text{

anchors.centerIn:parent

font.pixelSize:10

text:number

MouseArea{

anchors.fill:parent

onClicked:{

if(!wrapper.GridView.delayRemove)

theModel.remove(index)

//模型元素移除時(shí)候的動畫

GridView.onRemove:SequentialAnimation{

PropertyAction{target:wrapper;property:"GridView.delayRemove";value:true}

NumberAnimation{target:wrapper;property:"scale";to:0;duration:250;easing.type:Easing.InOutQuad}

PropertyAction{target:wrapper;property:"GridView.delayRemove";value:false}

//模型元素添加的時(shí)候的動畫

GridView.onAdd:SequentialAnimation{

NumberAnimation{target:wrapper;property:"scale";from:0;to:1;duration:250;easing.type:Easing.InOutQuad}

}

顯示效果如下圖所示:

在使用鏈表時(shí)通常會使用當(dāng)前項(xiàng)激活時(shí)展開的機(jī)制。這個(gè)操作可以被用于動態(tài)的將當(dāng)前項(xiàng)目填充到整個(gè)屏幕來添加一個(gè)新的用戶界面，或者為鏈表中的當(dāng)前項(xiàng)提供更多的信息。

importQtQuick2.12

importQtQuick.Window2.12

Window{

visible:true

width:640

height:480

title:qsTr("動畫與數(shù)據(jù)模型組合使用")

Item{

width:300

height:480

Rectangle{

anchors.fill:parent

gradient:Gradient{

GradientStop{position:0.0;color:"#4a4a4a"}

GradientStop{position:1.0;color:"#2b2b2b"}

//視圖

ListView{

id:listView

anchors.fill:parent

delegate:detailsDelegate

model:planets

//數(shù)據(jù)模型

ListModel{

id:planets

ListElement{name:"Mercury";imageSource:"images/mercury.jpeg";facts:"MercuryisthesmallestplanetintheSolarSystem.Itistheclosestplanettothesun.ItmakesonetriparoundtheSunonceevery87.969days."}

ListElement{name:"Venus";imageSource:"images/venus.jpeg";facts:"VenusisthesecondplanetfromtheSun.Itisaterrestrialplanetbecauseithasasolid,rockysurface.TheotherterrestrialplanetsareMercury,EarthandMars.AstronomershaveknownVenusforthousandsofyears."}

ListElement{name:"Earth";imageSource:"images/earth.jpeg";facts:"TheEarthisthethirdplanetfromtheSun.ItisoneofthefourterrestrialplanetsinourSolarSystem.Thismeansmostofitsmassissolid.TheotherthreeareMercury,VenusandMars.TheEarthisalsocalledtheBluePlanet,'PlanetEarth',and'Terra'."}

ListElement{name:"Mars";imageSource:"images/mars.jpeg";facts:"MarsisthefourthplanetfromtheSunintheSolarSystem.Marsisdry,rockyandcold.ItishometothelargestvolcanointheSolarSystem.MarsisnamedafterthemythologicalRomangodofwarbecauseitisaredplanet,whichsignifiesthecolourofblood."}

//控件代理

Component{

id:detailsDelegate

Item{

id:wrapper

width:listView.width

height:30

Rectangle{

anchors.left:parent.left

anchors.right:parent.right

anchors.top:parent.top

height:30

color:"#333"

border.color:Qt.lighter(color,1.2)

Text{

anchors.left:parent.left

anchors.verticalCenter:parent.verticalCenter

anchors.leftMargin:4

font.pixelSize:parent.height-4

color:'#fff'

text:name

Rectangle{

id:image

width:26

height:26

anchors.right:parent.right

anchors.top:parent.top

anchors.rightMargin:2

anchors.topMargin:2

color:"black"

Image{

anchors.fill:parent

fillMode:Image.PreserveAspectFit

source:imageSource

MouseArea{

anchors.fill:parent

onClicked:parent.state="expanded"

Item{

id:factsView

anchors.top:image.bottom

anchors.left:parent.left

anchors.right:parent.right

anchors.bottom:parent.bottom

opacity:0

Rectangle{

anchors.fill:parent

gradient:Gradient{

GradientStop{position:0.0;color:"#fed958"}

GradientStop{position:1.0;color:"#fecc2f"}

border.color:'#000000'

border.width:2

Text{

anchors.fill:parent

anchors.margins:5

clip:true

wrapMode:Text.WordWrap