devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

物联网实战--入门篇之(十一)安卓QT--前端开发

作者：weixin_40725706 | 2024-04-13 19:57:47

赞

踩

物联网实战--入门篇之(十一)安卓QT--前端开发

目录

一、设计思路

二、QML文件结构

三、顶部框

四、中心圆圈

五、泡泡

六、开关栏

七、调速栏

八、安卓编译

一、设计思路

        还是再贴一下米家APP的截图，再根据我们之前第九篇的分析，大概可以得出设计思路了。首先一个根页面当底版，然后在跟页面上进行布局，布局内容分为三块，数据显示界面、开关界面和调速界面，从上到下依次排列即可。自动、睡眠模式那一栏省略，对我们当前没太大用处。

        同时，这三个模块界面要考虑开机和关机两个不同的状态，关机时候，数据界面和开关界面变黑，调速界面变灰色，并且滑块禁止滑动；开机时候，数据界面根据空气等级变化颜色，同时有很多小气泡随机生成往中心运动，开关界面按钮颜色变化，调速界面也变成彩色，并且滑块可以滑动了。

        界面整体设计方案基本这样了，下面通过代码带大家参与设计过程，同时说明如何实现数据交互、显示等问题。

   

二、QML文件结构

       题外话， QML文件语法跟js很相似，会C语言也能轻松上手，本质上就是每个QML对象的背后都有一个QT帮我们封装好的C++类，QT把这个类的属性接口暴露给我们设置，这样既降低了编程难度，又达成了前后端分离的目的。不过目前似乎很多老QT程序员不太接受QML，就个人而言，是个好东西，值得入手。

        回到我们的项目，下图中的0、1、2就是靠近底层的程度，0对应的main.qml就是我们C++中QML引擎加载的文件，它是前端的根文件，内容也很简单，就是一个Window窗口，并设置一些长宽的等属性，里面就包含了一个我们自定义的MainView页面，因为Window对象没有布局相关的属性，但又是必须的，所以才会再自定义一个MainView，便于自身扩展、布局。

        打开MainView其实也很简单，就一个Item，内部也就包含了一个设备详情页面AirDevPage对象，这里的Item是一个很基础的对象，很多对象都是继承于它的，比如矩形框就是在它的基础之上添加了边框颜色、宽度、内部背景颜色等属性。只要是图形对象，一般都要用anchros这个属性，称为锚布局，很灵活、很好用。

        AirDevPage就是我们这个项目的核心界面了，那么很多人会觉得MainView这个文件是不是多余的，直接把AirDevPage放在main.qml里不就好了？这对当前的项目效果是一样的，但是既然是项目教程，就要想的远一点，我们当前只有一个净化器相关的界面是可以这样，但是哪天又想在这个项目里添加其它设备呢，比如温湿度、烟感等，那么我们就可以直接再创建跟AirDevPage同级的页面，比如ThDevPage,SmokeDevPage，再用切换画面把他们整合在一起就行了，整体的文件结构都不需要改变，增加就行。

        接着打开AirDevPage.qml，内容就比较多了，也是主角净化器相关的界面，下面按结构讲解。

三、顶部框

        这部分在米家APP上是没有的，我们为了结合自己的项目，把头顶区域拿来做状态栏，主要有两个功能，一个是设备的在线状态，一个是序列号。

        在线状态的C++代码如下图所示，在定时函数内，每隔1秒检测，如果保活时间超过5秒认为设备断线了，当然这个时间自己定义，不要太久就行了。

        对于前端，首先定义一个状态变量，在图片对象的属性里，显示图片根据这个状态值自动切换，而状态值的改变发生在槽函数里。

        序列号也是一样的道理，后端组织好后直接发送给前端显示。

        顶部矩形框作为一个小模块，整体的QML代码如下。这里顺便再提一下，图片的路径"qrc:/imagesRC/images/led_green.png"，前缀有qrc:字样，说明是从资源文件里获取的，如果要显示本地图片也行，例如"images/led_green.png"，这样你就需要在可执行程序的目录下添加images文件夹，并放入led_green.png图片才行，但是这样明显比较麻烦的，也不利于统一管理，所以还是采用资源文件比较好。还有个细节是，每添加或创建一个qml文件，你都需要右键工程，点击执行qmake，这样才能正确编译。

  1.     Rectangle//顶部矩形框
  2.     {
  3.         color:"transparent"
  4.         id:id_headRect
  5.         width: parent.width
  6.         height: 60
  7.         anchors
  8.         {
  9.             top:parent.top
  10.         }
  11.         Label{ //显示净化器设备ID号
  12.             id:id_devSnLabel
  13.             height: 30
  14.             width: parent.width
  15.             anchors.centerIn: parent
  16.             
  17.             verticalAlignment: Text.AlignVCenter
  18.             horizontalAlignment: Text.AlignHCenter
  19.             font.pointSize: height*0.5
  20.             font.family:"黑体"
  21.             color: "black"
  22.             text:"ID: 11223344"
  23.         }
  24.         Image {
  25.             id: id_stateImage
  26.             width: 30
  27.             height: width
  28.             anchors
  29.             {
  30.                 verticalCenter:parent.verticalCenter
  31.                 left:parent.left
  32.                 leftMargin:width*2
  33.             }
  34.             source: onlineState>0 ? "qrc:/imagesRC/images/led_green.png" : "qrc:/imagesRC/images/led_gray.png"
  35.         }
  36.     }

四、中心圆圈

        这一部分是比较麻烦的，以下是大概的布局，对着米家APP截图模仿就行了，这里有定义一个switchState开关状态变量，为了方便页面切换用的。

        接下来先具体看下关机状态下的圆圈代码，可以发现，它其实是个矩形，把圆角半径设置为宽度的一般后就变成圆形了。对于颜色，可以上图标网站上选好后复制下来就行了，具体网址iconfont-阿里巴巴矢量图标库，简单的图标也可以在上面找的。

        彩色圆圈跟黑色圆圈是重叠的，看他们的visible属性会发现，互为相反的，true就是显示，false就是隐藏。

        至于彩色圆圈的内容稍微麻烦点，需要渐变色，起始颜色根据污染等级确定，边缘颜色设置为透明transparent，最后根据位置和半径画圆填充就行了。这里有个槽函数onAlarmLevelChanged，当污染等级改变的时候要请求重绘，这样颜色才能更新。

彩色圆圈具体的代码如下。

  1. import QtQuick.Controls 2.5
  2. import QtGraphicalEffects 1.0
  3. import QtQuick.Particles 2.12
  4. import QtQuick 2.14
  5.  
  6.  
  7. Rectangle
  8. {
  9.     property var alarmLevel: 0
  10.     
  11.     id:id_onCircular
  12.     Canvas {
  13.         id:id_canvas
  14.         anchors.fill: parent
  15.         onPaint: {
  16.             var ctx = getContext("2d");
  17.             ctx.reset();
  18.  
  19.             var centreX = width / 2;
  20.             var centreY = height / 2;
  21.             var radius=width/2;
  22.             
  23.             // 画径向渐变色
  24.             var gradient=ctx.createRadialGradient(centreX,centreY,0,centreX,centreY,radius);
  25.             gradient.addColorStop(0, funTakeCenterColor());
  26.             gradient.addColorStop(1, 'transparent');
  27.             ctx.fillStyle=gradient;
  28.             ctx.arc(centreX, centreY, width / 2, 0, Math.PI * 2, false);
  29.             ctx.fill();
  30.         }
  31.     }
  32.  
  33.     function funTakeCenterColor()
  34.     {
  35.         var color="#0ee7cb"
  36.         switch(alarmLevel)
  37.         {
  38.             case 0:color="#0ee7cb";break;
  39.             case 1:color="#dd9220";break;
  40.             case 2:color="#f65345";break;
  41.                
  42.         }
  43.         return color
  44.     }
  45.     onAlarmLevelChanged: 
  46.     {
  47.         id_canvas.requestPaint()
  48.     }
  49.     
  50. }

        至于其他的温湿度、PM2.5等文本按部就班就行了，没什么特殊的，主要就看下anchors锚布局的用法以及数值是如何更新的就行了。

五、泡泡

        这部分本来是属于中心圆圈的内容的，但是比较特殊就单独出来了,具体代码如下，关键注释都有。首先Repeater的作用就是重复某个对象，对象的数量和一些参数可以通过model属性确定和传递。在这里，重复对象就是小圆圈了，它们显示与否跟开关状态关联，颜色跟污染等级关联；小圆圈的内部设置了一个定时器，这样才能实时改变位置模拟出运动的效果。实际运行时，首先需要随机配置出发点和大小，然后朝着中心运动，到达一定范围内就消失，重新出发。

        出发的时候，我们获取了三个随机数(0~1)，分别用于设置气泡直径、位置x和位置y；而后根据与中心点的距离和位置判断该如何运动，最后一步步靠近中心、消失，周而复始。

        气泡的数量通过初始化ListModel获得，我这里是30个。

  1.     Repeater  //泡泡
  2.     {
  3.         model: ListModel{
  4.             id:id_listModel
  5.         }
  6.  
  7.         Rectangle{
  8.             id:id_bubbles
  9.             visible: switchState
  10.             width: 8
  11.             height: width
  12.             radius: width/2
  13.             color: id_colorView.funTakeCenterColor()
  14.             x:0
  15.             y:0
  16.             Timer{
  17.                 interval: 50; running: switchState; repeat: true
  18.                 onTriggered: 
  19.                 {
  20.                     var c_x=id_rootRect.width/2
  21.                     var c_y=id_rootRect.height/2//矩形框的中心点
  22.                     var det_x=c_x-id_bubbles.x
  23.                     var det_y=c_y-id_bubbles.y
  24.                     var det_val=Math.sqrt(det_x*det_x+det_y*det_y)//与中心点的距离
  25.                     if(x==0 || y==0 || det_val<20)//消失,重新出发
  26.                     {
  27.                         var rand1=Math.random()
  28.                         var rand2=Math.random()
  29.                         var rand3=Math.random()//获取3个随机数
  30.                         id_bubbles.width=rand3*6+4  //泡泡直径
  31.                         id_bubbles.x=rand1*id_rootRect.width
  32.                         id_bubbles.y=rand2*id_rootRect.height//出发位置
  33.                     }
  34.                     else
  35.                     {
  36.                         //向中心移动
  37.                         if(id_bubbles.x<c_x-5)id_bubbles.x+=1
  38.                         else if(id_bubbles.x>c_x+5)id_bubbles.x-=1
  39.                         
  40.                         if(id_bubbles.y<c_y-5)id_bubbles.y+=1
  41.                         else if(id_bubbles.y>c_y+5)id_bubbles.y-=1
  42.                     }
  43.                 }
  44.             }
  45.         }
  46.     }

六、开关栏

        这部分比较简单了，就是一个图片按钮，根据开关状态改变颜色，具体代码如下。代码里的ImageButton01是自定义的图片按钮，是图片跟鼠标的结合，这样在按下的时候会放大一下图片，有个动态感。可以看到，按下之后在槽函数里会直接调用后端函数theMainInterface.setSwitchState(!switchState)  进行开关设置。

  1. import QtQuick 2.7
  2.  
  3. Rectangle {
  4.     
  5.     property var switchState: 0
  6.     radius: 10
  7.     width: parent.width
  8.     height: 90
  9.     
  10.     ImageButton01
  11.     {
  12.         id: id_switchImage
  13.         imgSrc: "qrc:/imagesRC/images/off.png"
  14.         height: parent.height*0.5
  15.         width: height
  16.         anchors
  17.         {
  18.             verticalCenter:parent.verticalCenter
  19.             left:parent.left
  20.             leftMargin:height*0.2
  21.         }
  22.         onSiqClickedLeft: 
  23.         {
  24. //            switchState=!switchState
  25.  
  26.             theMainInterface.setSwitchState(!switchState)
  27.         }
  28.     }
  29.     
  30.     Connections
  31.     {
  32.         target: theMainInterface
  33.         onSiqUpdateSwitchState:
  34.         {
  35.             switchState=state
  36.             if(switchState>0)
  37.             {
  38.                 id_switchImage.imgSrc="qrc:/imagesRC/images/on.png"
  39.             }
  40.             else
  41.             {
  42.                 id_switchImage.imgSrc="qrc:/imagesRC/images/off.png"
  43.             }
  44.         }
  45.     }
  46.     
  47. }

七、调速栏

        这里的难点是在于如何自定义滑块的样式，因为默认的样式跟米家APP不一样，那就要自己定义了，自定义的过程主要是位置的细节要自己好好琢磨计算下，不然会出现奇怪的效果。这里就只贴这部分的代码了。

  1.     Slider {
  2.         id:id_speedSlider
  3.         width: parent.width*0.9
  4.         height: parent.height*0.45
  5.         anchors
  6.         {
  7.             horizontalCenter:parent.horizontalCenter
  8.             bottom:parent.bottom
  9.             bottomMargin:10
  10.         }
  11.         enabled: switchState
  12.         from: 0  // 滑动条的起始值
  13.        value: 50 // 滑动条的当前值
  14.        to: 100   // 滑动条的结束值
  15.        stepSize: 1 // 滑动条的步长
  16.        background: Rectangle{  //背景
  17.            id:id_backRect
  18.             height: id_speedSlider.height
  19.             width: id_speedSlider.width//+height
  20.             
  21.             radius: height/2
  22.             color: "#F0F0F0"
  23.             anchors.centerIn: id_speedSlider
  24.             Rectangle {//左边填充
  25.                 height: id_backRect.height
  26.                 width: id_speedSlider.visualPosition * (parent.width-parent.height)+height
  27.                 anchors
  28.                 {
  29.                     left:parent.left
  30.                     verticalCenter:parent.verticalCenter
  31.                 }
  32.                 color: funTakeSliderColor()
  33.                 radius: height/2
  34.             }
  35.        }
  36.        
  37.        handle: Rectangle//滑块
  38.        {
  39.             height:id_backRect.height*0.85
  40.             width:height
  41.             radius:height/2
  42.             x:id_speedSlider.height/2+id_speedSlider.visualPosition * (parent.width-parent.height)-height/2
  43.             anchors.verticalCenter:parent.verticalCenter
  44.        }
  45.        
  46.        onMoved: 
  47.        {
  48.             theMainInterface.setFanSpeed(id_speedSlider.visualPosition)
  49.        }
  50.        
  51.     }

        自定义内容主要就是背景background和滑块handle两个属性，这里先说背景，就是APP上灰色部分，实际上这个背景直径铺满了整个Slider对象，只不过又加上了左边动态填充的部分，填充部分的宽度计算是个重点，其实就是滑动距离再加上圆弧直径就是填充部分的长度了。这里填充颜色我们也是根据污染等级进行关联的，米家APP上好像没有。

        剩下就是滑块白色圆圈的位置计算了，首先滑到0的时候，也就是最左边，它应该跟填充部分同心，这时候绿色是一个圆环，因为白色滑块的直径比较小，根据这点，我们可以先确定起始偏移是背景高度的一半，即id_speedSlider.height/2；然后如果滑到1的位置，也就是最右端，白圈应该与右侧圆弧同心，可以计算两端圆心的距离是id_speedSlider.width-id_speedSlider.height，这时候是白圈矩形左顶点的x坐标，我们需要的是白圈中心，所以还要减去自身的半径height/2，所以整体的白圈的x坐标如下图所示。

        对于后端调用部分，只要滑动滑块就会产生moved信号，这时候可以直接调用后端速度设置函数，id_speedSlider.visualPosition是0~1的范围，代表滑动百分比，其余由后端程序处理即可。

        最后是适用面积的问题，在滑动的时候会变化，具体小米是怎么计算的没有深入研究，自己大概自定义了一个。

八、安卓编译

        安卓编译的前提是环境要搭好，这在第二篇的时候有说明了，安装好后选择安卓套件，再点击锤子或者三角形都行，点击三角形时候要打开安卓手机的USB调试再接到电脑，这样APP编译好后就可以直接安装在手机里了。

     

          到此，整个前端乃至整个项目基本讲解完成了，如有疑问或者错误，请留言，欢迎讨论。

  本项目的交流QQ群:701889554

   写于2024-4-3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/418243
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号