QT 5.3 / QML: Resizable StackView depending on currentItem

Question

I'm working on a QML StackView that starts with a list of items to select from. Once selected I want to transition _.push(...) to a input form which has larger dimensions than the initialItem.

The only way I have trial-and-errored my way into a situation that works is by making the form Item a nested borderless window.

Q1. A nested window can't be the right type of concept to use for this... right ? there must be another way to do it. What is the right way ?

Q2. My goal after this is to have a transition animation that grows or shrinks between stacks of different sizes. Advice that doesn't preclude that would be best.

code

Main.qml :

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

ApplicationWindow {
  property int itemHeight: 30
  property int cornerRadius : 5

  visible: true
  color: "transparent"
  flags: Qt.FramelessWindowHint

  ListModel {
    id: searchFacets
    ListElement {
      title: "Topics"
      page: "content/TopicSearch.qml"
    }
    //    ListElement {
    //      title: "Domains"
    //    }
  }

  StackView {
    id: stackView

    focus: true

    initialItem: SearchFacets {
      id: facets
    }
    delegate: StackViewDelegate {
      pushTransition: StackViewTransition {
        PropertyAnimation {
          target: enterItem
          property: "opacity"
          from: 0
          to: 1
        }
      }
    }
  }
}

Initial Item:

import QtQuick 2.3

Item {
  height : listView.count * itemHeight
  ListView {
    id: listView
    model: searchFacets
    anchors.fill: parent
    focus: true
    highlightFollowsCurrentItem: false

    highlight:   Rectangle {
      width: parent.width
      height: itemHeight
      radius : cornerRadius
      color: "green"
      opacity: 0.5
      z:2
      x: listView.currentItem.x;
      y: listView.currentItem.y

      Behavior on y {
        SpringAnimation {
          spring: 60
          damping: 1.0
        }
      }
    }

    delegate:   Component {
      Item {
        width: parent.width
        height : itemHeight

        Rectangle {
          anchors.fill: parent
          color: "#212126"
          radius: cornerRadius
          z:0
          border.width: 2
          border.color : "white"
        }

        MouseArea {
          id: mouseArea
          anchors.fill: parent
          hoverEnabled: true

          onClicked: {
            console.log("clicked index: " + index)
            listView.currentIndex = index
//            listView.forceActiveFocus()
            stackView.push(Qt.resolvedUrl(page))
          }
        }
        Text {
          text: title
          font.pixelSize: 24
          font.bold: true
          z:1
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.verticalCenter: parent.verticalCenter
          color: "white"
          antialiasing: true
        }
      }
    }
  }
}

Input Form:

import QtQuick 2.3
import QtQuick.Window 2.0
Item {
  Window {
    width: 400
    height: 400
    visible: true
    flags: Qt.FramelessWindowHint

    Rectangle {
      anchors.fill: parent
      visible: true
      color: "red"
    }
  }
}

Answer 1

One possible solution is to update the size of the dimensions of the StackView in the click handler that causes the transition. I do not know if that causes any problems with animating the transition.

MouseArea {
  id: mouseArea
  anchors.fill: parent
  hoverEnabled: true

  onClicked: {
    console.log("clicked index: " + index)
    listView.currentIndex = index

    var component = Qt.createComponent(page)
    var res = component.createObject(stackView)
    stackView.height = res.height
    stackView.width = res.width
    stackView.push(res)
  }
}