效果图

核心代码

DarkSwitch.qml

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3Switch {id: controlindicator: Item{id: indicatorItemimplicitWidth: 135implicitHeight: 58x: control.leftPaddingy: parent.height / 2 - height / 2RectangularGlow {id: effectanchors.fill: boundaryRectglowRadius: 3spread: 0.2color: "black"cornerRadius: boundaryRect.radius + glowRadius}Item {id: srcanchors.fill: boundaryRectRectangle {anchors.centerIn: parentwidth: src.width - 2height: src.height - 2color: "#262626"radius: boundaryRect.radius}}InnerShadow {anchors.fill: srccached: truehorizontalOffset: 0verticalOffset: 0radius: 16samples: 32color: "#000000"smooth: truesource: src}Rectangle{id: boundaryRectanchors.fill: parentanchors.margins: 3border{color: "#515151"; width: 2}radius: 12color: "transparent"}Item{id: handlex: control.checked ? boundaryRect.x + boundaryRect.width - width + 2 : boundaryRect.x - 2y: parent.height / 2 - height / 2width: 70height: boundaryRect.heightBehavior on x{NumberAnimation{duration: 100}}RectangularGlow {id: handleEffectanchors.fill: handleRectglowRadius: 15spread: 0.2color: "#2e91ed"cornerRadius: handleRect.radius + glowRadius}Rectangle {id: handleRectradius: boundaryRect.radiusanchors.fill: parentborder{color: "#2e91ed"; width: 3}gradient: Gradient {GradientStop { position: 0.0; color: "#272727" }GradientStop { position: 0.33; color: "#2e2e2e" }GradientStop { position: 1.0; color: "#0c0c0c" }}}RowLayout{id: vLineRowanchors.centerIn: parentRepeater{model: 3delegate: vLineComp}}Component{id: vLineCompRectangle{id: vLinewidth: 5height: 24gradient: Gradient {GradientStop { position: 0.0; color: "#545454" }GradientStop { position: 1.0; color: "#2b2b2b" }}Rectangle{anchors.centerIn: parentwidth: 3height: 22gradient: Gradient {GradientStop { position: 0.0; color: "#2c2c2c" }GradientStop { position: 0.33; color: "#373737" }GradientStop { position: 1.0; color: "#1b1b1b" }}}}}}}
}

从中学习到什么

是个Switch类型，重定义Switch的indicator属性。
蓝色圆角矩形有光晕效果，且是向外发散的，可以采用RectangularGlow来实现。
黑色凹框有向内的阴影，这个可以用InnerShadow来实现。
光晕滑块上的黑色填充是渐变的，因此需要使用Rectangle的gradient属性。

Glow

Glow 效果会模糊光源的alpha通道，并使用颜色将其着色，然后将其放置在光源后面，从而在对象周围产生光晕或辉光。模糊边缘的质量可以通过采样samples和半径radius 来控制，发光强度可以通过spread 来改变。
Properties

cached : alias
color : alias
radius : alias
samples : alias
source :alias
spread : alias
transparentBorder : alias

Glow 是通过使用高斯模糊实时模糊图像创建的。执行blur live是一项成本高昂的操作。在高端图形硬件上，即使采样数适中，全屏高斯模糊也只能以每秒60帧的速度运行。
注意：使用OpenGL运行时，此效果可用。

RectangularGlow

矩形的Glow

InnerShadow

默认情况下，该效果会生成高质量的阴影图像，因此阴影的渲染速度可能不是最高的。渲染速度会降低，尤其是阴影边缘严重软化时。对于需要更快渲染速度且不需要最高视觉质量的用例，可以将属性 fast设置为true。

Properties

cached : bool
color : color
fast : bool
horizontalOffset : real
radius : real
samples : int
source : variant
spread : real
verticalOffset : real

  import QtQuick 2.12import QtGraphicalEffects 1.12Item {width: 300height: 300Rectangle {anchors.fill: parent}Image {id: butterflysource: "images/butterfly.png"sourceSize: Qt.size(parent.width, parent.height)smooth: truevisible: false}InnerShadow {anchors.fill: butterflyradius: 8.0samples: 16horizontalOffset: -3verticalOffset: 3color: "#b0000000"source: butterfly}}

感谢无私奉献的人

qml 纯代码实现漂亮的switch控件相关推荐

html页面美化代码时间,CSS+JS美化过漂亮的日历控件
CSS+JS美化过漂亮的日历控件 - www.webdm.cn var months = new Array("一", "二", "三",& ...
php万圣节源码,如何使用纯CSS实现万圣节的toggle控件（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现万圣节的toggle控件(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码地址 https://github ...
android switch 未定义,源生Switch控件在Android4.4无法显示？
首先,layout.xml代码如下: xmlns:tools="http://schemas.android.com/tools" android:layout_width=&qu ...
Android Switch控件修改样式
Android中自带的Switch控件在很多时候总觉得和整体系统风格不符,很多时候,自定义Switch是一种方法. 但其实不用这么麻烦,安卓自带的Switch通过修改一些属性,也可以达到和自定义Swi ...
Switch控件的介绍和使用
写在前面 Switch控件的介绍和使用先看东西布局属性介绍 <Switchandroid:id="@+id/mSwitchView"android:theme=" ...
Android 4.0 Switch 控件用源代码实现
最近项目需要,在4.0 以前的版本上实现一个android 4.0 上的Switch控件,上网找了些例子,都不尽如人意.自己动手,丰衣足食.于是便翻看源码,找到4.0源码中Switch实现的方法.照样 ...
laravel-admin form中的switch控件不改变状态提交后值为0
我的个人博客:逐步前行STEP 我把一个字段设默认值为0 需要审核操作通过设为1 不通过设为2 $states = ['on' => ['value' => 1, 'text' => ...
Switch控件详解
Switch控件详解原生效果 5.x 4.x 布局 <Switch android:id="@+id/setting_switch"android:layout_width ...
推荐三款强大且漂亮的统计图控件
志在必得(Xuon) 一.免费且强大的Flash统计图--FusionChartsFree 官方网址: http://www.fusioncharts.com/free/ 效果图: 使用感想: 对.N ...
银弹谷DevSuite零代码开发平台普通窗体控件描述
零代码开发平台普通窗体控件描述 1.字段控件 2.业务控件 3.通用控件

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

文章目录

效果图