qml 实现一个listview

主要通过qml实现listvie功能，主要包括右键菜单，滚动条，拖动改变内容等，c++ 与 qml之间的变量和函数的调用。
main.cpp

1. #include <QQuickItem>
2. #include <QQmlContext>
3. #include "testlistmodel.h"
4. int main(int argc, char *argv[])
5. {
6.     QGuiApplication app(argc, argv);
7.     QQmlApplicationEngine engine;
8.     qmlRegisterType<TestListModel>("TestListModel", 1, 0, "TestListModel");
9.     engine.load(QUrl(QStringLiteral("qrc:/ui1.qml")));
10.     QObject* root = engine.rootObjects().first();
11.     QString retVal;
12.     QVariant message = "Hello from c++";
13.     QVariant returnedValue;
14.     QQmlProperty(root,"testmsg").write("hello,world");
15.     qDebug()<<"Cpp get qml property height222"<<root->property("msg");
16.     bool ret =QMetaObject::invokeMethod(root,"setSignalB",
17.                               Q_RETURN_ARG(QVariant,returnedValue),
18.                               Q_ARG(QVariant,message),
19.                               Q_ARG(QVariant,8));
20.     qDebug()<<"returnedValue"<<returnedValue<<root<<ret;
21.     return app.exec();
22. }

复制代码

listview 的model 代码
TestListModel.h

1. #ifndef TESTLISTMODEL_H
2. #define TESTLISTMODEL_H
4. #include <QAbstractListModel>
5. typedef struct Student
6. {
7.     int     id;
8.     QString name;
9.     QString sex;
10. }pStudent;
12. class TestListModel : public QAbstractListModel
13. {
14.     Q_OBJECT
15. public:
16.     explicit TestListModel(QObject *parent = nullptr);
17.     int rowCount(const QModelIndex &parent) const;
19.     QVariant data(const QModelIndex &index, int role) const;
20.     virtual QHash<int, QByteArray> roleNames() const;
21.     Qt::ItemFlags flags(const QModelIndex &index) const override;
22.     Q_INVOKABLE void modifyItemText(int row1,int row2);
23.     Q_INVOKABLE void add();
25.     enum MyType{
26.         ID=Qt::UserRole+1,
27.         Name,
28.         Sex
29.     };
30. private:
31.      QVector<Student>  m_studentList;
33. signals:
34.      void    layoutChanged();
35. };
37. #endif // TESTLISTMODEL_H

复制代码

TestListModel.cpp

1. #include "testlistmodel.h"
2. #include <QDebug>
4. TestListModel::TestListModel(QObject *parent)
5.     : QAbstractListModel{parent}
6. {
7.     for(int i=0;i<20;i++)
8.     {
9.         Student oneData;
10.         oneData.id = i;
11.         oneData.name  = QString("张三%1").arg(i);
12.         if(i%2==0)
13.         {
14.             oneData.sex = "female" ;
15.         }
16.         else
17.         {
18.             oneData.sex = "male" ;
19.         }
20.         //qDebug()<<"TestListModel"<<m_studentList.size();
21.         m_studentList.append(oneData);
22.     }   
24. }
26. int TestListModel::rowCount(const QModelIndex &parent) const
27. {
28.     //qDebug()<<"rowCount"<<m_studentList.size();
29.     return m_studentList.size();
30. }
31. QVariant TestListModel::data(const QModelIndex &index, int role) const
32. {
33.    // qDebug()<<"TestListModel::data11111111111"<<index.isValid();
35.     QVariant var;
36.     if ( !index.isValid() )
37.     {
38.         return QVariant();
39.     }
40.     int nRow    = index.row();
41.     int nColumn = index.column();
42.     if(Qt::UserRole+1 == role)
43.     {
44.         var = QVariant::fromValue(m_studentList.at(nRow).id);
45.     }
46.     else if(Qt::UserRole+2 == role)
47.     {
48.         var = QVariant::fromValue(m_studentList.at(nRow).name);
49.         // qDebug()<<"m_listData.at(nRow).name"<<m_listData.at(nRow).name;
50.     }
51.     else if(Qt::UserRole+3 == role)
52.     {
53.         var = QVariant::fromValue(m_studentList.at(nRow).sex);
54.         // qDebug()<<"m_listData.at(nRow).name"<<m_listData.at(nRow).name;
55.     }
56.     return var;
57. }
59. QHash<int, QByteArray> TestListModel::roleNames() const
60. {
61.     QHash<int, QByteArray> d;
62.     d[MyType::ID]="id";
63.     d[MyType::Name]="name";
64.     d[MyType::Sex]="sex";
65.     qDebug()<<"d .size"<<d.size();
66.     return d;
67. }
68. Qt::ItemFlags TestListModel::flags(const QModelIndex &index) const
69. {
70.     Q_UNUSED(index)
71.     // if(index.column() ==1)
72.     // {
73.     //     qDebug()<<"UserInfoModel::flags  1111";
74.     //     return Qt::ItemIsSelectable | Qt::ItemIsEnabled | Qt::ItemIsEditable;
75.     // }
76.     qDebug()<<"TestListModel::flags";
77.     return Qt::ItemIsSelectable | Qt::ItemIsEnabled;
78. }
80. void TestListModel::modifyItemText(int row1, int row2)
81. {
82.     m_studentList.swapItemsAt(row1,row2);
83.     beginResetModel();
84.     endResetModel();
85. }
87. void TestListModel::add()
88. {
89.     Student student;
90.     student.id   = 123;
91.     student.name = "love";
92.     student.sex  = "man";
93.     m_studentList.push_back(student);
94.     beginResetModel();
95.     endResetModel();
96.     emit layoutChanged();
98. }

复制代码

ui.qml

1. import QtQuick 2.6
2. import QtQuick.Window 2.2
3. import QtQuick.Layouts 1.2
4. import TestListModel 1.0
7. import QtQuick 2.12
9. import QtQuick 2.2
10. import QtQml.Models 2.2
11. //import QtQuick.Controls 2.12
12. //QtQuick.Controls 2.12  和QtQuick.Controls.Styles 1.4不匹配
13. import QtQuick.Controls.Styles 1.4
14. import QtQuick.Controls 1.4
15. import QtQuick.Controls 2.12
16. import QtLocation 5.15
17. //import "CustomMenuItem.qml"
18. // import QtQuick.Controls 2.15
20. //import QtQuick.Controls 2.5
23. Window {
24.     id:window
25.     //anchors.centerIn: parent
26.     width: 650;
27.     height: 457
28.     visible: true
29.     flags: Qt.FramelessWindowHint | Qt.Dialog
30.     property string testmsg: "GongJianBo1992"
31.     Rectangle{
32.         id:rect1;
33.         anchors.fill: parent;
34.         border.width: 1;
35.         color: "transparent";
36.         border.color: "red";
37.         clip:true//这一属性设置表示如果他的子类超出了范围，那么就剪切掉，不让他显示和起作用
38.     }
39.     //无边框移动
40.     MouseArea {
41.         id: dragRegion
42.         anchors.fill: parent
43.         property point clickPos: "0,0"
44.         onPressed: {
45.             clickPos = Qt.point(mouse.x,mouse.y)
46.         }
47.         onReleased: {
48.             clickPos = Qt.point(0,0)
49.         }
50.         onPositionChanged: {
51.             //鼠标偏移量
52.             var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
53.             //如果mainwindow继承自QWidget,用setPos
54.             window.setX(window.x+delta.x)
55.             window.setY(window.y+delta.y)
56.         }
57.     }
58.     Menu {
59.         id: contextMenu
60.         background: Rectangle {// @disable-check M16
61.             anchors.fill:parent
62.             implicitWidth: 200
63.             implicitHeight: 30
64.             color: "lightblue"
65.         }
66.         Action{
67.             id:no1
68.             text:"123"
69.             onTriggered:
70.             {
71.                 console.log("选项一被点击")
72.                 tableView.selectAllItem()
73.             }
74.             // @disable-check M16
75.         }
76.         Menu{
77.             background: Rectangle {// @disable-check M16
78.                 anchors.fill:parent
79.                 implicitWidth: 200
80.                 implicitHeight: 30
81.                 color: "lightblue"
82.             }
83.             title:"love"
84.             Action{
85.                 id:no4
86.                 text:"789"
87.                 onTriggered:
88.                 {
89.                     console.log("选项六被点击")
90.                     tableView.selectAllItem()
91.                 }
92.             }
93.         }
94.         Action {
95.             id:no2
96.             text:"234"
97.             onTriggered:
98.             {
99.                 console.log("选项二被点击")
100.                 tableView.disselectAllItem()
101.             }
102.         }
103.         MenuSeparator {
104.             contentItem: Rectangle {// @disable-check M16
105.                 implicitWidth: 200
106.                 implicitHeight: 1
107.                 color: "#21be2b"
108.             }
109.         }
110.         Action {
111.             id:no3
112.             text:"345"
113.             onTriggered: console.log("选项三被点击")
114.         }
115.         delegate: MenuItem {// @disable-check M16
116.             id: menuItem
117.             height: 40// @disable-check M16
118.              contentItem: Text{// @disable-check M16
119.               text:menuItem.text
120.               color: menuItem.highlighted? "gary": "blue"
121.             }
122.             background: Rectangle{// @disable-check M16
123.                 implicitWidth: 200
124.                 implicitHeight: 30
125.                 color: menuItem.highlighted? "purple":"lightblue"
126.             }
127.             arrow: Image {// @disable-check M16
128.                 id: arrowImage
129.                 x: parent.width - width
130.                 y: parent.height/2 -height/2
131.                 visible: menuItem.subMenu
132.                 source: "qrc:/Right arrow.png"
133.             }
134.         }
136.     }
137.      TestListModel{
138.         id: myMode
139.         onLayoutChanged:{
140.            console.log("LayoutChanged")
141.         }
142.      }
143.      // Page{
144.      //    x:listwidget.x
145.      //    y:listwidget.y
146.      //    width:  listwidget.width
147.      //    height: listwidget.height
148.      //    background: Rectangle{
149.      //        anchors.fill: parent
150.      //        color: "white"
151.      //        border.width: 1
152.      //        border.color: "black"
153.      //    }
154.      // }
155.      Rectangle{
156.          width:  window.width-60+2
157.          height: 300+2
158.          border.color: "lightgreen"
159.          border.width: 1
160.          color: "transparent"
161.          x:30
162.          y:40
163.      ListView {
164.          id: listwidget
165.          width:  parent.width-2//window.width-60
166.          height: parent.height-2//   300
167.          x:1
168.          y:1
169.          interactive: false // @disable-check M16
170.          model: myMode
171.          clip: true  //不写的话，滚动的时候，listview会有拖拽的感觉
172.          //orientation: ListView.Vertical //垂直列表        
173.          ScrollBar.vertical: ScrollBar {
174.              id: scrollBar
175.              hoverEnabled: true
176.              active: hovered || pressed
177.              policy: ScrollBar.AlwaysOn
178.              orientation: Qt.Vertical
179.              size: 0.8
180.              anchors.top: parent.top
181.              anchors.right: parent.right
182.              anchors.bottom: parent.bottom
183.              contentItem: Rectangle  {
184.                  implicitWidth: 6  //没指定的时候的宽度
185.                  implicitHeight: 100 //没有指定高度的时候
186.                  radius: width / 2
187.                  color: scrollBar.pressed ? "#81e889" : "#c2f4c6"
189.              }
190.          }
191.         Rectangle{
192.              id : dargRect
193.              width: 100
194.              height: 30
195.              visible: false
196.              color: "lightgray";
197.              Text {
198.                  anchors.verticalCenter: parent.verticalCenter
199.                  anchors.horizontalCenter: parent.horizontalCenter
200.                  id: dargRectText
201.                  // text: "123"
202.                  horizontalAlignment: Text.AlignHCenter
203.                  verticalAlignment: Text.AlignVCenter
204.              }
205.          }
206.          delegate: Item{
207.              id:itemDrag1
208.              width: window.width-60
209.              height: 30
210.              property int dragItemIndex: 0
211.              property bool isHover: false
212.              Rectangle {
213.                  width: window.width-60
214.                  height: 30
215.                  //radius: 5;
216.                  // border.width: 1
217.                  // border.color: "white"
218.                  color:isHover === true? "lightgreen":listwidget.currentIndex === index ? "lightblue" : "gray"
219.                  Text {
220.                      id:itemDrag2
221.                      anchors.verticalCenter: parent.verticalCenter
222.                      anchors.left: parent.left
223.                      // text: "123"
224.                      horizontalAlignment: Text.AlignHCenter
225.                      verticalAlignment: Text.AlignVCenter
226.                      text: id+":"+name+":"+sex
227.                  }               
228.                  MouseArea {
229.                      id: mouseArea
230.                      anchors.fill: parent
231.                      acceptedButtons: Qt.LeftButton | Qt.RightButton
232.                      hoverEnabled: true
233.                      onWheel: {// @disable-check M16
234.                          // 当滚轮被滚动时调用
235.                          // 事件参数wheel提供了滚动的方向和距离
236.                          if (wheel.angleDelta.y > 0) {
237.                              //console.log("向上滚动")
238.                              scrollBar.decrease();
239.                          }
240.                          else {
241.                              //console.log("向下滚动")
242.                              scrollBar.increase();
243.                          }
244.                      }
245.                      onEntered:
246.                      {
247.                          isHover = true
248.                          //console.log("onEntered" +isHover)
249.                      }
250.                      onExited:
251.                      {
252.                          isHover = false
253.                          //console.log("onExited" +isHover)
254.                      }
255.                      onClicked:
256.                      {
257.                          if (mouse.button === Qt.RightButton)//菜单
258.                          {
259.                              console.log("menu RightButton")
260.                              contextMenu.popup()
261.                          }
262.                          else
263.                          {
264.                              //var other_index = listwidget.indexAt(mouseArea.mouseX , mouseArea.mouseY );
266.                              listwidget.currentIndex = index // 点击时设置当前索引为该项的索引值
267.                              dragItemIndex = index;
268.                              console.log("onClicked"+index)
269.                          }
270.                      }
271.                      onPressAndHold:  {
272.                          if(mouse.button === Qt.LeftButton)
273.                          {
274.                              console.log("onPressAndHold"+index)
275.                              listwidget.currentIndex = index
276.                              dargRect.x = mouseX +itemDrag1.x
277.                              dargRect.y = mouseY+itemDrag1.y
278.                              dragItemIndex = index;
279.                              dargRectText.text = itemDrag2.text
280.                              dargRect.visible = true
281.                          }
282.                      }
283.                      onReleased:{
284.                         if(dargRect.visible === true)
285.                         {
286.                             dargRect.visible = false
287.                             var other_index = listwidget.indexAt(mouseX +itemDrag1.x , mouseY+itemDrag1.y );
288.                             console.log("onReleased"+other_index)
289.                             if(dragItemIndex!==other_index)
290.                             {
291.                             var afterItem   = listwidget.itemAtIndex(other_index );
292.                             // listwidget.myModel.get(other_index).text
293.                             myModel.modifyItemText(dragItemIndex,other_index)
294.                             //console.log("onReleased"+myModel)
295.                             }
297.                         }
298.                      }
299.                      onPositionChanged:{
300.                          //console.log("onPositionChanged111" + mouse.button)
301.                          if(mouse.button === Qt.LeftButton)
302.                          {
303.                              //console.log("onPositionChanged222")
304.                              var other_index = listwidget.indexAt(mouseX +itemDrag1.x , mouseY+itemDrag1.y );
305.                              listwidget.currentIndex  = other_index;
306.                              dargRect.x = mouseX +itemDrag1.x
307.                              dargRect.y = mouseY+itemDrag1.y
308.                          }
309.                      }                     
310.                  }
311.              }
312.          }
313.      }
314. }
315.     Button {
316.         id: button1
317.         x: parent.width-80
318.         y: parent.height-36
319.         width:70
320.         height:30
321.         //text: qsTr("Button")
322.         background:Rectangle // @disable-check M16
323.         {
324.             //anchors.fill: parent
325.             border.color: "royalblue"
326.             border.width: 1
327.             color: button1.down ? "red" :(button1.hovered?"blue":"lightsteelblue")
328.         }
329.         Text {
330.             text: "1213";
331.             // anchors.fill: parent
332.             anchors.centerIn: parent;
333.             color: button1.hovered?"yellow":"red";
334.             font.pixelSize: 13;
335.             //font.weight: Font.DemiBold
336.         }      
337.         Connections {
338.             target: button1
339.             function onClicked()
340.             {
341.                 window.close();
342.             }
343.         }
344.     }
345.     function myQmlFunction( msg,index) {
346.             console.log("Got message:", msg)
347.             return "some return value"
348.         }
349.     function setSignalB(name, value){
351.            console.log("setPoint"+" "+testmsg);
352.            console.log("qml function processB",name,value);
353.            myMode.add();
354.            return value
355.        }
357. }

复制代码

运行结果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。