Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Reusable Component with Custom Content.



  • Hi all,

    I'm building an application where I would like to define panels with advanced settings, ie something that would basically look like this:

    Panel with advanced settings hidden:
    Screenshot_20200504_103952.png

    Panel with advanced settings visible:
    Screenshot_20200504_104013.png

    Of course this is just an example and the content of the panel will change every time.
    But I would like to be able to define the similar visual clues and behaviors once. ie : clicking on the arrow to show / hide advanced options, how is the panel expanded, which side the advanced option should appear ( bottom / left.. ), margins...

    In my mind I was thinking of implementing something similar to the way customize qt quick controls . With contents / background that can be fully redefined. But I don't find a way to do so.. What is my best option to avoid heavy code duplication here?

    Thanks in advance!


  • Moderators

    Rectangle {
      property bool expanded: false
      default property Item collapsedItem: null
      property Item expandedItem: null
    
      Button {
        anchors {
          top: parent.top
          right: parent.right
        }
        icon: "path to icon"
        rotation: expanded? 0 : 180
        onClicked: expanded = !expanded
      }
    
      onExpandedChanged: {
        if (expanded) {
          collapsedItem.visible = false
          expandedItem.visible = true
        } // ...
      }
    }
    

    Here's some simple pseudo code, I hope it helps. It's probably a better idea to use Component than Item as the contents properties (combined with a Loader to load them dynamically).



  • Thanks a lot ! it's working like a charm with Components and Loaders.
    (but I couldn't get it to work with simple items..)


  • Moderators

    Great! Happy coding.

    Weird that it didn't work with simple items.


Log in to reply