当前位置: 首页 > article >正文

QML项目实战:自定义Switch按钮

目录

一.添加模块

1.QtQuick.Controls 2.1

2.QtGraphicalEffects 1.12

二.自定义Switch

三.标签

四.效果

五.代码


一.添加模块

1.QtQuick.Controls 2.1

  • QtQuick.Controls 提供了一组预定义的 UI 控件,这些控件可以用于构建现代、响应式的用户界面。
  • 它包括按钮、标签、文本框、滑块、列表视图等常见的 UI 元素。

2.QtGraphicalEffects 1.12

  • QtGraphicalEffects 提供了一组图形效果,可以在 QML 中应用到任何可视化项目上,如图像、视频或其他 UI 元素。
  • 它包括模糊、阴影、颜色调整、光照等效果。

二.自定义Switch

1.Switch 控件定义了一个自定义的指示器,根据 Switch 的状态(选中或未选中),矩形的颜色会发生变化。

2.指示器内部定义了一个滑块,它的初始位置取决于 Switch 的状态。滑块的颜色也会根据状态变化。

3.为滑块的位置变化添加了一个动画效果,使其在状态切换时平滑移动。

4.阴影效果

5.checked

三.标签

四.效果

五.代码

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Switch{
        id: _Switch
        anchors.centerIn: parent
        width: 140
        height: 50
        //checked:
        indicator: Rectangle {
            anchors.fill: parent
            width: 140
            height: 50
            radius: 25
            color: _Switch.checked ? "#2C62FF" : "#D7E1F0"
            border.width: 2
            border.color: "white"
            // border.color: _Switch.checked ? checkedColor : "#E5E5E5"
            Rectangle {
                x: _Switch.checked ? parent.width - width - 5 : 5
                width: 38
                height: width
                radius: 20
                anchors.verticalCenter: parent.verticalCenter
                color: _Switch.checked ?  " white" : "#97ACC8"

                Behavior on x {
                    NumberAnimation { duration: 200 }
                }
            }
            layer.enabled:          true
            layer.effect: DropShadow {
                verticalOffset: 4
                radius: 8
                samples: 10
                color: "#4d000f43"
            }
        }
        onCheckedChanged: {
            _Label.text = _Switch.checked
        }
    }

    Label{
        id:_Label
        anchors.top: _Switch.bottom
        anchors.topMargin: 30
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 45
        text: "我是一个标签"
    }
}


http://www.kler.cn/a/381205.html

相关文章:

  • 【GO环境安装】mac系统+GoLand使用
  • 使用Vue+Django开发的旅游路书应用
  • Leetcode 3393. Count Paths With the Given XOR Value
  • Java内存区域进一步详解
  • 利用Gurobi追溯模型不可行原因的四种方案及详细案例
  • 2.6 网络面试问题
  • 【毫米波雷达(三)】汽车控制器启动流程——BootLoader
  • NewStar easygui re wp
  • 常见用于从 HTTP 请求中提取数据的注解
  • 使用VBA宏合并多个Excel文件的Sheet页
  • 【unique_str 源码学习】
  • 【Clikhouse 探秘】ClickHouse 物化视图:加速大数据分析的新利器
  • 小菜家教平台:基于SpringBoot+Vue打造一站式学习管理系统
  • 单链表的实现(数据结构)
  • 成为编程高手 day16
  • Python小白学习教程从入门到入坑------第二十五课 多态(语法进阶)
  • Vue.js 提供了一个事件系统,允许组件之间通过自定义事件进行通信
  • golang安装,常用框架安装,记忆点
  • ChatGPT o1与GPT-4o、Claude 3.5 Sonnet和Gemini 1.5 Pro的比较
  • 【Winform使用DataGridView实现表格数据的添加,编辑、删除、分页功能】
  • 【Go语言】| 第1课:Golang安装+环境配置+Goland下载
  • 基于Python的自然语言处理系列(50):Soft Prompt 实现
  • SAP 生产工单 bom组件 打删除标记
  • Spring Boot框架下的信息学科平台系统开发实战
  • SQL 常用更新操作
  • platform device的名字是怎么生成的?