Best practice for multi view QML desktop app?

Question

I'm working on a C++ project for which I need to create GUI. I have some experience with Qt Widgets, but we have decided to go with QML for this project for several reasons. The GUI is pretty simple, nothing fancy. We are trying to have several views and navigation will be accomplished with buttons located in header.

Each button will bring a view in the front. See attached screenshot to get a better idea.

It's worth mentioning that during view navigation, the actual view shouldn't be destroyed. State should be preserved. Basically I'm trying to recreate Tab control except for button placements.

Now the problem is that, I have no prior experience with QML and I'd like to ask guidance. Which control will be more appropriate for this scenario? I've checked SwipeView, TabControl etc, but was easily confused. If you could recommend which area should I research I'd be very grateful.

Thanks

P.S. It would be nice to have each view's qml in a separate qml file so we won't end up with one huge qml file.

Pretty much what the answer says. You can also take a look at StackLayout or a more "involved" implementation with StackView. I don't think there are any very strong argument against any of the options, though. — BaCaRoZzo
"Best practices" is highly subjective and depends on the actual use case as well. Just use whatever works out for you best. If you want stuff line fancy transitions you may want to look at the stock elements QML has to offer or roll out your own, which is very easy to do in QML. — dtech

dtech dtech · Accepted Answer · 2017-07-18T12:55:35

Well, it could be as simple as having the four views on top of each other and hiding all but the active view. Then have a button group to determine which of the views is active:

ApplicationWindow {
  id: window
  visible: true
  width: 640
  height: 480
  ButtonGroup { buttons: buts.children }
  Column {
    Row {
      id: buts
      Button {
        id: v1
        checkable: true
        checked: true
        text: "red view"
      }
      Button {
        id: v2
        checkable: true
        text: "green view"
      }
      Button {
        id: v3
        checkable: true
        text: "blue view"
      }
    }
    Item {
      width: 300
      height: 300
      Rectangle {
        anchors.fill: parent
        color: "red"
        visible: v1.checked
      }
      Rectangle {
        anchors.fill: parent
        color: "green"
        visible: v2.checked
      }
      Rectangle {
        anchors.fill: parent
        color: "blue"
        visible: v3.checked
      }
    }
  }
}

You can easily declare your own stuff in separate QML files and replace the rectangles with that.

Best practice for multi view QML desktop app?

1 Answers