当前位置： 首页 > news >正文

Qt开发——问界M9空调

news 来源：原创 2025/5/10 21:56:52

目录

  • 前言
  • 结果展示
    • 控制冷暖风
    • 控制吹风口方向
  • 工程文档
  • 自定义QuickSliderBar控件
  • 自定义QuickWind控件
  • 主工程文件
  • 结语

前言

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

结果展示

控制冷暖风

在这里插入图片描述

控制吹风口方向

在这里插入图片描述

工程文档

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

自定义QuickSliderBar控件

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

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

在这里插入图片描述

import QtQuick
import QtQuick.Controls

Item {
    id:root
    property int value: 0
    property int imageWidth: 28
    property int imageHeight: 8
    property string midelSourceOn: ""
    property string midelSourceOff: ""
    property string leftSourceOn: ""
    property string leftSourceOff: ""
    property string rightSourceOn: ""
    property string rightSourceOff: ""

    Rectangle{
        width: parent.width
        height: parent.height
        radius: height / 2
        color: "#90111111"
    }

    Row{
        id:row
        width: parent.width
        height: parent.height/2
        anchors.centerIn: parent
        spacing: 4
        topPadding: root.height / 4

        Image{
            id:valueImage1
            width: root.imageWidth
            height: root.imageHeight
            source: (value >= 1) ? leftSourceOn : leftSourceOff
            fillMode: Image.PreserveAspectFit
            opacity: root.enabled ? 1 : 0.3
        }

        Image{
            id:valueImage2
            width: root.imageWidth
            height: root.imageHeight
            source: (value >= 2) ? midelSourceOn : midelSourceOff
            fillMode: Image.PreserveAspectFit
            opacity: root.enabled ? 1 : 0.3
        }

        Image{
            id:valueImage3
            width: root.imageWidth
            height: root.imageHeight
            source: (value >= 3) ? midelSourceOn : midelSourceOff
            fillMode: Image.PreserveAspectFit
            opacity: root.enabled ? 1 : 0.3
        }

        Image{
            id:valueImage4
            width: root.imageWidth
            height: root.imageHeight
            source: (value >= 4) ? midelSourceOn : midelSourceOff
            fillMode: Image.PreserveAspectFit
            opacity: root.enabled ? 1 : 0.3
        }

        Image{
            id:valueImage5
            width: root.imageWidth
            height: root.imageHeight
            source: (value >= 5) ? rightSourceOn : rightSourceOff
            fillMode: Image.PreserveAspectFit
            opacity: root.enabled ? 1 : 0.3
        }
    }

    Slider{
        id:slider
        anchors.fill: parent
        from: 0
        to:5
        stepSize: 1
        enabled: true
        z:row.z+1

        background: 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.Shapes

ParticleSystem{
    id:root

    property int moveX: 0
    property int moveY: 0
    property color color: "white"
    property int offsetX: 0
    property int offsetY: 0
    property int emitterWidth: 80
    property int emitterHeight: 30
    property int value: 0
    property string source: ""

    ImageParticle{
        groups: ["fog"]
        source: root.source
        opacity: 0.03
        entryEffect: ImageParticle.Scale
        rotationVariation: 0

        color: root.color
        colorVariation: 0
    }

    Emitter{
        y: parent.height / 2
        anchors.horizontalCenter: parent.horizontalCenter
        emitRate: 500 * value
        lifeSpan: 1000
        lifeSpanVariation: 1
        group: "fog"

        width: emitterWidth
        height: emitterHeight
        system: root

        size: 50
        endSize: -1
        sizeVariation: 0

        velocity: TargetDirection{
            targetX: getTargetX()
            targetY: getTargetY()
            targetVariation: 100    //跟目标的偏离值
            magnitude: 200 * value * 0.5

            function getTargetX(){      //目标x坐标
                return root.moveX * 4 - offsetX
            }

            function getTargetY(){      //目标y坐标
                return root.moveY * 4 - offsetY
            }
        }
    }

    Turbulence{
        groups: ["fog"]
        width: parent.width
        height: parent.height
        strength: 50
    }
}

主工程文件

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

import QtQuick
import QtQuick.Controls

Window {
    width: 1000
    height: 562
    visible: true
    title: qsTr("Hello World")

    property int leftTemperature: 26    //车内温度的值
    property int rightTemperature: 26

    property int leftPercentX: 0            //左边x坐标的偏离值，化为百分比，以下同理
    property int leftPercentY: 100          
    property int rightPercentX: 100
    property int rightPercentY: 100
    property int xStepSize: leftRect.width / 100
    property 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:background
        source: "images/AITO_M9.jpg"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
    }

    Rectangle{  //左边调整出风口方向矩形区域
        id:leftRect
        width: 340
        height: 300
        x:170
        y:140
        color: "#2011AA11"
        visible: false
    }

    Rectangle { //右边调整出风口方向矩形区域
        id: rightRect
        width: 340
        height: 300
        x: 510
        y: 140
        color: "#20AA1111"
        visible: false
    }

    MouseArea{  //鼠标控制区域
        id:leftMouseArea
        width: rightRect.width
        height: rightRect.height
        x:leftRect.x
        y:leftRect.y
        z:background.z + 1  //控制区域一定要比背景图片高，否则会被覆盖

        onPositionChanged: {
            if(mouse.x < 0) leftPercentX = 0;
            else if(mouse.x >leftRect.width ) leftPercentX = 100
            else leftPercentX = mouse.x / xStepSize

            if(mouse.y < 0)
            {
                leftPercentY = 0
            }
            else if(mouse.y > leftMouseArea.height)
            {
                leftPercentY = 100
            }
            else
            {
                leftPercentY = mouse.y / yStepSize
            }
        }
    }

    MouseArea {
        id: rightMouseArea
        width: rightRect.width
        height: rightRect.height
        x: rightRect.x
        y: rightRect.y
        z: background.z + 1
        onPositionChanged: {
            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:leftOutletWind
        width: 240
        height: 200
        emitterWidth: 60
        emitterHeight: 20
        source: "images/fog.png"
        x:350
        y:250
        z:leftRect.z + 1
        moveX: leftPercentX
        moveY: leftPercentY
        offsetX: 400
        offsetY: 100
        value: leftWindSlider.value
        color: 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:rightOutletWind
        width: 240
        height: 200
        emitterWidth: 60
        emitterHeight: 20
        source: "images/fog.png"
        x:450
        y:250
        z:rightRect.z + 1
        moveX: rightPercentX
        moveY: rightPercentY
        offsetX: 0
        offsetY: 100
        value: rightWindSlider.value
        color: 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:leftWindSlider
        width: 196
        height: 30
        anchors.top: parent.top
        anchors.topMargin: 60
        anchors.left: parent.left
        anchors.leftMargin: 200
        enabled: true
        opacity: enabled ? 1 : 0.3
        imageWidth: 28
        imageHeight: 8
        midelSourceOn: "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: rightWindSlider
        width: 196
        height: 30
        anchors.top: parent.top
        anchors.topMargin: 60
        anchors.right: parent.right
        anchors.rightMargin: 130
        enabled: true
        visible: true
        opacity: enabled ? 1 : 0.3
        imageWidth: 28
        imageHeight: 8
        midelSourceOn: "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: 200
        height: 50
        anchors.top: leftWindSlider.bottom
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.leftMargin: 180

        Button{     //控制空调温度的四个按钮
            width: 50
            height: 50
            opacity: down ? 0.3 : 1
            hoverEnabled: false

            background: Image{
                width: parent.width * 0.7
                height: parent.height * 0.7
                anchors.centerIn: parent
                source: "images/Arrow_Left.png"
                fillMode: Image.PreserveAspectFit
            }

            onClicked: {
                if(leftTemperature > 16) leftTemperature--
            }
        }

        Label{
            id:leftTemperatureLabel
            width: 100
            height: 50
            text: leftTemperature + "℃"
            font.pixelSize: 40
            font.bold: true
            color: "white"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        Button{
            width: 50
            height: 50
            opacity: down ? 0.3 : 1
            hoverEnabled: false

            background: Image{
                width: parent.width * 0.7
                height: parent.height * 0.7
                anchors.centerIn: parent
                source: "images/Arrow_Right.png"
                fillMode: Image.PreserveAspectFit
            }

            onClicked: {
                if(leftTemperature < 32) leftTemperature++
            }
        }
    }

    Row {
        width: 200
        height: 50
        anchors.top: rightWindSlider.bottom
        anchors.topMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 150

        Button {
            width: 50
            height: 50
            opacity: down ? 0.3 : 1
            hoverEnabled: false

            background: Image {
                width: parent.width * 0.7
                height: parent.height * 0.7
                anchors.centerIn: parent
                source: "images/Arrow_Left.png"
                fillMode: Image.PreserveAspectFit
            }

            onClicked: {
                if(rightTemperature > 16)
                {
                    rightTemperature -= 1
                }
            }
        }

        Label {
            id: rightTemperatureLabel
            width: 100
            height: 50
            text: rightTemperature + "℃"
            font.pixelSize: 40
            font.bold: true
            color: "white"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        Button {
            width: 50
            height: 50
            opacity: down ? 0.3 : 1
            hoverEnabled: false

            background: Image {
                width: parent.width * 0.7
                height: parent.height * 0.7
                anchors.centerIn: parent
                source: "images/Arrow_Right.png"
                fillMode: Image.PreserveAspectFit
            }

            onClicked: {
                if(rightTemperature < 32)
                {
                    rightTemperature += 1
                }
            }
        }
    }
}

结语

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

在这里插入图片描述

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

相关文章：

  • 强化学习的一些概念
  • 运维面试题（三）
  • Java虚拟机面试题：内存管理（中）
  • 【java】集合练习2
  • Chapter 4-11. Troubleshooting Congestion in Fibre Channel Fabrics
  • Nest系列：在 NestJS 中使用 Joi 进行环境变量验证与配置管理-03
  • Navicat如何查看密码
  • Chrome 浏览器的很多扩展不能用了
  • 数字签名与非对称加密的区别
  • LLM论文笔记 24: A Theory for Length Generalization in Learning to Reason
  • AJAX PHP：深入理解与实际应用
  • 【WEB APIs】DOM-节点操作
  • 本地部署Deep Seek-R1，搭建个人知识库——笔记
  • Spring Boot使用线程池创建多线程
  • 人工智能驱动数字孪生城市的实践探索
  • 《AI生成文章SEO 长尾关键词下拉词相关词抓取工具 SEO 裂变工具：高效驱动网站流量增长》
  • qq音乐 webpack 补环境
  • Unity3D仿星露谷物语开发31之设置地面属性方法探索
  • K8S学习之基础三十一：k8s中RBAC 的核心概念
  • MySQL的行级锁锁的到底是什么?
  • 黄土是他们的气质：打破宁夏当代油画创作的沉寂
  • 中非民间对话在赞比亚举行
  • 71岁导演詹姆斯・弗雷病逝，曾执导《纸牌屋》、麦当娜MV
  • 东洋学人｜滨田青陵：近代日本考古学第一人
  • 早期投资人蜂巧资本清仓泡泡玛特套现超22亿港元，称基金即将到期
  • 外卖员投资失败负疚离家流浪，经民警劝回后泣不成声给父母下跪