qml 实现一个listview - ToB企服应用市场:ToB评测及商务社交产业平台

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import TestListModel 1.0
import QtQuick 2.12
import QtQuick 2.2
import QtQml.Models 2.2
//import QtQuick.Controls 2.12
//QtQuick.Controls 2.12 和QtQuick.Controls.Styles 1.4不匹配
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4
import QtQuick.Controls 2.12
import QtLocation 5.15
//import "CustomMenuItem.qml"
// import QtQuick.Controls 2.15
//import QtQuick.Controls 2.5
Window {
id:window
//anchors.centerIn: parent
width: 650;
height: 457
visible: true
flags: Qt.FramelessWindowHint | Qt.Dialog
property string testmsg: "GongJianBo1992"
Rectangle{
id:rect1;
anchors.fill: parent;
border.width: 1;
color: "transparent";
border.color: "red";
clip:true//这一属性设置表示如果他的子类超出了范围，那么就剪切掉，不让他显示和起作用
}
//无边框移动
MouseArea {
id: dragRegion
anchors.fill: parent
property point clickPos: "0,0"
onPressed: {
clickPos = Qt.point(mouse.x,mouse.y)
}
onReleased: {
clickPos = Qt.point(0,0)
}
onPositionChanged: {
//鼠标偏移量
var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
//如果mainwindow继承自QWidget,用setPos
window.setX(window.x+delta.x)
window.setY(window.y+delta.y)
}
}
Menu {
id: contextMenu
background: Rectangle {// @disable-check M16
anchors.fill:parent
implicitWidth: 200
implicitHeight: 30
color: "lightblue"
}
Action{
id:no1
text:"123"
onTriggered:
{
console.log("选项一被点击")
tableView.selectAllItem()
}
// @disable-check M16
}
Menu{
background: Rectangle {// @disable-check M16
anchors.fill:parent
implicitWidth: 200
implicitHeight: 30
color: "lightblue"
}
title:"love"
Action{
id:no4
text:"789"
onTriggered:
{
console.log("选项六被点击")
tableView.selectAllItem()
}
}
}
Action {
id:no2
text:"234"
onTriggered:
{
console.log("选项二被点击")
tableView.disselectAllItem()
}
}
MenuSeparator {
contentItem: Rectangle {// @disable-check M16
implicitWidth: 200
implicitHeight: 1
color: "#21be2b"
}
}
Action {
id:no3
text:"345"
onTriggered: console.log("选项三被点击")
}
delegate: MenuItem {// @disable-check M16
id: menuItem
height: 40// @disable-check M16
contentItem: Text{// @disable-check M16
text:menuItem.text
color: menuItem.highlighted? "gary": "blue"
}
background: Rectangle{// @disable-check M16
implicitWidth: 200
implicitHeight: 30
color: menuItem.highlighted? "purple":"lightblue"
}
arrow: Image {// @disable-check M16
id: arrowImage
x: parent.width - width
y: parent.height/2 -height/2
visible: menuItem.subMenu
source: "qrc:/Right arrow.png"
}
}
}
TestListModel{
id: myMode
onLayoutChanged:{
console.log("LayoutChanged")
}
}
// Page{
// x:listwidget.x
// y:listwidget.y
// width: listwidget.width
// height: listwidget.height
// background: Rectangle{
// anchors.fill: parent
// color: "white"
// border.width: 1
// border.color: "black"
// }
// }
Rectangle{
width: window.width-60+2
height: 300+2
border.color: "lightgreen"
border.width: 1
color: "transparent"
x:30
y:40
ListView {
id: listwidget
width: parent.width-2//window.width-60
height: parent.height-2// 300
x:1
y:1
interactive: false // @disable-check M16
model: myMode
clip: true //不写的话，滚动的时候，listview会有拖拽的感觉
//orientation: ListView.Vertical //垂直列表
ScrollBar.vertical: ScrollBar {
id: scrollBar
hoverEnabled: true
active: hovered || pressed
policy: ScrollBar.AlwaysOn
orientation: Qt.Vertical
size: 0.8
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
contentItem: Rectangle {
implicitWidth: 6 //没指定的时候的宽度
implicitHeight: 100 //没有指定高度的时候
radius: width / 2
color: scrollBar.pressed ? "#81e889" : "#c2f4c6"
}
}
Rectangle{
id : dargRect
width: 100
height: 30
visible: false
color: "lightgray";
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
id: dargRectText
// text: "123"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
delegate: Item{
id:itemDrag1
width: window.width-60
height: 30
property int dragItemIndex: 0
property bool isHover: false
Rectangle {
width: window.width-60
height: 30
//radius: 5;
// border.width: 1
// border.color: "white"
color:isHover === true? "lightgreen":listwidget.currentIndex === index ? "lightblue" : "gray"
Text {
id:itemDrag2
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
// text: "123"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: id+":"+name+":"+sex
}
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: true
onWheel: {// @disable-check M16
// 当滚轮被滚动时调用
// 事件参数wheel提供了滚动的方向和距离
if (wheel.angleDelta.y > 0) {
//console.log("向上滚动")
scrollBar.decrease();
}
else {
//console.log("向下滚动")
scrollBar.increase();
}
}
onEntered:
{
isHover = true
//console.log("onEntered" +isHover)
}
onExited:
{
isHover = false
//console.log("onExited" +isHover)
}
onClicked:
{
if (mouse.button === Qt.RightButton)//菜单
{
console.log("menu RightButton")
contextMenu.popup()
}
else
{
//var other_index = listwidget.indexAt(mouseArea.mouseX , mouseArea.mouseY );
listwidget.currentIndex = index // 点击时设置当前索引为该项的索引值
dragItemIndex = index;
console.log("onClicked"+index)
}
}
onPressAndHold: {
if(mouse.button === Qt.LeftButton)
{
console.log("onPressAndHold"+index)
listwidget.currentIndex = index
dargRect.x = mouseX +itemDrag1.x
dargRect.y = mouseY+itemDrag1.y
dragItemIndex = index;
dargRectText.text = itemDrag2.text
dargRect.visible = true
}
}
onReleased:{
if(dargRect.visible === true)
{
dargRect.visible = false
var other_index = listwidget.indexAt(mouseX +itemDrag1.x , mouseY+itemDrag1.y );
console.log("onReleased"+other_index)
if(dragItemIndex!==other_index)
{
var afterItem = listwidget.itemAtIndex(other_index );
// listwidget.myModel.get(other_index).text
myModel.modifyItemText(dragItemIndex,other_index)
//console.log("onReleased"+myModel)
}
}
}
onPositionChanged:{
//console.log("onPositionChanged111" + mouse.button)
if(mouse.button === Qt.LeftButton)
{
//console.log("onPositionChanged222")
var other_index = listwidget.indexAt(mouseX +itemDrag1.x , mouseY+itemDrag1.y );
listwidget.currentIndex = other_index;
dargRect.x = mouseX +itemDrag1.x
dargRect.y = mouseY+itemDrag1.y
}
}
}
}
}
}
}
Button {
id: button1
x: parent.width-80
y: parent.height-36
width:70
height:30
//text: qsTr("Button")
background:Rectangle // @disable-check M16
{
//anchors.fill: parent
border.color: "royalblue"
border.width: 1
color: button1.down ? "red" :(button1.hovered?"blue":"lightsteelblue")
}
Text {
text: "1213";
// anchors.fill: parent
anchors.centerIn: parent;
color: button1.hovered?"yellow":"red";
font.pixelSize: 13;
//font.weight: Font.DemiBold
}
Connections {
target: button1
function onClicked()
{
window.close();
}
}
}
function myQmlFunction( msg,index) {
console.log("Got message:", msg)
return "some return value"
}
function setSignalB(name, value){
console.log("setPoint"+" "+testmsg);
console.log("qml function processB",name,value);
myMode.add();
return value
}
}

复制代码