QML 矩形上的内阴影 [英] Inner shadow on QML Rectangle

问题描述

如何在 QML 中实现带有内部阴影的矩形?

请参阅以下链接中的示例:

得到这个想法相关错误.

How do I implement a Rectangle in QML with an inner shadow?

See example in link below:

Create inner shadow in UIView

UPDATE:

Here's a simplified version of what I'm trying to do (which does not show any shadow):

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
   width: 400
   height: 400

   Item {
      anchors.fill: parent

      Rectangle {
         id: myRectangle
         anchors.centerIn: parent
         width: 200
         height: 200
         color: "grey"
      }
   }

   InnerShadow {
      anchors.fill: myRectangle
      cached: true
      visible: true
      horizontalOffset: 0
      verticalOffset: 0
      radius: 25
      samples: 16
      color: "#b0000000"
      smooth: true
      source: myRectangle
   }
}

I'm sorry. My stupid... I got it wrong when i simplified the code (the Item was used for a DropShadow test, which works). This is how it was supposed to look like:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
   width: 400
   height: 400

   Rectangle {
      id: myRectangle
      anchors.centerIn: parent
      width: 200
      height: 200
      color: "grey"
   }

   InnerShadow {
      anchors.fill: myRectangle
      cached: true
      visible: true
      horizontalOffset: 0
      verticalOffset: 0
      radius: 25
      samples: 16
      color: "#b0000000"
      smooth: true
      source: myRectangle
   }
}

解决方案

I'm not sure why, but it works if you use the item above the item you're trying cast a shadow within (in this case it just happens to be the root item, but it doesn't have to be):

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    id: root
    width: 300
    height: 300

    Rectangle {
        id: myRectangle
        anchors.centerIn: parent
        width: 100
        height: 100
        color: "grey"
    }

    InnerShadow {
        anchors.fill: root
        cached: true
        horizontalOffset: 0
        verticalOffset: 0
        radius: 16
        samples: 32
        color: "#b0000000"
        smooth: true
        source: root
    }
}

I got the idea from QTBUG-27213 when I was searching for related bugs.

这篇关于QML 矩形上的内阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！