Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Opacity Inheritance [ Solved ]
Forum Updated to NodeBB v4.3 + New Features

QML Opacity Inheritance [ Solved ]

Scheduled Pinned Locked Moved QML and Qt Quick
qmlopacityinheritancewindow
6 Posts 3 Posters 10.1k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • CybrumC Offline
    CybrumC Offline
    Cybrum
    wrote on last edited by Cybrum
    #1

    In QML, how can I prevent a child element from inheriting the opacity from its parent? I want to set different opacity values for the parent and it's child element.
    Window {
    id : root
    flags: Qt.FramelessWindowHint | Qt.WA_TranslucentBackground
    visible:true
    opacity: 0.8
    color:Qt.transparent
    BorderImage {
    visible:true
    width:root.width
    height:root.height
    source: "background.png"
    }
    }

    1 Reply Last reply
    0
    • bck25B Offline
      bck25B Offline
      bck25
      wrote on last edited by bck25
      #2

      Do not use the opacity property. Opacity is passed down to all child elements. Instead, use rgba values.

      First, set the color of your root window to "transparent" with quotation marks. This makes the main window completely transparent. Then, any child of the main window can be made semi-transparent by setting the color to Qt.rgba(arg1, arg2, arg3, arg4). Argument 4 controls the alpha range from 0 to 1, where 0 is completely transparent and 1 is completely opaque.

      From your example, it looks like you don't want your main window to be completely transparent. You'll want to fill it with a rectangle with color: Qt.rgba(1,1,1,0.8)

      Here is an example. You'll need to scroll through the code block.

      ApplicationWindow {
          id: root // Transparent main window
          width: 640
          height: 480
          visible: true
          color: "transparent"
      
          Rectangle {
              id: parent // Semi-transparent rectangle
              width: root.width
              height: root.height
              color: Qt.rgba(1,1,1,0.5)
      
              Rectangle {
                  id: child // Opaque rectangle
                  width: 300
                  height: 300
                  anchors.centerIn: parent
                  color: "white"
              }
          }
      }
      
      1 Reply Last reply
      2
      • F Offline
        F Offline
        Frime
        wrote on last edited by
        #3

        Hey!

        You can use the layered property.
        See http://doc.qt.io/qt-5/qml-qtquick-item.html, section "Layer Opacity vs Item Opacity"

        you have to set :
        layer.enabled: true
        on your Item.

        Should work!

        Best,
        Frime

        1 Reply Last reply
        0
        • bck25B Offline
          bck25B Offline
          bck25
          wrote on last edited by bck25
          #4

          @Frime said:

          Layer Opacity vs Item Opacity

          Hey Frime,

          While it is true that layered opacity will prevent the opacity from building up over child elements, this doesn't actually solve OP's problem. OP wants a parent element to be semi-transparent, and a child element to be completely opaque (I think). Layer opacity does not achieve this. Here is a Layer vs Item opacity example:

          Item Opacity: Item Opacity
          Layer Opacity:Layer Opacity

          Notice that the child element in the layer opacity example is still semi-transparent.

          Here is a screenshot from my code example above: example

          -Brian

          CybrumC 1 Reply Last reply
          0
          • CybrumC Offline
            CybrumC Offline
            Cybrum
            wrote on last edited by
            #5
            This post is deleted!
            1 Reply Last reply
            0
            • bck25B bck25

              @Frime said:

              Layer Opacity vs Item Opacity

              Hey Frime,

              While it is true that layered opacity will prevent the opacity from building up over child elements, this doesn't actually solve OP's problem. OP wants a parent element to be semi-transparent, and a child element to be completely opaque (I think). Layer opacity does not achieve this. Here is a Layer vs Item opacity example:

              Item Opacity: Item Opacity
              Layer Opacity:Layer Opacity

              Notice that the child element in the layer opacity example is still semi-transparent.

              Here is a screenshot from my code example above: example

              -Brian

              CybrumC Offline
              CybrumC Offline
              Cybrum
              wrote on last edited by
              #6

              @bck25 ,@Frime

              Thank you all for the replies. I can not set the alpha value as I am using an image as the background.
              I solved this by moving the opacity to the BorderImage which acts as background of the Window.

              Window {
              id : root
              flags: Qt.FramelessWindowHint
              visible:true
              color: "transparent" // This works properly when Aero theme is enabled in Windows
              BorderImage {
              visible:true
              width:root.width
              height:root.height
              opacity: 0.8
              source: "background.png"
              }
              }

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved