我的QML学习笔记-QML组件（1.QML常用的几个组件--窗口阴影）

先看一个普通组件（）的阴影效果

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Window 2.1

Window {
    visible: true
    width: 360
    height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

    Text {
        id:testText
        text: qsTr("Hello Match")
        font.pixelSize: 18
        anchors.centerIn: parent
    }

    //阴影必须在所有组件之后才会在最底层
    DropShadow {
        anchors.fill: testText
        horizontalOffset: 5
        verticalOffset: 5
        radius: 2.0
        samples: 16
        fast: false
        color: "#1d2833"
        source: testText
    }
}

重点是：

import QtGraphicalEffects 1.0

然后使用的方式：

    //阴影必须在所有组件之后才会在最底层
    DropShadow {
        anchors.fill: testText
        horizontalOffset: 5
        verticalOffset: 5
        radius: 2.0
        samples: 16
        fast: false
        color: "#1d2833"
        source: testText
    }

具体参数大家看帮助文档吧，这里说的是技巧

那么如何实现一个程序主窗口阴影呢？如下：

以上效果的代码如下：

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Window 2.1

Window {
    visible: true
    width: 360
    height: 360
    flags:Qt.WindowStaysOnTopHint |Qt.FramelessWindowHint | Qt.WA_TranslucentBackground
    color: "#00000000"
    x:200
    y:200

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

//    Text {
//        id:testText
//        text: qsTr("Hello Match")
//        font.pixelSize: 18
//        anchors.centerIn: parent
//    }

    Rectangle {
        id:testRec
        width: parent.width - 10
        height: parent.height - 10
        color: "#134869"
        anchors.centerIn: parent
    }

    //阴影必须在所有组件之后才会在最底层
    DropShadow {
        anchors.fill: testRec
        horizontalOffset: 5
        verticalOffset: 5
        radius: 2.0
        samples: 16
        fast: false
        color: "#aa000000"
        source: testRec
    }
}

其中， testRec的高度跟宽度就是重点，阴影效果实现方法是一样的。例子中高度跟宽度都比他的parent即最上层的Window少10个像素，少的这10个像素就是为阴影的显示腾出空间（具体少几个像素就根据自己的阴影决定啦），当然实现这个效果还需要先让最外层窗口的透明度为0，设置颜色值为 color: "#00000000"即可，还有window的 flags也有影响（关于flags的作用在另外一篇帖子说明）

注：本系列所有文章均在Linux下开发测试，SDK版本>=5.2.1，文件编码使用UTF-8

原创作品，欢迎转载，尊重作者劳动成果，转载请注明出处！