Reusable Component with Custom Content.

EmilieG

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!

sierdzio

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).

EmilieG

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

sierdzio

Great! Happy coding.

Weird that it didn't work with simple items.