BlinCT
BlinCT26 липня 2016 р. 11:39

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

opacity, qml, Qt

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

Рекомендуємо хостинг TIMEWEB
Рекомендуємо хостинг TIMEWEB
Стабільний хостинг, на якому розміщується соціальна мережа EVILEG. Для проектів на Django радимо VDS хостинг.

Вам це подобається? Поділіться в соціальних мережах!

6
Evgenii Legotckoi
  • 27 липня 2016 р. 01: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 р. 05:02
    Свойство layer.enabled также может быть использовано для управления поведением наследования прозрачности. Так, установленное в true для родителя, данное свойство позволит игнорировать наследование прозрачности потомками: они будут иметь “общую” с родителем прозрачность, то есть весь элемент с потомками будет прозрачным, как отдельное изображение, а сами потомки не будут между собой просвечиваться. Однако же, это свойство появилось только в QtQuick 2.0, соответственно, отсутствует в Qt 4.
      Evgenii Legotckoi
      • 27 липня 2016 р. 09:21
      Max, а ты не мог бы привести рабочий пример кода с QtQuick.Controls 2.0?
      Поскольку на Qt 5.7 и QtQuick.Controls 2.0 и layer.enabled не даёт тот же результат, что я привел во вложении на картинке.
        MR
        • 27 липня 2016 р. 17: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
          • 27 липня 2016 р. 23: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 р. 02:34
            Да, это всё верно и понятно. Хочу заметить, что вариант с layer.enabled я предложил как способ создания более специфичного эффекта прозрачности, а не как вариант первого предложенного решения. Бывает так, что именно всю сцену нужно сделать полупрозрачной, а в таком случае потомки будут просвечивать друг друга, что не очень хорошо для интерфейса с множеством вложенных элементов.

              Коментарі

              Only authorized users can post comments.
              Please, Log in or Sign up
              m
              • molni99
              • 26 жовтня 2024 р. 01:37

              C++ - Тест 004. Указатели, Массивы и Циклы

              • Результат:80бали,
              • Рейтинг балів4
              m
              • molni99
              • 26 жовтня 2024 р. 01:29

              C++ - Тест 004. Указатели, Массивы и Циклы

              • Результат:20бали,
              • Рейтинг балів-10

              C++ - Тест 003. Условия и циклы

              • Результат:42бали,
              • Рейтинг балів-8
              Останні коментарі
              A
              ALO1ZE19 жовтня 2024 р. 08:19
              Читалка файлів fb3 на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
              ИМ
              Игорь Максимов05 жовтня 2024 р. 07:51
              Django - Урок 064. Як написати розширення для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
              d
              dblas505 липня 2024 р. 11:02
              QML - Урок 016. База даних SQLite та робота з нею в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
              k
              kmssr08 лютого 2024 р. 18:43
              Qt Linux - Урок 001. Автозапуск програми Qt під Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
              АК
              Анатолий Кононенко05 лютого 2024 р. 01:50
              Qt WinAPI - Урок 007. Робота з ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
              Тепер обговоріть на форумі
              jd
              jasmine disouza28 жовтня 2024 р. 04:58
              GeForce Now India: Unlocking the Future of Cloud Gaming GeForce Now India has a major impact on the gaming scene by introducing NVIDIA's cloud gaming service to Indian gamers. GeForce Now India lets you stream top-notch PC games on any device, from b…
              9
              9Anonim25 жовтня 2024 р. 09:10
              Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
              J
              JacobFib17 жовтня 2024 р. 03:27
              добавить qlineseries в функции Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты https://topdecorpro.ru…
              ИМ
              Игорь Максимов03 жовтня 2024 р. 04:05
              Реализация навигации по разделам Спасибо Евгений!
              JW
              Jhon Wick01 жовтня 2024 р. 15:52
              Indian Food Restaurant In Columbus OH| Layla’s Kitchen Indian Restaurant If you're looking for a truly authentic https://www.laylaskitchenrestaurantohio.com/ , Layla’s Kitchen Indian Restaurant is your go-to destination. Located at 6152 Cleveland Ave, Colu…

              Слідкуйте за нами в соціальних мережах