v-play 初次使用



  • 好久没有看博文了,今天花点时间看了一下v-play,发现他使用很方便,就简单做一个二级列表测试下:
    ![alt text](0_1460205566607_upload-54400ef8-864f-439d-838c-e8249b48087f image url),
    效果很好,部署在手机上效果也是很好!
    附上代码:

    
    import QtQuick 2.0
    import VPlayApps 1.0
    import QtQuick.Controls 1.4
    
    Page{
        id:root
    
        property var missionModel:[
            {
                domTitle:"today missons",
                domModel:todayMissonListModel
            },
            {
                domTitle:"tomorrow missons",
                domModel:tomorrowMissonListModel
            },
            {
                domTitle:"becoming missons",
                domModel:becommingMissonListModel
            }
        ]
    
        ListModel{
            id:todayMissonListModel
        }
        ListModel{
            id:tomorrowMissonListModel
        }
        ListModel{
            id:becommingMissonListModel
        }
    
    
        Component.onCompleted: {
            for(var a=0;a<5;a++){
                todayMissonListModel.append(
                            {
                                mission:"mission"+a,
                                time:new Date(),
                                members:["aa","bb","cc"],
                                endTime:new Date(),
                                subMisson:[{submission:"sub1"},{submission:"sub2"},{submission:"sub3"},{submission:"sub4"}],
                                tags:["tag1,tag2,tag3"],
                                descriptions:"this is a mission simple"
                            }
                            );
            }
    
            for(var a=0;a<5;a++){
                tomorrowMissonListModel.append(
                            {
                                mission:"mission"+a,
                                time:new Date(),
                                members:["aa","bb","cc"],
                                endTime:new Date(),
                                subMisson:[{submission:"sub1"},{submission:"sub2"},{submission:"sub3"},{submission:"sub4"}],
                                tags:["tag1,tag2,tag3"],
                                descriptions:"this is a mission simple"
                            }
                            );
            }
    
            for(var a=0;a<5;a++){
                becommingMissonListModel.append(
                            {
                                mission:"mission"+a,
                                time:new Date(),
                                members:["aa","bb","cc"],
                                endTime:new Date(),
                                subMisson:[{submission:"sub1"},{submission:"sub2"},{submission:"sub3"},{submission:"sub4"}],
                                tags:["tag1,tag2,tag3"],
                                descriptions:"this is a mission simple"
                            }
                            );
            }
        }
    
    
        //misson list
        ListView{
            id:mistionListView
            anchors.fill: parent
            model: missionModel
            width: screenWidth
            height:screenHeight-dp(80)
            y:15
            clip: true
    
            delegate: Item{
                id:expandableItem
                width: screenWidth
                height:itemCol.height
    
    
                //items col
                Column{
                    id:itemCol
                    width: parent.width
    
                    //title
                    Item{
                        id:textItem
                        width: parent.width
                        height: dp(60)
                        Rectangle{
                            width: dp(2)
                            height: parent.height/2
                            anchors.verticalCenter: parent.verticalCenter
                            color: Theme.colors.tintColor
                            x:dp(40)
                        }
    
                        AppText{
                            text:modelData.domTitle
                            font.pointSize: 20
                            color:"#12ccaa"
                            anchors.verticalCenter: parent.verticalCenter
                            x:dp(45)
                        }
    
                        //add bnt
                        IconButton{
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.right: parent.right
                            anchors.rightMargin: dp(15)
                            icon:IconType.plus
                        }
                    }
    
                    //expandableContent
                    Repeater{
                        model: modelData.domModel
                        delegate: Item {
                            id: missionItem
                            width: screenWidth
                            height:missionCol.height
    
                            Column{
                                width:parent.width
                                id:missionCol
                                property bool showSub:false
    
                                //misson
                                Item{
                                    width: screenWidth
                                    height: dp(60)
    
                                    //feed back
                                    AppButton{
                                        width: parent.width
                                        height: parent.height-1
                                        flat:true
                                        backgroundColor: "#aaaaaa"
                                        onClicked: {
                                            missionCol.showSub=missionCol.showSub?false:true
                                        }
    
                                        //mission name
                                        Column{
                                            anchors.verticalCenter: parent.verticalCenter
                                            x:dp(45)
                                            AppText{
                                                text:mission
                                                color:"#202020"
                                            }
                                            AppText{
                                                text:new Date().getHours()+":"+new Date().getMinutes()
                                                color:"#999999"
                                                font.pointSize: 5
                                            }
                                        }
                                    }
    
                                    //edit indicator
                                    Row{
                                        anchors.verticalCenter: parent.verticalCenter
                                        visible: missionCol.showSub
                                        anchors.right: parent.right
                                        anchors.rightMargin: dp(10)
                                        spacing: dp(10)
                                        IconButton{
                                            icon:IconType.edit
                                        }
                                        IconButton{
                                            icon:IconType.checkcircle
                                        }
                                    }
                                }
    
                                //sub missions
                                Item{
                                    id:subMissons
                                    width: screenWidth
                                    height:missionCol.showSub?subMissonsCol.height:0
                                    clip:true
                                    Behavior on height{
                                        PropertyAnimation{
                                            properties:"height"
                                            duration: 200
                                            easing.type: Easing.OutQuad
                                        }
                                    }
    
                                    Column{
                                        id:subMissonsCol
                                        Repeater{
                                            model:subMisson
                                            delegate: Item{
                                                width: screenWidth
                                                height: dp(30)
                                                AppText{
                                                    text:String(submission)
                                                    anchors.verticalCenter: parent.verticalCenter
                                                    x:dp(60)
                                                    color:"#606060"
                                                }
                                            }
                                        }
                                    }
                                }
    
                                //options
                                Rectangle{
                                    color:"#fafafa"
                                    width: parent.width
                                    height:missionCol.showSub?dp(40):0
                                    clip:true
                                    Behavior on height{
                                        PropertyAnimation{
                                            properties: "height"
                                            duration: 200
                                        }
                                    }
    
                                    Row{
                                        anchors.centerIn: parent
                                        spacing: (parent.width-discription.width*4-dp(20))/3
                                        IconButton{
                                            id:discription
                                            icon:IconType.bars
                                        }
                                        IconButton{
                                            id:clock
                                            icon:IconType.clocko
                                        }
                                        IconButton{
                                            id:members
                                            icon:IconType.users
                                        }
                                        IconButton{
                                            id:tags
                                            icon:IconType.tags
                                        }
                                    }
                                }
                            }
                            //line
                            Rectangle{
                                width: parent.width
                                height: dp(1)
                                color:missionCol.showSub?Theme.colors.tintColor:"#0a000000"
                                anchors.bottom: parent.bottom
                            }
    
                        }
    
                    }
    
                }
    
            }
        }
    }
    


  • @tommego 啪啪啪啪啪



  • @tommego 好好好


 

走马观花

最近的回复

关注我们

微博
QQ群











召唤伊斯特瓦尔