QML不透明度繼承

Question

在QML中，如何防止子元素從其父項繼承不透明度？ 我想爲父級和它的子元素設置不同的不透明度值。

Answer 1

我不認爲它是可能的。你必須做出兩個元素兄弟姐妹，並隨意改變其不透明度。

Answer 2

你不能。項目不透明度值相對於他們的父母，所以如果你喜歡

Rectangle { 
    color: "red" 
    opacity: 0.5 
    width: 200; height: 100 

    Rectangle { 
    color: "blue" 
    opacity: 1 
    width: 100; height: 100 
    } 
} 

代碼的東西你會看到兩個矩形具有相同的不透明度。

Answer 3

我認爲，一種方法是使用here所述的半透明顏色代替不透明度。

例如使用類似於#800000FF的四色碼用於半透明藍色。

Answer 4

剛纔我碰到這個問題。使用Qt 5.1.0

在我的情況下，我有一個Rectangle元素opacity: 0.6和子元素Image元素。 Image正在繼承透明度 - 不需要。

爲了解決它，我在Item元件包圍的主Rectangle。將尺寸/位置定義從Rectangle傳遞到外部Item。在Rectangle之外移動Image。

最後，我有Item作爲主要親本，並且Rectangle和Image並排，在Item裏面。

只有Rectangle保持不透明度0.6，所以矩形具有透明度，Image是完全不透明的。

Answer 5

實際上，爲父元素設置layer.enabled: true對我來說確實如此。 整個元素被渲染到緩衝區，並且opacity被應用到結果緩衝區（一次到整個圖層）。

見http://doc.qt.io/qt-5/qml-qtquick-item.html#layer.enabled-prop

示例代碼：

Rectangle { 
    width: 400 
    height: 200 
    opacity: 0.5 
    layer.enabled: true 
    Rectangle { 
      width: parent.width 
      height: parent.height 
      color: 'red' 
    } 
    Rectangle { 
      width: parent.width/2 
      height: parent.height 
      color: 'blue' 
    } 
} 

這是一個解決方案，但要確保你知道讓層次感，當你在做什麼。

另一個可能的解決方案是使用shadereffect。

感謝peppe＃qt @ freenode。

Answer 6

我也遇到了Qt 4.8.6的這個問題。

在我的特殊情況下，我希望頂級項目具有黑色20％透明，但其子元素不受任何來自父級的不透明度/透明度設置的影響。

由於QML的繼承機制，不透明度不起作用。

但我能夠從Qml Qt對象中使用rgba函數。這使我得到我想要的東西，父母現在是20％透明的，但子元素不受影響。

Rectangle { 
    width: 400 
    height: 400 
    color: Qt.rgba(0, 0, 0, 0.2) // Works perfectly, pure black with 20% transparency, equal to 0.2 opacity 

    // Unaffacted child elements here... 
} 

注：我也試圖直接使用RGBA顏色代碼，如由以前的海報提到，但沒有奏效。

實施例：

color: "#000000FA" // Supposed to be semi transparent, but always transparent, regardless of the alpha value 

設置爲任何其他值RGBA阿爾法值的工作，只是不能與純黑色。

Answer 7

這是可能的！您需要在Component.onCompleted範圍內測試父級的不透明度。如果其值爲0，則需要將對象的父對象更改爲其當前父對象的父對象。

例子：

Item{ 
    id:root 

    Item{ 
     id:currentParent 
     opacity: 0 
     Item{ 
      id:item 
      Component.onCompleted:{ 
       if(parent.opacity === 0) 
        item.parent = currentParent.parent 
      } 
     } 
    } 
} 

Answer 8

您不能防止子元素從其父繼承的不透明度。

我個人的解決辦法是改變這種：

Rectangle { 
    color: "red" 
    opacity: 0.5 
    width: 200; height: 100 

    Rectangle { 
     color: "blue" 
     opacity: 1 
     width: 100; height: 100 
    } 
} 

進入這個：

Item { 
    width: 200; height: 100 

    Rectangle { 
     anchors.fill: parent 
     color: "red" 
     opacity: 0.5 
    } 

    Rectangle { 
     color: "blue" 
     opacity: 1 
     width: 100; height: 100 
    } 

} 

或本（如果父是純色唯一可能的）：

Rectangle { 
    color: "#7FFF0000" // 50% transparent red 
    opacity: 0.5 
    width: 200; height: 100 

    Rectangle { 
     color: "blue" 
     opacity: 1 
     width: 100; height: 100 
    } 
} 

Answer 9

這是不可能的，但你可以改變他們的顏色

Qt.lighter(color,opacity)

例如

Rectangle { 
    color: Qt.lighter("red",.5) 
    width: 200; height: 100 

    Rectangle { 
    color: Qt.lighter("blue",1) 
    width: 100; height: 100 
    } 
}