做酒店工作去哪个招聘网站好人民日报新闻消息

前言

这期我们再来做个简单的Qt项目，这个项目是可调节车能空调温度，开冷风或暖风，还能控制空调出风口方向，代码量挺长的，要搞两个控件文档，准备好相应图片。

结果展示

控制冷暖风

控制吹风口方向

工程文档

链接：https://pan.baidu.com/s/1XI8rDonXF5qVL04mDW93RQ
提取码：1111

自定义QuickSliderBar控件

该控件是可以调整空调的风力档位，主要还是得理解slider控件。

其中要绘画好的图片是这些控制档位的图片：

import QtQuick
import QtQuick.ControlsItem {id:rootproperty int value: 0property int imageWidth: 28property int imageHeight: 8property string midelSourceOn: ""property string midelSourceOff: ""property string leftSourceOn: ""property string leftSourceOff: ""property string rightSourceOn: ""property string rightSourceOff: ""Rectangle{width: parent.widthheight: parent.heightradius: height / 2color: "#90111111"}Row{id:rowwidth: parent.widthheight: parent.height/2anchors.centerIn: parentspacing: 4topPadding: root.height / 4Image{id:valueImage1width: root.imageWidthheight: root.imageHeightsource: (value >= 1) ? leftSourceOn : leftSourceOfffillMode: Image.PreserveAspectFitopacity: root.enabled ? 1 : 0.3}Image{id:valueImage2width: root.imageWidthheight: root.imageHeightsource: (value >= 2) ? midelSourceOn : midelSourceOfffillMode: Image.PreserveAspectFitopacity: root.enabled ? 1 : 0.3}Image{id:valueImage3width: root.imageWidthheight: root.imageHeightsource: (value >= 3) ? midelSourceOn : midelSourceOfffillMode: Image.PreserveAspectFitopacity: root.enabled ? 1 : 0.3}Image{id:valueImage4width: root.imageWidthheight: root.imageHeightsource: (value >= 4) ? midelSourceOn : midelSourceOfffillMode: Image.PreserveAspectFitopacity: root.enabled ? 1 : 0.3}Image{id:valueImage5width: root.imageWidthheight: root.imageHeightsource: (value >= 5) ? rightSourceOn : rightSourceOfffillMode: Image.PreserveAspectFitopacity: root.enabled ? 1 : 0.3}}Slider{id:slideranchors.fill: parentfrom: 0to:5stepSize: 1enabled: truez:row.z+1background: Rectangle{opacity: 0}handle: Rectangle{opacity: 0}onValueChanged: {if(value <= 0){root.value = 0}else if(value < stepSize * 2){root.value = 1}else if(value < stepSize * 3){root.value = 2}else if(value < stepSize * 4){root.value = 3}else if(value < stepSize * 5){root.value = 4}else{root.value = 5}}}
}

自定义QuickWind控件

这个控制就是控制粒子系统，发射器，粒子的图案。要搞清楚ParticleSystem这个控件。

import QtQuick
import QtQuick.Controls
import QtQuick.Particles
import Qt5Compat.GraphicalEffects
import QtQuick.ShapesParticleSystem{id:rootproperty int moveX: 0property int moveY: 0property color color: "white"property int offsetX: 0property int offsetY: 0property int emitterWidth: 80property int emitterHeight: 30property int value: 0property string source: ""ImageParticle{groups: ["fog"]source: root.sourceopacity: 0.03entryEffect: ImageParticle.ScalerotationVariation: 0color: root.colorcolorVariation: 0}Emitter{y: parent.height / 2anchors.horizontalCenter: parent.horizontalCenteremitRate: 500 * valuelifeSpan: 1000lifeSpanVariation: 1group: "fog"width: emitterWidthheight: emitterHeightsystem: rootsize: 50endSize: -1sizeVariation: 0velocity: TargetDirection{targetX: getTargetX()targetY: getTargetY()targetVariation: 100    //跟目标的偏离值magnitude: 200 * value * 0.5function getTargetX(){      //目标x坐标return root.moveX * 4 - offsetX}function getTargetY(){      //目标y坐标return root.moveY * 4 - offsetY}}}Turbulence{groups: ["fog"]width: parent.widthheight: parent.heightstrength: 50}
}

主工程文件

其中细节在代码中已详细注释。
这个主文件就是结合所有控件一起进行使用。

import QtQuick
import QtQuick.ControlsWindow {width: 1000height: 562visible: truetitle: qsTr("Hello World")property int leftTemperature: 26    //车内温度的值property int rightTemperature: 26property int leftPercentX: 0            //左边x坐标的偏离值，化为百分比，以下同理property int leftPercentY: 100          property int rightPercentX: 100property int rightPercentY: 100property int xStepSize: leftRect.width / 100property int yStepSize: leftRect.height / 100//不同温度的粒子颜色property var colorArray: ["#5055AAFF", "#5077BBF8", "#5088BBF0","#5099CCEE", "#5099DDEE", "#50AAEEEE","#50BBEEEE", "#50CCDDEE", "#50DDDDFF","#50EEEEFF", "#50FFFFFF", "#50FFEEEE","#50FFDDDD", "#50FFCCCC", "#50EEBBBB","#50EEAAAA", "#50EE9999"]Image{      //整张背景图片id:backgroundsource: "images/AITO_M9.jpg"anchors.fill: parentfillMode: Image.PreserveAspectFit}Rectangle{  //左边调整出风口方向矩形区域id:leftRectwidth: 340height: 300x:170y:140color: "#2011AA11"visible: false}Rectangle { //右边调整出风口方向矩形区域id: rightRectwidth: 340height: 300x: 510y: 140color: "#20AA1111"visible: false}MouseArea{  //鼠标控制区域id:leftMouseAreawidth: rightRect.widthheight: rightRect.heightx:leftRect.xy:leftRect.yz:background.z + 1  //控制区域一定要比背景图片高，否则会被覆盖onPositionChanged: {if(mouse.x < 0) leftPercentX = 0;else if(mouse.x >leftRect.width ) leftPercentX = 100else leftPercentX = mouse.x / xStepSizeif(mouse.y < 0){leftPercentY = 0}else if(mouse.y > leftMouseArea.height){leftPercentY = 100}else{leftPercentY = mouse.y / yStepSize}}}MouseArea {id: rightMouseAreawidth: rightRect.widthheight: rightRect.heightx: rightRect.xy: rightRect.yz: background.z + 1onPositionChanged: {if(mouse.x < 0){rightPercentX = 0}else if(mouse.x > rightMouseArea.width){rightPercentX = 100}else{rightPercentX = mouse.x / xStepSize}if(mouse.y < 0){rightPercentY = 0}else if(mouse.y > rightMouseArea.height){rightPercentY = 100}else{rightPercentY = mouse.y / yStepSize}console.log("rightPercentX: " + rightPercentX + " rightPercentY: " + rightPercentY)}}QuickWind{  //左边出风口控件id:leftOutletWindwidth: 240height: 200emitterWidth: 60emitterHeight: 20source: "images/fog.png"x:350y:250z:leftRect.z + 1moveX: leftPercentXmoveY: leftPercentYoffsetX: 400offsetY: 100value: leftWindSlider.valuecolor: getColor()function getColor(){switch(leftTemperature){case 16: return colorArray[0]case 17: return colorArray[1]case 18: return colorArray[2]case 19: return colorArray[3]case 20: return colorArray[4]case 21: return colorArray[5]case 22: return colorArray[6]case 23: return colorArray[7]case 24: return colorArray[8]case 25: return colorArray[9]case 26: return colorArray[10]case 27: return colorArray[11]case 28: return colorArray[12]case 29: return colorArray[13]case 30: return colorArray[14]case 31: return colorArray[15]case 32: return colorArray[16]}}}QuickWind{id:rightOutletWindwidth: 240height: 200emitterWidth: 60emitterHeight: 20source: "images/fog.png"x:450y:250z:rightRect.z + 1moveX: rightPercentXmoveY: rightPercentYoffsetX: 0offsetY: 100value: rightWindSlider.valuecolor: getColor()function getColor(){switch(rightTemperature){case 16: return colorArray[0]case 17: return colorArray[1]case 18: return colorArray[2]case 19: return colorArray[3]case 20: return colorArray[4]case 21: return colorArray[5]case 22: return colorArray[6]case 23: return colorArray[7]case 24: return colorArray[8]case 25: return colorArray[9]case 26: return colorArray[10]case 27: return colorArray[11]case 28: return colorArray[12]case 29: return colorArray[13]case 30: return colorArray[14]case 31: return colorArray[15]case 32: return colorArray[16]}}}QuickSliderBar{id:leftWindSliderwidth: 196height: 30anchors.top: parent.topanchors.topMargin: 60anchors.left: parent.leftanchors.leftMargin: 200enabled: trueopacity: enabled ? 1 : 0.3imageWidth: 28imageHeight: 8midelSourceOn: "images/midelSourceOn.png"          //不同空调档位的图片设置midelSourceOff: "images/midelSourceOff.png"leftSourceOn: "images/leftSourceOn.png"leftSourceOff: "images/leftSourceOff.png"rightSourceOn: "images/rightSourceOn.png"rightSourceOff: "images/rightSourceOff.png"value:3}QuickSliderBar {id: rightWindSliderwidth: 196height: 30anchors.top: parent.topanchors.topMargin: 60anchors.right: parent.rightanchors.rightMargin: 130enabled: truevisible: trueopacity: enabled ? 1 : 0.3imageWidth: 28imageHeight: 8midelSourceOn: "images/midelSourceOn.png"midelSourceOff: "images/midelSourceOff.png"leftSourceOn: "images/leftSourceOn.png"leftSourceOff: "images/leftSourceOff.png"rightSourceOn: "images/rightSourceOn.png"rightSourceOff: "images/rightSourceOff.png"value: 3}Row{width: 200height: 50anchors.top: leftWindSlider.bottomanchors.topMargin: 10anchors.left: parent.leftanchors.leftMargin: 180Button{     //控制空调温度的四个按钮width: 50height: 50opacity: down ? 0.3 : 1hoverEnabled: falsebackground: Image{width: parent.width * 0.7height: parent.height * 0.7anchors.centerIn: parentsource: "images/Arrow_Left.png"fillMode: Image.PreserveAspectFit}onClicked: {if(leftTemperature > 16) leftTemperature--}}Label{id:leftTemperatureLabelwidth: 100height: 50text: leftTemperature + "℃"font.pixelSize: 40font.bold: truecolor: "white"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}Button{width: 50height: 50opacity: down ? 0.3 : 1hoverEnabled: falsebackground: Image{width: parent.width * 0.7height: parent.height * 0.7anchors.centerIn: parentsource: "images/Arrow_Right.png"fillMode: Image.PreserveAspectFit}onClicked: {if(leftTemperature < 32) leftTemperature++}}}Row {width: 200height: 50anchors.top: rightWindSlider.bottomanchors.topMargin: 10anchors.right: parent.rightanchors.rightMargin: 150Button {width: 50height: 50opacity: down ? 0.3 : 1hoverEnabled: falsebackground: Image {width: parent.width * 0.7height: parent.height * 0.7anchors.centerIn: parentsource: "images/Arrow_Left.png"fillMode: Image.PreserveAspectFit}onClicked: {if(rightTemperature > 16){rightTemperature -= 1}}}Label {id: rightTemperatureLabelwidth: 100height: 50text: rightTemperature + "℃"font.pixelSize: 40font.bold: truecolor: "white"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}Button {width: 50height: 50opacity: down ? 0.3 : 1hoverEnabled: falsebackground: Image {width: parent.width * 0.7height: parent.height * 0.7anchors.centerIn: parentsource: "images/Arrow_Right.png"fillMode: Image.PreserveAspectFit}onClicked: {if(rightTemperature < 32){rightTemperature += 1}}}}
}

结语

Qt开发它就是一个框架，它里面很多东西不难理解，但是控件很多要学会看帮助文档，没有其他技巧，唯手熟尔。

希望大家可以一键三连，后续我们一起学习，谢谢大家！！！