QML Model-View 实战

本例实现一个神奇宝贝展示台,用户可以点击神奇宝贝头像,来展示神奇宝贝信息，也可以实现点击头像恢复之前状态(没有实现)，如果要实现这种情况需要另定义一种状态来取消之前的锚点,不然会出现错误

先来看看效果图

点击图像后

上代码:

import QtQuick 2.7

Rectangle {
    width:500;
    height:500;
    ListModel {
        id:listModel;
        ListElement {
            name:"蓝炎鸟";
            src:"./images/brid.png";
            intro:"鸟神奇宝贝,呆呆的娇小外表却隐藏着巨大的能量,释放的蓝色火焰可以燃烧一切";
        }
        ListElement {
            name:"恶岩犬";
            src:"./images/bulldog.png";
            intro:"恶神奇宝贝,一般具有自己的领地,如果被人类打扰,将会毫不留情的攻击";
        }
        ListElement {
            name:"呆呆娃";
            src:"./images/frog.png";
            intro:"水神奇宝贝,喜欢独自发呆,受到惊扰,能够以火箭的速度逃离";
        }
        ListElement {
            name:"幽水母";
            src:"./images/jellyfish.png";
            intro:"幽灵神奇宝贝,水母的外表常常被误认为是水神奇宝贝,然而谁也没见过它真实的外表"
        }
    }


    ListView {
        id:listView;
        anchors.fill:parent;
        anchors.margins:70;
        spacing:3;
        clip:true;
        model:listModel;
        delegate:pokemon;
        focus:true;
    }

    Component {
        id:pokemon;
        Rectangle {
            id:wrapper;
            width:listView.width;
            height:60;
            color:"#838B83";
            Item {
                id:nameid;
                width:50;
                height:nameself.height;
                Text {
                    id:nameself;
                    anchors.left:parent.left;
                    anchors.leftMargin:10;
                    text:name;
                    color:"#F0FFF0";
                }
            }
            Item {
                id:imageid;
                width:80;
                anchors.top:parent.top;
                anchors.topMargin:10;
                anchors.bottom:parent.bottom;
                anchors.bottomMargin:10;
                anchors.right:parent.right;
                anchors.rightMargin:10;
                clip:true;
                anchors.left:undefined;
                Image {
                    anchors.fill:parent;
                    source:src;
                    fillMode:Image.PreserveAspectFit;
                }
                MouseArea {
                    anchors.fill:parent;
                    onClicked:function () {
                        wrapper.state = "expanded";
                    //  wrapper.state = (wrapper.state == "expanded" ? " " :"expanded");
                    }
                }
            }
            Item {
                id:introduceid;
                visible:false;
                property alias text:introtextid.text;
                anchors.right:wrapper.right;
                anchors.rightMargin:5;
                height:60;
                Text {
                    id:introtextid;
                    text:"";
                    anchors.fill:parent;
                    wrapMode:Text.WordWrap;
                    clip:false;
                    maximumLineCount:3;
                }
            }
            states:[
                State {
                    name:"expanded";
                    PropertyChanges {
                        target:wrapper;
                        height:140;
                    }
                    PropertyChanges {
                        target:imageid;
                        anchors.left:nameid.left;
                        anchors.leftMargin:10;
                        anchors.top:nameid.bottom;
                        anchors.topMargin:5;
                        anchors.bottom:introduceid.top;
                        anchors.bottomMargin:4;
                        anchors.right:undefined;
                    }
                    PropertyChanges {
                        target:introduceid;
                        anchors.left:wrapper.left;
                        anchors.leftMargin:10;
                        anchors.bottom:wrapper.bottom;
                        anchors.bottomMargin:10;
                        text:intro;
                        visible:true;
                    }
                }
            ]
        }
    }
}