14、ListView案例

一、介绍

通过ListView实现图片点击放大并且添加说明的功能

 

二、实现

import QtQuick 2.5
import QtQuick.Window 2.3

Window {
    visible: true
    id:root
    width: 300
    height: 500

    ListView {
        id:lv
        anchors.fill: parent
        model:lmod//数据模型
        delegate: showdele//显示样式
    }

    ListModel {
        id:lmod
        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:showdele
        Item {
            id: wrapper
            width: lv.width
            height: 30

            Rectangle {//负责显示name
                id:charactor
                anchors.left: parent.left
                anchors.right: parent.right
                color: "black"
                height: 30
                Text {
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    anchors.topMargin: 5
                    anchors.verticalCenter: parent.verticalCenter
                    color: "white"
                    text: name
                }
            }

            Rectangle {//负责显示图片
                id:img
                width: 26
                height: 26
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.rightMargin: 2

                Image {
                    anchors.fill: parent
                    source: imagesource
                }
            }

            MouseArea {//当点击item区域时，将item的状态置位expand
                anchors.fill: parent
                onClicked: {
                    parent.state="expand"
                }
            }

            Item {//负责显示文字说明
                id: factview
                anchors.top: img.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom

                opacity: 0

                Rectangle {
                    anchors.fill: parent
                    Text {
                        anchors.fill: parent
                        anchors.margins: 4
                        clip: true
                        text:facts
                    }
                }
            }

            Rectangle {
                id:closebtn
                color: "blue"
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.topMargin: 4
                anchors.rightMargin: 4

                height: 26
                width: 26

                opacity: 0
            }

            MouseArea {//点击closebtn后，状态清除
                anchors.fill: closebtn
                onClicked: {
                    parent.state=""
                }
            }

            states: [
                State {
                    name: "expand"//当状态为expand时，各个属性应该如何变化

                    PropertyChanges { target: wrapper; height: lv.height }//wrapper的height变成ListView的height，lv.height为500，这样就会使单个条目充满整个界面
                    PropertyChanges { target: img; width: lv.width; height: lv.width; anchors.rightMargin: 0; anchors.topMargin: 30 }//图片放大到ListView的宽度和高度
                    PropertyChanges { target: factview; opacity: 1 }//文字和按钮变成不透明显示出来
                    PropertyChanges { target: closebtn; opacity: 1 }
                    PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false }//wrapper.y的值为0，这样，点击后，所选条目就能位于最上方，且高度是500
                    //interactive表示用户无法上拉下拉，无法和界面交互
                }
            ]

            transitions: [//定义过渡动画
                Transition {
                    NumberAnimation {
                        duration: 500;//定义属性变化时的动画时间
                        properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"//添加动画的属性
                    }
                }
            ]
        }
    }
}

 

参考

《qml book》

 

作者水平有限，如有错误，欢迎指出