QML中動(dòng)態(tài)與靜態(tài)模型應(yīng)用詳解

更新時(shí)間：2022年08月25日 10:40:46 作者：碼農(nóng)飛飛

QML是一種描述性的腳本語(yǔ)言，文件格式以.qml結(jié)尾。語(yǔ)法格式非常像CSS（參考后文具體例子），但又支持javascript形式的編程控制。QtDesigner可以設(shè)計(jì)出·ui界面文件，但是不支持和Qt原生C++代碼的交互

前言

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

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

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

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

靜態(tài)模型

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

import QtQuick 2.12
import QtQuick.Window 2.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
                }
            }
        }
    }
}

顯示效果如下圖所示:

動(dòng)態(tài)模型

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

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("動(dòng)態(tài)模型")
    Rectangle{
       id: rowView
       width: 80
       height: 300
       color: "white"
       ListView{
           anchors.fill: parent
           anchors.margins: 20
           //是否對(duì)邊界進(jìn)行裁剪
           clip: true
           model: 5
           delegate: numberDelegate
           //列表顯示是水平還是垂直
           orientation: ListView.Vertical
           //focus: true
           spacing: 10
           //頁(yè)眉和頁(yè)腳
           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
           //是否對(duì)邊界進(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ù)需要?jiǎng)討B(tài)的向數(shù)據(jù)模型中添加或者刪除元素，這時(shí)候我們需要了解元素添加和移除的接口。為了方便使用，QML為每個(gè)視圖綁定了兩個(gè)信號(hào)，onAdd和onRemove.使用動(dòng)畫(huà)連接它們，可以方便的創(chuàng)建識(shí)別哪些內(nèi)容被添加或刪除的動(dòng)畫(huà)。

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("動(dòng)態(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: "add item"
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    theModel.append({"number": ++parent.count})
                }
            }
            property int count: 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í)候的動(dòng)畫(huà)
                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í)候的動(dòng)畫(huà)
                GridView.onAdd: SequentialAnimation {
                    NumberAnimation { target: wrapper; property: "scale"; from: 0; to: 1; duration: 250; easing.type: Easing.InOutQuad }
                }
            }
        }
    }
}

顯示效果如下圖所示:

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

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("動(dòng)畫(huà)與數(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: "Mercury is the smallest planet in the Solar System. It is the closest planet to the sun. It makes one trip around the Sun once every 87.969 days." }
            ListElement { name: "Venus"; imageSource: "images/venus.jpeg"; facts: "Venus is the second planet from the Sun. It is a terrestrial planet because it has a solid, rocky surface. The other terrestrial planets are Mercury, Earth and Mars. Astronomers have known Venus for thousands of years." }
            ListElement { name: "Earth"; imageSource: "images/earth.jpeg"; facts: "The Earth is the third planet from the Sun. It is one of the four terrestrial planets in our Solar System. This means most of its mass is solid. The other three are Mercury, Venus and Mars. The Earth is also called the Blue Planet, 'Planet Earth', and 'Terra'." }
            ListElement { name: "Mars"; imageSource: "images/mars.jpeg"; facts: "Mars is the fourth planet from the Sun in the Solar System. Mars is dry, rocky and cold. It is home to the largest volcano in the Solar System. Mars is named after the mythological Roman god of war because it is a red planet, which signifies the colour of blood." }
        }
        //控件代理
        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
                            color: '#1f1f21'
                            font.pixelSize: 12
                            text: facts
                        }
                    }
                }
                Rectangle {
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.rightMargin: 2
                    anchors.topMargin: 2
                    width: 26
                    height: 26
                    color: "#157efb"
                    border.color: Qt.lighter(color, 1.1)
                    opacity: 0
                    MouseArea {
                        anchors.fill: parent
                        onClicked: wrapper.state = ""
                    }
                }
                //通過(guò)狀態(tài)切換來(lái)更改界面控件的狀態(tài)
                states: [
                    State {
                        name: "expanded"
                        PropertyChanges { target: wrapper; height: listView.height }
                        PropertyChanges { target: image; width: listView.width; height: listView.width; anchors.rightMargin: 0; anchors.topMargin: 30 }
                        PropertyChanges { target: factsView; opacity: 1 }
                        PropertyChanges { target: closeButton; opacity: 1 }
                        PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false }
                    }
                ]
                transitions: [
                    Transition {
                        NumberAnimation {
                            duration: 200;
                            properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"
                        }
                    }
                ]
            }
        }
    }
}

顯示效果如下圖所示: