Наследование непрозрачности QML

Question

В QML, как я могу предотвратить дочерний элемент от наследования прозрачности от его родителя?Я хочу установить разные значения непрозрачности для родительского элемента и его дочернего элемента.

Answer 1

На самом деле, установка 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'
    }
}

Это решение, но убедитесь, что вы знаете, что делаете, когда включаете многоуровневое управление.

Другим возможным решением было бы использование эффекта тени.

Спасибо Пеппе на #qt@freenode.

Answer 2

Я думаю, одним из способов было бы использование полупрозрачных цветов, как описано здесь вместо непрозрачности.

например. используя четырехцветный код типа #800000FF для полупрозрачного синего.

Answer 3

Вы не можете.Значение непрозрачности элементов относительно их родительского значения, поэтому, если вы напишите что-то вроде

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

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

, вы увидите, что два прямоугольника имеют одинаковую непрозрачность.

Answer 4

Я столкнулся с этой проблемой только сейчас. Использование Qt 5.1.0

В моем случае у меня был элемент Rectangle с opacity: 0.6 и дочерний элемент Image. Image наследовал прозрачность - не желательно.

Чтобы решить эту проблему, я вложил основной Rectangle в элемент Item. Передал определения размера / положения от Rectangle к внешнему Item. Перемещено Image за пределы Rectangle.

В конце концов, у меня был Item в качестве основного родителя и Rectangle и Image рядом, внутри Item.

Только Rectangle поддерживает непрозрачность 0,6, поэтому прямоугольник имеет прозрачность, а Image полностью непрозрачен.

Answer 5

Это возможно! Вам необходимо проверить в области действия 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 6

Вы не можете запретить дочернему элементу наследовать непрозрачность от его родителя.

Моя личная работа состоит в том, чтобы изменить это:

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 7

Я не думаю, что это возможно.Вы должны сделать двухэлементный брат и изменить его непрозрачность, как хотите.

Answer 8

сделать это невозможно, но вы можете изменить их цвет с помощью

Qt.lighter(color,opacity)

, например

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

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

Answer 9

Я также столкнулся с этой проблемой с Qt 4.8.6.

В моем конкретном случае я хотел, чтобы элемент верхнего уровня был на 20% прозрачным с черным цветом, но его дочерние элементы не были затронуты любымнастройка непрозрачности / прозрачности от родителя.

Непрозрачность не работала из-за механизма наследования QML.

Но я смог использовать функцию rgba из объекта Qml Qt.Это позволило мне получить именно то, что я хотел, родительский элемент теперь прозрачен на 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 сработала, только не с чисто черным.