从事网站建,泰安网站建设公司带,大型网站建设优化企业,西宁网站建设平台公司目录 一、界面演示 二、设备列表 三、抖动单元格 四、设备模型 五、设备编辑 本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.htm…目录 一、界面演示 二、设备列表 三、抖动单元格 四、设备模型 五、设备编辑 本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.html 一、界面演示 设备管理演示 二、设备列表 参考了几个现有的智能家居相关的APP他们的设备管理模式基本差不多都是这种单元格的方式在QML里就是GridView组件了以下是设备列表相关的前端QML代码 import QtQuick 2.7 import QtQuick.Controls 2.0 import ../baseRectangle {property var groupName: id:id_rootRectheight: parent.heightwidth: parent.width-20color: transparentanchors.horizontalCenter: parent.horizontalCenterDevDelDialog//设备删除对话框{id:id_devDelDialogonSiqOkClicked: {var dev_list[]var ptr0for(var i0; iid_cellModel.count; i){if(id_cellModel.get(i).select_state)//选中{dev_list[ptr]id_cellModel.get(i).dev_sn}}theCenterMan.requestDelDevice(dev_list)funClose()}}DevRenameDialog//设备重命名对话框{id:id_devRenameDialogonSiqOkClicked: {theCenterMan.requestRenameDevice(devSn, text)funClose()}} GridView {id:id_gridViewproperty int dragItemIndex: -1property var dragActive: falseproperty int selectCnts: 0property var sortFlag: falseanchors.fill: parentclip: truecacheBuffer: 10000implicitWidth: 150implicitHeight: 150cellWidth: width*0.5cellHeight: cellWidth*0.8move:Transition {NumberAnimation { properties: x,y; duration: 200 }}moveDisplaced:Transition {NumberAnimation { properties: x,y; duration: 200 }}model: ListModel{id:id_cellModel}delegate: Rectangle{//单元格矩形id:id_cellRect // property var selectState: falsecolor: transparent // border.color: blue // border.width: 1width: id_gridView.cellWidthheight: id_gridView.cellHeightRectangle //拖动矩形{id:id_dragRectradius: 12width: id_cellRect.width-15height:id_cellRect.height-15anchors.centerIn:id_cellRectcolor: id_moveMouseArea.drag.active ? transparent : whiteonParentChanged: {if(parent!null){theCenterMan.showSimpleView(dev_sn, id_dragRect)} } Rectangle{ //勾选框id:id_selectRectwidth: 24height: widthradius: width/2border.width: 1border.color: #D0D0D0visible: id_gridView.dragActiveanchors{top:parent.toptopMargin:15right:parent.rightrightMargin:15}Image {id: id_selectImageanchors.fill: parentvisible: select_statemipmap: truesource: qrc:/imagesRC/mainImages/check.png}}MouseArea{id:id_moveMouseAreaanchors.fill: parent // drag.target: id_dragRectdrag.axis: Drag.YAxis | Drag.XAxisdrag.onActiveChanged: {if (id_moveMouseArea.drag.active) {id_gridView.dragItemIndex index;console.log(drag index, index)}id_dragRect.Drag.drop();}onClicked: {if(id_gridView.dragActive){select_state!select_stateif(select_state)id_gridView.selectCntselseid_gridView.selectCnts-- // console.log(selectCnts, id_gridView.selectCnts)}}onPressAndHold: {id_gridView.dragActivetrueselect_statetrueid_gridView.selectCnts1}onReleased: { // drag.targetnull // id_gridView.dragActivefalse // id_dropAnimation.stop()}}states: [State {when: id_dragRect.Drag.activeParentChange {target: id_dragRectparent: id_rootRect}AnchorChanges {target: id_dragRectanchors.horizontalCenter: undefinedanchors.verticalCenter: undefined}}]Drag.active: id_moveMouseArea.drag.activeDrag.hotSpot.x: id_dragRect.width / 2Drag.hotSpot.y: id_dragRect.height / 2}DropArea { //拖拽id: dropAreaanchors.fill: parentonDropped:{console.log(onDropped)var other_index id_gridView.indexAt(id_moveMouseArea.mouseX id_cellRect.x, id_moveMouseArea.mouseY id_cellRect.y);console.log(other_index:,other_index,id_gridView.dragItemIndex:,id_gridView.dragItemIndex);if(other_index!id_gridView.dragItemIndex other_index0){id_cellModel.move(id_gridView.dragItemIndex,other_index, 1);id_gridView.sortFlagtrue//有排序动作}}Rectangle {id: dropRectangleanchors.centerIn:parentwidth: id_dragRect.widthheight: id_dragRect.heightcolor: transparentradius: 12states: [State {when: dropArea.containsDragPropertyChanges {target: dropRectanglecolor: lightsteelblueopacity:0.3}}]}//end Rectangle}//end dropPropertyAnimation { //抖动id:id_dropAnimationtarget: id_dragRectproperties: rotationfrom:-1.5to:1.5duration: 300easing.type: Easing.InOutExpoloops: 300 //循环次数onStopped: {target[rotation] 0 //显示归位}}Timer{interval: Math.random()*500; running: true; repeat: trueonTriggered: {if(id_gridView.dragActive){if(id_dropAnimation.stopped){id_dropAnimation.start()id_moveMouseArea.drag.targetid_dragRect }}else{if(id_dropAnimation.started){id_dropAnimation.stop()id_moveMouseArea.drag.targetnullselect_statefalseid_gridView.selectCnts0}}}}}//end delegate}//end GridViewRectangle //设置栏{id:id_setRectwidth: parent.parent.widthheight: 60anchors{horizontalCenter:parent.horizontalCenterbottom:id_gridView.bottom}MouseArea{anchors.fill: parent //接收鼠标事件,避免选择背后的单元格}color: #606060 // opacity: 0.5visible: id_gridView.dragActiveRow{height: id_setRect.heightwidth: id_setRect.width*0.9anchors{top:parent.toptopMargin:5horizontalCenter:id_setRect.horizontalCenter}spacing: (width-30*4)/3Repeater{model: ListModel{id:id_setModel}Rectangle{property var maskFlag: index0 id_gridView.selectCnts!1height: 30width: heightradius: width/2color: maskFlag ? #808080 : whiteImageButton01 {anchors.centerIn: parentwidth: parent.width*0.7height: widthmipmap: true source: img_srconSiqClickedLeft: { // console.log(clicked index, index)switch(index){case 0: //修改名称if(id_gridView.selectCnts1){for(var i0; iid_cellModel.count; i){if(id_cellModel.get(i).select_state)//选中{id_devRenameDialog.devSnid_cellModel.get(i).dev_snid_devRenameDialog.oldNametheCenterMan.takeWorkDeviceName(id_devRenameDialog.devSn)//旧名称id_devRenameDialog.funOpen(id_devRenameDialog.oldName)break}} }breakcase 1: //移动设备id_devMoveDialog.open()var dev_list[]var ptr0for(i0; iid_cellModel.count; i){if(id_cellModel.get(i).select_state)//选中{dev_list[ptr]id_cellModel.get(i).dev_sn}}id_devMoveDialog.srcGroupNamegroupNameid_devMoveDialog.moveDevListdev_listbreakcase 2: //删除设备id_devDelDialog.funOpen()break case 3: //完成id_gridView.dragActivefalse;if(id_gridView.sortFlagtrue)//有排序动作{id_gridView.sortFlagfalsedev_list[]for(i0; iid_cellModel.count; i){dev_list[i]id_cellModel.get(i).dev_sn}theCenterMan.requestSortDevice(groupName, dev_list)//排序}break}}}Text{height: 25anchors{horizontalCenter:parent.horizontalCentertop:parent.bottomtopMargin:3}text: namefont.pointSize: 10font.family: 宋体color: maskFlag ? #808080 : white}}}}}Connections{target: theCenterManonSiqAddDevice2Group:{if(group_namegroupName){id_cellModel.append({dev_sn:dev_sn, select_state:false})}}onSiqDelDevice:{for(var i0; iid_cellModel.count; i){if(dev_snid_cellModel.get(i).dev_sn){id_cellModel.remove(i)break}}if(flag0) //删除完成{var dev_list[]var ptr0for(i0; iid_cellModel.count; i){dev_list[ptr]id_cellModel.get(i).dev_sn}theCenterMan.requestSortDevice(groupName, dev_list)//重新排序}}onSiqClearDevice:{if(group_namegroupName){id_cellModel.clear()}}}Component.onCompleted: {var img_srcqrc:/imagesRC/mainImages/home/rename.pngvar name修改名称id_setModel.append({img_src:img_src, name:name})img_srcqrc:/imagesRC/mainImages/home/move.pngname移动设备id_setModel.append({img_src:img_src, name:name}) img_srcqrc:/imagesRC/mainImages/home/del02.pngname删除设备id_setModel.append({img_src:img_src, name:name}) img_srcqrc:/imagesRC/mainImages/home/finish.pngname完成id_setModel.append({img_src:img_src, name:name}) }}在GridView里的重点其实就是拖拽排序功能了跟之前的分组排序类似的只不过网格拖拽复杂点首先方向是X和Y两个方向然后是抖动效果在长按某个设备单元格后整体就会抖动起来让用户直观地感受到是在编辑状态最后是选中效果用户选中后就会增加一个打勾按钮本质就是图片显示条件设置了。 三、抖动单元格 抖动使用的是动画组件其中需要改变的对象是拖拽矩形改变的属性是角度范围从-1.5~1.5角度如果停止后角度重置为0。在这里我们加个定时器用来管理所有单元格的抖动状态在有设备被长按激活拖拽后网格里所有的设备都要抖动起来在定时器里启动如果退出编辑去激活后同样是在定时器内检测停止。 PropertyAnimation { //抖动id:id_dropAnimationtarget: id_dragRectproperties: rotationfrom:-1.5to:1.5duration: 300easing.type: Easing.InOutExpoloops: 300 //循环次数onStopped: {target[rotation] 0 //显示归位}}Timer{interval: Math.random()*500; running: true; repeat: trueonTriggered: {if(id_gridView.dragActive){if(id_dropAnimation.stopped){id_dropAnimation.start()id_moveMouseArea.drag.targetid_dragRect }}else{if(id_dropAnimation.started){id_dropAnimation.stop()id_moveMouseArea.drag.targetnullselect_statefalseid_gridView.selectCnts0}}}} 四、设备模型 设备模型是我们后续开发新硬件产品所需要对应增加的内容在其它平台上很多称之为物模型一般用json语句来描述设备的属性、状态和功能这种模式的特点是通用性比较强缺点是性能损耗大深度定制使用体验不佳所以只能定义一些较为简单的设备模型复杂的调试起来很麻烦。那么我们这边的思想还是以代码驱动为核心物模型后端逻辑直接用C/C实现前端界面用QML实现配套使用下面举例说明。 如上图所示modelCpp存放的是物模型后端代码modelQml存放的是物模型前端代码由于各个物模型有一定相似性所以都会定义一个基本的模型具体设备模型再继承于这个基础模型在这里我们以后面要实现的净化器为例定义型号为AP01那么他的ModelAp01继承于BaseModel具体的后面完善净化器项目的时候再说明。 同样的前端代码也是这种模式SimpleAp01.qml继承于BaseSimpleView带Simple说明是简易模型就是每个单元格内显示的内容对于每个物模型有两个界面一个是这里所说的简易界面另一个是详情界面就是之前净化器项目那个可以具体控制操作的界面。 对于模型的显示也是一个需要技巧的地方首先要知道每个界面都需要有一个父组件/窗口这样才能显示对于设备模型前端来讲它的父窗口其实就是那个可以被拖拽的单元格了所以我们要显示模型的时候就是将这个单元格地址传到模型里去然后模型内部自己主动显示在单元格上下面通过代码了解这一流程。 首先在网格单元格内当单元格创建完成后会触发onParentChanged信号在这里就可以根据设备sn将单元格矩形最为父窗口把指针传入模型后端。 然后我们来看看控制中心的showSimpleView函数的内容如下所示就是根据dev_sn找到这个模型实例对象然后调用模型的showSimple进行显示注意这里继续将父窗口指针继续传递。 接下来是重头戏如下图所示是不是感觉似曾相识跟主程序显示是一样的每个模型内部都有一个QML显示引擎通过这里的配置就可以实现模型内容的前后端交互了在这里有两个接口theModelAp01和theCenterMan其中通过theCenterMan可以调用CenterMan类内的相关功能。函数末尾就是加载SimpleAp01这个模型文件。 到此为止物模型并不能显示因为上图中的父窗口指针只是保存在C后端了并没有跟前端的QML有什么关联这就引出了最后一步就是在具体的QML模型文件内调用takeModelParent()将刚才保存在后端的父窗口指针赋值到当前模型的parent属性这样就形成了闭环完成了模型显示的功能。 五、设备编辑 当用户长按某个单元格后除了单元格会抖动起来以外底部还会出现一个设置栏目前定义的功能是修改名称、移动设备和删除设备这里比较复杂的还是上一篇所写的后台管理特别是移动设备功能那么对于前端代码主要做个展示具体内容自己阅读理解应该问题不大。 Rectangle //设置栏{id:id_setRectwidth: parent.parent.widthheight: 60anchors{horizontalCenter:parent.horizontalCenterbottom:id_gridView.bottom}MouseArea{anchors.fill: parent //接收鼠标事件,避免选择背后的单元格}color: #606060 // opacity: 0.5visible: id_gridView.dragActiveRow{height: id_setRect.heightwidth: id_setRect.width*0.9anchors{top:parent.toptopMargin:5horizontalCenter:id_setRect.horizontalCenter}spacing: (width-30*4)/3Repeater{model: ListModel{id:id_setModel}Rectangle{property var maskFlag: index0 id_gridView.selectCnts!1height: 30width: heightradius: width/2color: maskFlag ? #808080 : whiteImageButton01 {anchors.centerIn: parentwidth: parent.width*0.7height: widthmipmap: true source: img_srconSiqClickedLeft: { // console.log(clicked index, index)switch(index){case 0: //修改名称if(id_gridView.selectCnts1){for(var i0; iid_cellModel.count; i){if(id_cellModel.get(i).select_state)//选中{id_devRenameDialog.devSnid_cellModel.get(i).dev_snid_devRenameDialog.oldNametheCenterMan.takeWorkDeviceName(id_devRenameDialog.devSn)//旧名称id_devRenameDialog.funOpen(id_devRenameDialog.oldName)break}} }breakcase 1: //移动设备id_devMoveDialog.open()var dev_list[]var ptr0for(i0; iid_cellModel.count; i){if(id_cellModel.get(i).select_state)//选中{dev_list[ptr]id_cellModel.get(i).dev_sn}}id_devMoveDialog.srcGroupNamegroupNameid_devMoveDialog.moveDevListdev_listbreakcase 2: //删除设备id_devDelDialog.funOpen()break case 3: //完成id_gridView.dragActivefalse;if(id_gridView.sortFlagtrue)//有排序动作{id_gridView.sortFlagfalsedev_list[]for(i0; iid_cellModel.count; i){dev_list[i]id_cellModel.get(i).dev_sn}theCenterMan.requestSortDevice(groupName, dev_list)//排序}break}}}Text{height: 25anchors{horizontalCenter:parent.horizontalCentertop:parent.bottomtopMargin:3}text: namefont.pointSize: 10font.family: 宋体color: maskFlag ? #808080 : white}}}}}