QML控件特效

SwipeView

SwipeView{
 
    Component.onCompleted:{
        contentItem.highlightMoveDuration = 0       //禁用滑动动画
    }
 	interactive: false // 禁用滑动
}

Switch

Switch{
            id:mySwitch
            
            anchors.left: checkbox1.right
            property color checkedColor: "#0ACF97"
            
            indicator: Rectangle {
                width: 54
                height: 34
                radius: height / 2
                color: mySwitch.checked ? "#0ACF97" : "white"
                border.width: 2
                border.color: mySwitch.checked ? "#0ACF97" : "#E5E5E5"
                
                Rectangle {
                    x: mySwitch.checked ? parent.width - width - 2 : 1
                    width: mySwitch.checked ? parent.height - 4 : parent.height - 2
                    height: width
                    radius: width / 2
                    anchors.verticalCenter: parent.verticalCenter
                    color: "white"
                    border.color: "#D5D5D5"
                    
                    Behavior on x {
                        NumberAnimation { duration: 50 }
                    }
                }
            }
            
        }

BusyIndicator

Controls14.BusyIndicator {
                anchors.centerIn: parent
                
                style: BusyIndicatorStyle {
                    
                    indicator: Image {
                        sourceSize.width: 25
                        sourceSize.height: 25
                        visible: control.running
                        source: "qrc:/icon/icon/loading2.png"
                        RotationAnimator on rotation {
                            running: control.running
                            loops: Animation.Infinite
                            duration: 1000
                            from: 0 ; to: 360
                        }
                    }
                }
                running: true
            }

主窗口透明

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0
import QtQuick.Window 2.3

ApplicationWindow {
    id: main
    visible: true
    width: 300
    height: 200
    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.Window

    Rectangle {
      id: rect
      anchors.fill: parent
      anchors.margins: main.visibility === Window.FullScreen ? 0 : 10
      MouseArea {
        id: ma
        anchors.fill: parent
        property int dx
        property int dy
        onPressed: { dx = mouseX; dy = mouseY }
        onPositionChanged: {
          main.x += mouseX - dx
          main.y += mouseY - dy
        }
        onDoubleClicked: main.visibility = main.visibility === Window.FullScreen ? Window.AutomaticVisibility : Window.FullScreen
      }
    }

    DropShadow {
      anchors.fill: rect
      horizontalOffset: 1
      verticalOffset: 1
      radius: ma.pressed ? 8 : 5
      samples: 10
      source: rect
      color: "black"
      Behavior on radius { PropertyAnimation { duration: 100 } }
    }
}