Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-86108

Qml Shape as background button lead to color issue inside popup

    XMLWordPrintable

Details

    • Windows

    Description

      To redefine the background button as Qml Shape lead to color issues when it used into a popup. 

      Please find hereafter an example. In this example we have 2 buttons inside a popup. The first one is customized with a Shape and the second one is a standard button. They are both auto exclusive. If we select the first one, it become blue. If we close the popup and open it again the blue color disapear even if the button is always checked.

      import QtQuick 2.12
      import QtQuick.Window 2.12
      import QtQuick.Controls 2.12
      import QtQuick.Shapes 1.12
      
      ApplicationWindow {
          id: window
          width: 640
          height: 480
          visible: true
          title: qsTr("qtbug86108")
      
          Column {
              anchors.centerIn: parent
      
              Button {
                  text: "open popup"
      
                  onClicked: popup.open();
              }
      
              Popup {
                  id: popup
                  anchors.centerIn: parent
      
                  contentItem: Row {
                      spacing: 24
      
                      /*************************************
                      * Using Qml Shape lead to a color bug
                      * Steps to reproduice
                      *
                      * 1. open the popup
                      * 2. clic on the left button
                      * 3. close the popup by clicking outside
                      * 4. open the popup again
                      * 5. the button with the shape background is not in "blue" anymore
                      *    but the text is still in white, and the checked property is still true
                      *    The button is no usable anymore instead if we click on the second button
                      *    to uncheck the first one
                      */
                      Button {
                          id: btnShape
                          text: "Shape background"
                          checkable: true
                          autoExclusive: true
      
                          palette.button: btnShape.checked ? "blue" : "lightgrey"
      
                          background: Shape {
                              id: shape
                              implicitWidth: 100
                              implicitHeight: 40
                              ShapePath {
                                  fillColor: btnShape.palette.button
                                  startX: 0
                                  startY: 0
                                  PathLine { x: shape.width; y: 0}
                                  PathLine { x: shape.width; y: shape.height}
                                  PathLine { x: 0; y: shape.height}
                                  PathLine { x: 0; y: 0}
                              }
                          }
                      }
      
                      Button {
                          text: "Rectangle background"
                          checkable: true
                          autoExclusive: true
                      }
                  }
              }
          }
      }
      

      You can find attached to this issue the same code block into a file.

      Attachments

        Activity

          People

            janichol Andy Nichols
            nathan_p Nathan PRIOR
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: