Important: Please read the 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:

    Panel with advanced settings visible:

    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 {
          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