BlinCT
BlinCTJuly 26, 2016, 11:39 a.m.

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

opacity, qml, Qt

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

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

6
Evgenii Legotckoi
  • July 27, 2016, 1:10 a.m.

Добрый день.
Да, 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
    • July 27, 2016, 5:02 a.m.
    Свойство layer.enabled также может быть использовано для управления поведением наследования прозрачности. Так, установленное в true для родителя, данное свойство позволит игнорировать наследование прозрачности потомками: они будут иметь “общую” с родителем прозрачность, то есть весь элемент с потомками будет прозрачным, как отдельное изображение, а сами потомки не будут между собой просвечиваться. Однако же, это свойство появилось только в QtQuick 2.0, соответственно, отсутствует в Qt 4.
      Evgenii Legotckoi
      • July 27, 2016, 9:21 a.m.
      Max, а ты не мог бы привести рабочий пример кода с QtQuick.Controls 2.0?
      Поскольку на Qt 5.7 и QtQuick.Controls 2.0 и layer.enabled не даёт тот же результат, что я привел во вложении на картинке.
        MR
        • July 27, 2016, 5:17 p.m.

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

           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
          • July 27, 2016, 11:20 p.m.
          • The answer was marked as a solution.

          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
            • July 28, 2016, 2:34 a.m.
            Да, это всё верно и понятно. Хочу заметить, что вариант с layer.enabled я предложил как способ создания более специфичного эффекта прозрачности, а не как вариант первого предложенного решения. Бывает так, что именно всю сцену нужно сделать полупрозрачной, а в таком случае потомки будут просвечивать друг друга, что не очень хорошо для интерфейса с множеством вложенных элементов.

              Comments

              Only authorized users can post comments.
              Please, Log in or Sign up
              Дмитрий

              C ++ - Test 004. Pointers, Arrays and Loops

              • Result:60points,
              • Rating points-1
              Дмитрий

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

              • Result:92points,
              • Rating points8
              d
              • dsfs
              • April 26, 2024, 4:56 p.m.

              C ++ - Test 004. Pointers, Arrays and Loops

              • Result:80points,
              • Rating points4
              Last comments
              k
              kmssrFeb. 9, 2024, 7:43 a.m.
              Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
              Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
              EVA
              EVADec. 25, 2023, 11:30 p.m.
              Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
              J
              JonnyJoDec. 25, 2023, 9:38 p.m.
              Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
              G
              GvozdikDec. 19, 2023, 10:01 a.m.
              Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
              Now discuss on the forum
              G
              George13May 7, 2024, 12:27 p.m.
              добавить qlineseries в функции в функции: "GPlotter::addSeries(QString title, QVector &arr)" я вызываю метод setChart(...), я в конструктор передал адрес на QChartView элемент
              BlinCT
              BlinCTMay 5, 2024, 5:46 p.m.
              Написать свой GraphsView Всем привет. В Qt есть давольно старый обьект дял работы с графиками ChartsView и есть в 6.7 новый но очень сырой и со слабым функционалом GraphsView. По этой причине я хочу написать х…
              PS
              Peter SonMay 4, 2024, 5:57 a.m.
              Best Indian Food Restaurant In Cincinnati OH Ready to embark on a gastronomic journey like no other? Join us at App india restaurant and discover why we're renowned as the Best Indian Food Restaurant In Cincinnati OH . Whether y…
              Evgenii Legotckoi
              Evgenii LegotckoiMay 3, 2024, 2:07 a.m.
              Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Добрый день. По моему мнению - да, но то, что будет касаться вызовов к функционалу Андроида, может создать огромные трудности.
              IscanderChe
              IscanderCheApril 30, 2024, 4:22 p.m.
              Во Flask рендер шаблона не передаётся в браузер Доброе утро! Имеется вот такой шаблон: <!doctype html><html> <head> <title>{{ title }}</title> <link rel="stylesheet" href="{{ url_…

              Follow us in social networks