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

Qml Shape as background button lead to color issue inside popup



    • Type: Bug
    • Status: Closed
    • Priority: P2: Important
    • Resolution: Done
    • Affects Version/s: 5.12.2
    • Fix Version/s: None
    • Labels:
    • Platform/s:


      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.


        No reviews matched the request. Check your Options in the drop-down menu of this sections header.



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



                Gerrit Reviews

                There are no open Gerrit changes