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

Ответ 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'
    }
}

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

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

Благодаря peppe на # qt @freenode.

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 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 полностью непрозрачен.

Ответ 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
            }
        }
    }
}

Ответ 6

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

Ответ 7

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

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

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
    }
}

Ответ 8

Я также столкнулся с этой проблемой с 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, только не с чистым черным.

Ответ 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
  }
}