赞
踩
一、介绍
通过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》
作者水平有限,如有错误,欢迎指出
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。