当前位置：首页 > news >正文

QML —— ListView代理，附横向滑动效果（附源码）

news 2024/11/15 0:06:57

代码效果

在这里插入图片描述

说明

在Qt 中我们要想利用视图显示一些数据，并不是将这些数据直接放到视图中的，因为视图只管显示，它不存储数据。我们的数据要放在数据模型中。但是数据模型中只是存放数据，它并不涉及数据的显示方式。所以，我们还要用一个叫做代理的东西来设置数据模型中的数据怎样在视图中显示。

在这里插入图片描述

源码

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.0Window
{visible: truewidth: 640height: 560title: qsTr("ListView测试DEMO")ListModel{id: listModelListElement{text: qsTr("陕西天气预报 - 西安市")}ListElement{text: qsTr("陕西天气预报 - 汉中市")}ListElement{text: qsTr("陕西天气预报 - 宝鸡市")}ListElement{text: qsTr("陕西天气预报 - 延安市")}ListElement{text: qsTr("陕西天气预报 - 榆林市")}ListElement{text: qsTr("陕西天气预报 - 安康市")}ListElement{text: qsTr("陕西天气预报 - 咸阳市")}ListElement{text: qsTr("陕西天气预报 - 铜川市")}ListElement{text: qsTr("陕西天气预报 - 商洛市")}}ListView{id: listviewwidth: parent.widthheight: parent.heightanchors.fill: parentmodel: listModeldelegate: listDelegate}Component{id: listDelegateRectangle{id: listItemwidth: parent.widthheight: 40Text{id: textfont.family: "simsun"font.pointSize: 12height: parent.heightwidth: parent.width - delBtn.widthtext: model.textcolor: "green"verticalAlignment: Text.AlignVCenterMouseArea{property point clickPos: "0,0"anchors.fill: parentonPressed:{///按下鼠标：当前鼠标的位置clickPos  = Qt.point(mouse.x,mouse.y);}onReleased:{///松开鼠标：var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)console.debug("delta.x: " + delta.x);if ((delta.x < 0) && (aBtnShow.running === false) && (delBtn.width == 0)){aBtnShow.start();}else if ((delta.x > 0) && aBtnHide.running === false && (delBtn.width > 0)){aBtnHide.start();}}}}Rectangle{color: "#AAAAAA"height: 1width: parent.widthanchors.bottom: parent.bottom}Rectangle{id: delBtnheight: parent.heightwidth: 0color: "#EE4040"anchors.right: parent.rightText{font.family: "microsoft yahei"font.pointSize: 12anchors.centerIn: parenttext: qsTr("删除")color: "#ffffff"}MouseArea{anchors.fill: parentonClicked:{listview.model.remove(index);}}}PropertyAnimation{id: aBtnShowtarget: delBtnproperty: "width"duration: 100from: 0to: 160}PropertyAnimation{id: aBtnHidetarget: delBtnproperty: "width"duration: 100from: 160to: 0}}}
}