QML QT6自定义开关控件 Switch

最新推荐文章于 2025-03-17 08:00:00 发布
最新推荐文章于 2025-03-17 08:00:00 发布
阅读量902 收藏 8
点赞数 22
分类专栏： QT6 QML demo C++ 基础知识 文章标签： 前端 服务器 c++ qt javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50373827/article/details/142259632
版权

自定义开关控件，效果一般，相互学习，谢谢。源码和示例如下：

Custom Switch Examples

import QtQuick 2.15
import QtQuick.Controls 2.15
 

ApplicationWindow {
 

    visible: true
 

    width: 300
 

    height: 600
 

    title: "Custom Switch Examples"
 

 

    property bool switchChecked: false
 

 

    Row {
 

        spacing: 100
 

        anchors.centerIn: parent
 

 

        Column {
 

            spacing: 50
 

 

            Text {
 

                text: "卡通风格的开关"
 

                font.family: "Arial"
 

                font.bold: true
 

                font.pixelSize: 24
 

                color: "#333333"
 

                anchors.horizontalCenter: parent.horizontalCenter
 

            }
 

 

 

            Rectangle {
 

                width: 80
 

                height: 40
 

                radius: 20
 

                color: switchChecked ? "#4CAF50" : "#CCCCCC"
 

                border.color: "black"
 

                border.width: 1
 

 

                // Handle
 

                Rectangle {
 

                    width: 35
 

                    height: 35
 

                    radius: 17.5
 

                    color: switchChecked ? "white" : "gray"
 

                    border.color: "black"
 

                    border.width: 1
 

                    x: switchChecked ? parent.width - width - 5 : 5
 

                    y: (parent.height - height) / 2
 

                    // Add text inside the handle
 

                    Text {
 

                        anchors.centerIn: parent
 

                        text: switchChecked ? "开" : "关"
 

                        color: switchChecked ? "black" : "white"
 

                        font.bold: true
 

                        font.pixelSize: 14
 

                    }
 

                    Behavior on x {
 

                        NumberAnimation { duration: 200 }
 

                    }
 

                }
 

 

                MouseArea {
 

                    anchors.fill: parent
 

                    onClicked: switchChecked = !switchChecked
 

                }
 

            }
 

 

 

            Rectangle {
 

                width: 80
 

                height: 40
 

                radius: 20
 

                color: switchChecked ? "#3F51B5" : "#B0BEC5"
 

                border.color: "black"
 

                border.width: 1
 

 

                // Handle with shadow
 

                Rectangle {
 

                    width: 35
 

                    height: 35
 

                    radius: 17.5
 

                    color: switchChecked ? "white" : "#FFC107"
 

                    border.color: "black"
 

                    border.width: 1
 

                    x: switchChecked ? parent.width - width - 5 : 5
 

                    y: (parent.height - height) / 2
 

                    // Add text inside the handle
 

                    Text {
 

                        anchors.centerIn: parent
 

                        text: switchChecked ? "开" : "关"
 

                        color: switchChecked ? "black" : "black"
 

                        font.bold: true
 

                        font.pixelSize: 14
 

                    }
 

                    Behavior on x {
 

                        NumberAnimation { duration: 200 }
 

                    }
 

                }
 

 

                MouseArea {
 

                    anchors.fill: parent
 

                    onClicked: switchChecked = !switchChecked
 

                }
 

            }
 

 

 

            Rectangle {
 

                width: 80
 

                height: 40
 

                radius: 20
 

                color: switchChecked ? "#BBDEFB" : "#E0E0E0"
 

                border.color: "black"
 

                border.width: 1
 

 

                // Handle
 

                Rectangle {
 

                    width: 35
 

                    height: 35
 

                    radius: 17.5
 

                    color: switchChecked ? "#2196F3" : "#FFFFFF"
 

                    border.color: switchChecked ? "#1976D2" : "#B0BEC5"
 

                    border.width: 2
 

                    x: switchChecked ? parent.width - width - 5 : 5
 

                    y: (parent.height - height) / 2
 

                    // Add text inside the handle
 

                    Text {
 

                        anchors.centerIn: parent
 

                        text: switchChecked ? "开" : "关"
 

                        color: switchChecked ? "white" : "black"
 

                        font.bold: true
 

                        font.pixelSize: 14
 

                    }
 

                    Behavior on x {
 

                        NumberAnimation { duration: 200 }
 

                    }
 

                }
 

 

                MouseArea {
 

                    anchors.fill: parent
 

                    onClicked: switchChecked = !switchChecked
 

                }
 

            }
 

 

 

            Rectangle {
 

                width: 80
 

                height: 40
 

                radius: 20
 

                color: switchChecked ? "#E91E63" : "#B0BEC5"
 

                border.color: "black"
 

                border.width: 1
 

 

                // Handle with gradient
 

                Rectangle {
 

                    width: 35
 

                    height: 35
 

                    radius: 17.5
 

                    color: "white"
 

                    border.color: "black"
 

                    border.width: 1
 

                    x: switchChecked ? parent.width - width - 5 : 5
 

                    y: (parent.height - height) / 2
 

                    gradient: Gradient {
 

                        GradientStop { position: 0.0; color: switchChecked ? "#FF9800" : "#FF5722" }
 

                        GradientStop { position: 1.0; color: switchChecked ? "#FF5722" : "#FF9800" }
 

                    }
 

                    // Add text inside the handle
 

                    Text {
 

                        anchors.centerIn: parent
 

                        text: switchChecked ? "开" : "关"
 

                        color: "black"
 

                        font.bold: true
 

                        font.pixelSize: 14
 

                    }
 

                    Behavior on x {
 

                        NumberAnimation { duration: 200 }
 

                    }
 

                }
 

 

                MouseArea {
 

                    anchors.fill: parent
 

                    onClicked: switchChecked = !switchChecked
 

                }
 

            }
 

        }
 

 

        Column {
 

            spacing: 50
 

 

            Text {
 

                text: "自定义的开关"
 

                font.family: "Arial"
 

                font.bold: true
 

                font.pixelSize: 24
 

                color: "#333333"
 

                anchors.horizontalCenter: parent.horizontalCenter
 

            }
 

 

            ListModel {
 

                id: switchModel
 

                ListElement { label: "Wi-Fi"; style: "circle" }
 

                ListElement { label: "Wi-Fi"; style: "text" }
 

                ListElement { label: "Wi-Fi"; style: "textWithLabel" }
 

                ListElement { label: "Bluetooth"; style: "modern" }
 

            }
 

 

            Repeater {
 

                model: switchModel
 

 

                Rectangle {
 

                    width: 100
 

                    height: 40
 

                    radius: height / 2
 

                    color: {
 

                        switch (model.style) {
 

                        case "circle":
 

                            return switchChecked ? "lightgreen" : "lightcoral";
 

                        case "text":
 

                            return switchChecked ? "lightyellow" : "lightgray";
 

                        case "textWithLabel":
 

                            return switchChecked ? "#D3F8D3" : "#F8D3D3";
 

                        case "modern":
 

                            return switchChecked ? "#4CAF50" : "#B0BEC5";
 

                        default:
 

                            return "gray";
 

                        }
 

                    }
 

                    border.color: "gray"
 

                    border.width: 1
 

 

                    // Handle
 

                    Rectangle {
 

                        width: 35
 

                        height: 35
 

                        radius: 17.5
 

                        color: "white"
 

                        border.color: "black"
 

                        border.width: 1
 

                        x: switchChecked ? parent.width - width - 5 : 5
 

                        y: (parent.height - height) / 2
 

 

                        // Add text inside the handle
 

                        Text {
 

                            anchors.centerIn: parent
 

                            text: switchChecked ? "开" : "关"
 

                            color: "black"
 

                            font.bold: true
 

                            font.pixelSize: 14
 

                        }
 

                        Behavior on x {
 

                            NumberAnimation { duration: 200 }
 

                        }
 

                    }
 

 

                    MouseArea {
 

                        anchors.fill: parent
 

                        onClicked: switchChecked = !switchChecked
 

                    }
 

                }
 

            }
 

        }
 

 

        Column {
 

            spacing: 50
 

 

            Text {
 

                text: "系统默认开关"
 

                font.family: "Arial"
 

                font.bold: true
 

                font.pixelSize: 24
 

                color: "#333333"
 

                anchors.horizontalCenter: parent.horizontalCenter
 

            }
 

 

            Switch {
 

                text: qsTr("Wi-Fi")
 

                checked: switchChecked
 

            }
 

            Switch {
 

                text: qsTr("Bluetooth")
 

                checked: switchChecked
 

            }
 

            Switch {
 

                text: qsTr("Wi-Fi")
 

                checked: switchChecked
 

            }
 

            Switch {
 

                text: qsTr("Bluetooth")
 

                checked: switchChecked
 

            }
 

        }
 

    }
 

}
 


                

        

    

  



    



                



	

		

			

				
					
Qt5(C++)高级篇之6：QML常用控件自定义组件及多媒体入门

				
			

			

				

					福优学苑@音视频+流媒体
				

				

					12-06
					
					1092
					
				

			

		

		

			
				
课程目标：

学习QML的标准控件编程和自定义组件编程，包括美化效果，并动手实践，自己写出代码

课程简介：

1.带领您深入学习QT5/C++：QML常用控件编程、QML的多媒体入门、逐步提升Qml编程水平。
2.所有章节均有理论知识介绍、接口讲解、实例代码讲解，讲解过程中不断穿插老师在开发过程中遇到的问题及解决方法（可以下载所有的电子课件与源码）。





课程大纲-Qt5(C++)高级篇之6：QML常用控件自定义组件及多媒体入门资料下载
第1章 QML的标准控件系列之1 (1小时23分钟 7节)



			
		

	



                

            
              



	

		

			

				
					
Qt 之自定义控件（开关按钮）

				
			

			

				

					皮牙子快跑的博客
				

				

					09-26
					
					883
					
				

			

		

		

			
				
在鼠标点击时间中，根据当前按钮的状态，true是打开，false是关闭，改变动画移动的方向，并且改变背景颜色，已经圆形按钮的颜色。利用动画类QPropertyAnimation，点击按钮时，背景色和圆形按钮在一定时间内移动到对面。注意圆形按钮和背景色控件的初始大小一样。

			
		

	



              


  
              

                


	

		

			

				
					
Qt6自定义QML控件的方式

				
			

			

				

					北辰的博客
				

				

					01-16
					
					1208
					
				

			

		

		

			
				
Qt6 自定义QML控件

			
		

	





	

		

			

				
					
QML 委托控件：ItemDelegate、CheckDelegate、RadioDelegate、SwitchDelegate

					
最新发布

				
			

			

				

					u011186532的专栏
				

				

					03-17
					
					989
					
				

			

		

		

			
				
在QML的QtQuick.Controls模块中，委托（Delegate）控件是构建动态列表和交互式UI的关键组件。本文将深入解析四种常用委托控件：ItemDelegate、CheckDelegate、RadioDelegate和SwitchDelegate，帮助开发者快速掌握其特性与使用场景。

			
		

	



		

			
		



	

		

			

				
					
QML自定义开关Switch

				
			

			

				

					weixin_43248755的博客
				

				

					08-08
					
					3688
					
				

			

		

		

			
				
1.QML基本控件Switch
在QtQuick.Controls 2 中，已经有了Qt官方提供的开关控件，而且还带有过渡动画，但是可能颜色有些不美观,研究了一下入如何自定义一个开关以供以后使用
2.自定义开关控件，改变其样式
首先来看原生样式：

其源代码为：
    Switch{
        id : switch1
        text: closeState
        onCheckedChanged: {
            switch1.text = switch1.che

			
		

	





	

		

			

				
					
1. QML封装控件---开关按钮

				
			

			

				

					山间点烟雨
				

				

					01-20
					
					514
					
				

			

		

		

			
				
自制开关按钮

			
		

	





	

		

			

				
					
【QT教程】QT6 QML编程

				
			

			

				

					QT性能优化QT原理源码QT界面美化
				

				

					04-09
					
					2196
					
				

			

		

		

			
				
QT6概述QT6概述QT6是Qt Company发布的最新版本的Qt框架，这是一个跨平台的C++图形用户界面应用程序开发框架。Qt框架广泛应用于开发具有原生性能的应用程序，支持多种操作系统，如Windows、Mac OS、Linux、iOS和Android等。QT6带来了许多新特性和改进，使得开发者能够更加高效地开发高质量的应用程序。QT6的主要特性QT6的主要特性可以总结为以下几点,全新的Qt Quick Compiler。

			
		

	





	

		

			

				
					
一套完整的强大的qml自定义控件

				
			

			

				

					04-20
				

			

		

		

			
				
一套完整的自定义的qmlGUI控件，功能强大完全可以拿去开发项目而不用重复造轮子。包括Button，Calendar，CheckBox，ComboBox，CtrlDialog，DateEdit，DatePicker，Dialog，FileDialog，ImageButton，Label，LineEdit...

			
		

	





	

		

			

				
					
基于QT的switch开关

				
			

			

				

					06-08
				

			

		

		

			
				
在本场景中，我们将深入探讨如何使用QML实现一个基于QT的switch开关。  QML允许开发者用JSON-like语法描述UI元素及其行为，这使得设计和编程分离，使得界面设计更加直观。在QML中，我们可以轻松地定义和操纵各种组件...

			
		

	





	

		

			

				
					
qml自定义switch_树莓派Qt系列教程25：Dial和Switch

				
			

			

				

					weixin_31827003的博客
				

				

					01-12
					
					1235
					
				

			

		

		

			
				
前言这一节继续为大家讲解QML中一些比较有意思的控件。这一节我们要说的控件是拨盘旋钮Dial和控件滑动开关Switch。拨盘旋钮 Dial拨盘旋钮类似于立体声或工业设备等设备上的传统拨盘旋钮。它允许用户在一个范围内指定一个值。这样一看，它的功能似乎和之前的滑块Slider相似。但是，Dial的效果更加立体，更接近现实载体上的旋钮。其刻度盘的值通过value属性设置。范围是使用from和to属性设置...

			
		

	





	

		

			

				
					
QML实现安卓风格开关按钮

				
			

			

				

					10-25
				

			

		

		

			
				
用比较简单的方法实现了安卓风格的开关按钮，用QML实现的，没用画板Canvas，点击可用切换开和关

			
		

	





	

		

			

				
					
Qml之基本控件

				
			

			

				

					热土程序园，利他愉己~
				

				

					12-04
					
					1297
					
				

			

		

		

			
				
Qml之基本控件

			
		

	





	

		

			

				
					
Qt基于Qml选择开关示例

				
			

			

				

					
				

				

					11-02
					
					476
					
				

			

		

		

			
				
Qt基于Qml选择开关示例

			
		

	





	

		

			

				
					
qml 纯代码实现漂亮的switch控件

				
			

			

				

					一个老菜鸟的学习分享
				

				

					03-19
					
					2205
					
				

			

		

		

			
				
qml 纯代码实现漂亮的switch控件

			
		

	





	

		

			

				
					
qml自定义switch_qml: 自定义滚动条；

				
			

			

				

					weixin_42512096的博客
				

				

					12-30
					
					297
					
				

			

		

		

			
				
注： 该博文为原创博文，转载请注明，摘用请随意；qml自带的滚动条不太好用；首先，利用canvas绘制滚动条两端的箭头:import QtQuick 2.0Canvas {width: 20;height: 20;property real dir: 0;                   //0: up;  1: right;  2: down; 3: left;onPaint: {var ...

			
		

	





	

		

			

				
					
CMake使用qt+QML

				
			

			

				

					weixin_46030792的博客
				

				

					03-12
					
					391
					
				

			

		

		

			
				
可以在指定路径下找到workerscriptplugin.dll文件，但是报错是因为缺失依赖文件，可用depends查看dll依赖，将对应dll文件复制到执行目录下。qt_standard_project_setup(REQUIRES ${QT_VERSION_1})函数会自动将一堆qml模块的东西整合到一个文件夹中。4、使用qt_standard_project_setup(REQUIRES ${QT_VERSION_1})函数。6、成功启动必备，快速复制所需要的dll文件（windows）

			
		

	





	

		

			

				
					
QML_Switch控件_3选2的控制算法

				
			

			

				

					会选科技的博客
				

				

					07-12
					
					601
					
				

			

		

		

			
				
见面中三个Switch控件，要求只能选中其中两个。

			
		

	





	

		

			

				
					
06 Qt自绘组件：Switch动画开关组件

				
			

			

				

					进击的程序员
				

				

					02-24
					
					3263
					
				

			

		

		

			
				
开关控件（Switch Control）不在Qt基本组件库里面，但是在我们的日常业务开发中极其常见。开关控件通常用于在用户界面中表示两种状态（打开和关闭、开和关等），用户可以通过点击或拖动来切换状态。然而， 如果单纯的根据两种状态进行Icon的切换又略显单调些，所以本篇想向大家分享的是具有开关动画效果的Switch按钮组件！既聊代码也说思路，我们开始今天的动画Swich动画开关组件的分享！1.为了沿用Qt 按钮组件的基本功能接口，所以我们继承的基类应该选择。

			
		

	





	

		

			

				
					
打造高效QML自定义控件库，简化GUI开发流程

				
			

			

				

					
				

			

		

		

			
				
- **Switch**：开关控件，用于切换开启和关闭状态。 - **TabBox**：标签页控件，用于在不同的内容之间进行切换。 - **TextField**：多行文本编辑控件，允许用户编辑多行文本。 - **TextInput**：文本输入控件，是...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值