BlinCT
26 июля 2016 г. 21:39

Полупрозрачность одних элементов и не прозрачность других

opacity, qml, Qt

Всем привет.
Возникла такая необходимость, нужно сделать панели прозрачность opacity: 0.5
На ней находятся еще элементы а на них еще. Так как тут идет наследование то чилдрены тоже получают эту полу прозрачность. А как задать некоторым наследникам не прозрачность? Пробовал но все остается полупрозрачным. скрин прилагаю к теме.
Заранее спасибо.

0

Вам это нравится? Поделитесь в социальных сетях!

6
Evgenii Legotckoi
  • 27 июля 2016 г. 11:10

Добрый день.
Да, child объекты наследуют свойство непрозрачности родителя, и изменение непрозрачности у child объектов не позволяет обойти тот уровень непрозрачности, который выставлен у родителя.
Но можно попробовать применить следующий ход.
Сменить родителя на того, который располагается на уровень выше, по сигналу completed() о создании child элемента.
Я не заметил проблем с позиционированием, после применения данного хода, но нужно учитывать этот момент и внимательно применять данный приём.

import QtQuick 2.7
import QtQuick.Controls 2.0
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Rectangle {
        id:currentParent
        width: 200
        height: 200
        color: "red"
        anchors.centerIn: parent
        opacity: 0.2
 
        Rectangle {
            id:item
            width: 50
            height: 50
            color: "green"
            anchors.centerIn: parent
 
            Component.onCompleted: {
                // Проверяем уровень непрозрачности родительского объекта
                // И если он находится в заданном значении,
                // то меняем родительский элемент с текущего на родительский элемент родительского элемента
                if (parent.opacity === 0.2)
                    item.parent = currentParent.parent
            }
        }
    }
}

    MR
    • 27 июля 2016 г. 15:02
    Свойство layer.enabled также может быть использовано для управления поведением наследования прозрачности. Так, установленное в true для родителя, данное свойство позволит игнорировать наследование прозрачности потомками: они будут иметь “общую” с родителем прозрачность, то есть весь элемент с потомками будет прозрачным, как отдельное изображение, а сами потомки не будут между собой просвечиваться. Однако же, это свойство появилось только в QtQuick 2.0, соответственно, отсутствует в Qt 4.
      Evgenii Legotckoi
      • 27 июля 2016 г. 19:21
      Max, а ты не мог бы привести рабочий пример кода с QtQuick.Controls 2.0?
      Поскольку на Qt 5.7 и QtQuick.Controls 2.0 и layer.enabled не даёт тот же результат, что я привел во вложении на картинке.
        MR
        • 28 июля 2016 г. 3:17

        Конечно. Вот пример, как работает обычно:

           Rectangle
            {
                width: 300
                height: width
                color: "red"
                opacity: 0.5
                Rectangle
                {
                    width: 200
                    height: width
                    x: 0
                    y: x
                    color: "blue"
                    layer.enabled: false
                }
                Rectangle
                {
                    width: 200
                    height: width
                    x: 100
                    y: x
                    color: "green"
                }
            }

        А вот, для прозрачности всей сцены при использовании layer.enabled:

           Rectangle
            {
                width: 300
                height: width
                color: "red"
                layer.enabled: true
                opacity: 0.5
                Rectangle
                {
                    width: 200
                    height: width
                    x: 0
                    y: x
                    color: "blue"
                    layer.enabled: false
                }
                Rectangle
                {
                    width: 200
                    height: width
                    x: 100
                    y: x
                    color: "green"
                }
            }

        Результаты во вложениях. Как видно, при использовании нового свойства вся сцена целиком имеет прозрачность, а не отдельные её элементы. Думаю, именно это и должно было произойти у BlinCT.

          Evgenii Legotckoi
          • 28 июля 2016 г. 9:20
          • Ответ был помечен как решение.

          Max, всё равно предложенный тобой вариант не работает так, как требуется. Проблема в том, что всё равно все элементы становятся немного прозрачными.
          Вот предлагаемый тобой вариант кода:

          import QtQuick 2.7
          import QtQuick.Controls 2.0
           
          ApplicationWindow {
              visible: true
              width: 640
              height: 480
              title: qsTr("Hello World")
           
              Rectangle {
                  x: 50
                  y: 50
                  z: 0
                  width: 200
                  height: 200
                  color: "red"
              }
           
              Rectangle
              {
                  z: 1
                  width: 300
                  height: width
                  color: "red"
                  layer.enabled: true
                  opacity: 0.5
                  Rectangle
                  {
                      width: 200
                      height: width
                      x: 0
                      y: x
                      color: "blue"
                      layer.enabled: false
                  }
                  Rectangle
                  {
                      width: 200
                      height: width
                      x: 100
                      y: x
                      color: "green"
                  }
              }
          }

          А вот вариант с необходимым результатом по прозрачности.

          import QtQuick 2.7
          import QtQuick.Controls 2.0
           
          ApplicationWindow {
              visible: true
              width: 640
              height: 480
              title: qsTr("Hello World")
           
              Rectangle {
                  x: 50
                  y: 50
                  z: 0
                  width: 200
                  height: 200
                  color: "red"
              }
           
              Rectangle
              {
                  id: currentParent
                  z: 1
                  width: 300
                  height: width
                  color: "red"
                  opacity: 0.2
           
                  Rectangle
                  {
                      id: item1
                      width: 200
                      height: width
                      x: 0
                      y: x
                      color: "blue"
                      Component.onCompleted: {
                          // Проверяем уровень непрозрачности родительского объекта
                          // И если он находится в заданном значении,
                          // то меняем родительский элемент с текущего на родительский элемент родительского элемента
                          if (parent.opacity === 0.2)
                              item1.parent = currentParent.parent
                      }
                  }
                  Rectangle
                  {
                      id: item2
                      width: 200
                      height: width
                      x: 100
                      y: x
                      color: "green"
                      Component.onCompleted: {
                          // Проверяем уровень непрозрачности родительского объекта
                          // И если он находится в заданном значении,
                          // то меняем родительский элемент с текущего на родительский элемент родительского элемента
                          if (parent.opacity === 0.2)
                              item2.parent = currentParent.parent
                      }
                  }
              }
          }

          В качестве индикатора прозрачности применяется красный прямоугольник.
          То есть требуется, чтобы все дочерние элементы имели 100% непрозрачность. А с манипуляциями через layer.enabled этого не получается.

            MR
            • 28 июля 2016 г. 12:34
            Да, это всё верно и понятно. Хочу заметить, что вариант с layer.enabled я предложил как способ создания более специфичного эффекта прозрачности, а не как вариант первого предложенного решения. Бывает так, что именно всю сцену нужно сделать полупрозрачной, а в таком случае потомки будут просвечивать друг друга, что не очень хорошо для интерфейса с множеством вложенных элементов.

              Комментарии

              Только авторизованные пользователи могут публиковать комментарии.
              Пожалуйста, авторизуйтесь или зарегистрируйтесь
              • Последние комментарии
              • IscanderChe
                12 апреля 2025 г. 17:12
                Добрый день. Спасибо Вам за этот проект и отдельно за ответы на форуме, которые мне очень помогли в некоммерческих пет-проектах. Профессиональным программистом я так и не стал, но узнал мно…
              • AK
                1 апреля 2025 г. 11:41
                Добрый день. В данный момент работаю над проектом, где необходимо выводить звук из программы в определенное аудиоустройство (колонки, наушники, виртуальный кабель и т.д). Пишу на Qt5.12.12 поско…
              • Evgenii Legotckoi
                9 марта 2025 г. 21:02
                К сожалению, я этого подсказать не могу, поскольку у меня нет необходимости в обходе блокировок и т.д. Поэтому я и не задавался решением этой проблемы. Ну выглядит так, что вам действитель…
              • VP
                9 марта 2025 г. 16:14
                Здравствуйте! Я устанавливал Qt6 из исходников а также Qt Creator по отдельности. Все компоненты, связанные с разработкой для Android, установлены. Кроме одного... Когда пытаюсь скомпилиров…
              • ИМ
                22 ноября 2024 г. 21:51
                Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…