Descripción de QML DropShadow

DropShadow producirá algunas sombras en el componente original para mejorar el efecto visual del componente, por ejemplo, puede hacer que los botones tengan un efecto tridimensional y la ventana tenga una jerarquía clara.

1. Entorno DropShadow

Cargue el componente correspondiente QtGraphicalEffects.

import QtGraphicalEffects 1.0

2. Introducción de parámetros

cached : 是否需要缓存，默认为false，如果设置为True，则占用内存
color : 阴影对应的颜色，默认为black
horizontalOffset : 阴影在水平方向的偏移，-10代表往左边偏移10像素，10代表往右偏移10像素
radius : 阴影边缘模糊的半径，默认为0
samples : 此属性定义在执行边缘软化模糊计算时，每个像素采集的采样数。值越大，质量越好，但渲染速度越慢。
source : 源组件
spread : 阴影边缘的扩散，值越大，扩散越大
transparentBorder : 边缘是否透明处理
verticalOffset : 竖直阴影的偏移

3. Cómo usar DropShadow

Método 1: en Item, DropShadow y los componentes de origen están uno al lado del otro y están asociados con los componentes de origen a través del origen y los anclajes.

  import QtQuick 2.12
  import QtGraphicalEffects 1.12

  Item {
    
    
      width: 300
      height: 300

      Rectangle {
    
    
          anchors.fill: parent
      }

      Image {
    
    
          id: butterfly
          source: "images/butterfly.png"
          sourceSize: Qt.size(parent.width, parent.height)
          smooth: true
          visible: false
      }

      DropShadow {
    
    
          anchors.fill: butterfly
          horizontalOffset: 3
          verticalOffset: 3
          radius: 8.0
          samples: 17
          color: "#80000000"
          source: butterfly
      }
  }

Método 1: en Rectangle, DropShadow se asocia directamente con Rectangle como el valor de atributo de layer.effect.

 Rectangle {
    
    
     id:showWin
     visible: true
     width:100
     height: 100
     x: (parent.width - width)/2
     y: (parent.height - height)/2
     color: color_SSMAN_GRAY
     radius: 10
     layer.enabled: true  // 设置layer为enable
     layer.effect: DropShadow {
    
    
         transparentBorder: true
         color: "black"
         samples:100
   	 }
 }

4. Ejemplos

3.1 color

2 、 Desplazamiento horizontal

3 、 Radio

4 、 Extensión