• 6290阅读
  • 3回复

【开源】玩转QML MVC设计模式应对变化如此简单 [复制链接]

上一主题 下一主题
离线itlevup
 

图酷模式  只看楼主 倒序阅读 楼主  发表于: 2018-01-15
这一期,和大家简单介绍一下QML里面的MVC设计(Model-View-Controller的缩写,UI设计常用的一种设计模式)。


先放实例demo,过过眼瘾(请忽略美工。。)



实现了2个不同的View,2个不同的Model,2个长的不一样的Delegate。
点击按钮【换Model】可以切换不同的数据,点击【换Delegate】可以切换数据的显示方式。
什么是Delegate呢?简要来说,就是数据长什么样子。如下图,Qt的MVC构成图。





废话不多说,直接上源码:

import QtQuick 2.2


Rectangle {

    id: root

    width: 500

    height: 300

    color: "lightblue"


    property var currentDelegate: delegate1

    property var currentModel: model1


    //二组Model

    ListModel {

       id: model1

       ListElement {

           name: "张一"

           score: "80"

       }

       ListElement {

           name: "张二"

           score: "90"

       }

       ListElement {

           name: "张三"

           score: "100"

       }

    }


    ListModel {

       id: model2

       ListElement {

           name: "王一"

           score: "81"

       }

       ListElement {

           name: "王二"

           score: "91"

       }

       ListElement {

           name: "王三"

           score: "100"

       }

       ListElement {

           name: "王四"

           score: "0"

       }

    }


    //二个Delegate

    Component {

       id: delegate1

       Rectangle {

           width: 150; height: 30

           color: "yellow"

           opacity: 0.3 + 0.7 / currentModel.count * index

           Column {

                Text {

                    text: "姓名" + ":" + name

                }


                Text {

                    text: "成绩" + ":" + score

                }

           }

       }

    }

    Component {

       id: delegate2

       Rectangle {

           width: 150; height: 30

           color: "red"

           opacity: 0.3 + 0.7 / currentModel.count * index

           Image {

                id: circle

                anchors.verticalCenter: parent.verticalCenter

                width: 20

                height: 20

                source: "image/users.png"

           }


           Text {

                anchors.left: circle.right

                anchors.leftMargin: 10

                anchors.verticalCenter: parent.verticalCenter

                text: name + " " + score + "分"

           }

       }

    }


    //二个View

    Column {

       spacing: 10

       Text {text: "View1"}

       Row {

           id: view1

            Repeater {

                model: currentModel

                delegate: currentDelegate

           }

       }


       Text {text: "View2"}

       Item {

           id: view2

           width: 150

           height: 90


           ListView {

                anchors.fill: parent

                model: currentModel

                delegate: currentDelegate

                clip: true

           }

       }

    }


    // 换Model/Delegate 按钮

    Row  {

       anchors.bottom: parent.bottom

        anchors.bottomMargin: 30

       anchors.horizontalCenter: parent.horizontalCenter

       spacing: 40


       Rectangle {

           id: changeModel

           width: 100

           height: 50

           color: "#FFC915"

           opacity: mouse1.pressed ? 0.6 : 1

           radius: 10

           MouseArea {

                id: mouse1

                anchors.fill: parent

                onClicked: {

                    if (currentModel === model1)

                        currentModel = model2

                    else

                        currentModel = model1

                }

           }


           Text {

                anchors.centerIn: parent

                text: "换Model"

           }

       }


       Rectangle {

           id: changeDelegate

           width: 100

           height: 50

           color: "#FFC915"

           opacity: mouse2.pressed ? 0.6 : 1

           radius: 10

           MouseArea {

                id: mouse2

                anchors.fill: parent

                onClicked: {

                    if (currentDelegate === delegate1)

                        currentDelegate = delegate2

                    else

                        currentDelegate = delegate1

                }

           }


           Text {

                anchors.centerIn: parent

                text: "换Delegate"

           }

       }

    }

}




这种MVC框架是不是用起来非常舒服,使用得当的话,一定会帮你完成扩展性强的设计。


如果你对QML感兴趣,那么动起手来,跟着大咖一起玩转QML吧!


更多知识分享,免费课程等,请关注公众号。



离线xzp21st

只看该作者 1楼 发表于: 2018-01-15
图挂了
离线uidab

只看该作者 2楼 发表于: 2018-01-15
回 xzp21st 的帖子
xzp21st:图挂了 (2018-01-15 13:10) 

是的,把图处理一下吧。

很高兴你能分享这些。
有时候为了工作直接获得答案,而我却失去了思考的乐趣!


飘啊飘,何时能安居!
离线itlevup

只看该作者 3楼 发表于: 2018-01-15
回 xzp21st 的帖子
xzp21st:图挂了 (2018-01-15 13:10) 

谢谢提醒,已更新
快速回复
限100 字节
 
上一个 下一个