'Sequential' statechanges



  • Hello.

    I have implemented a kind of touchscreen menubar. The menu shall be a bottom aligned bar with buttons on it which represents the top level menu item. By taping the menu entry, another submenubar with buttons shall appear (animated with transition and a certain duration) which represents the submenu items.

    If the submenubar is visible after tapping for example the fist menu button, the submenubar shall show the following behaviour if the second button is pressed: The submenubar shall disappear, then the texts of the buttons shall change and then the submenubar shall appear again.

    So what I need is some kind of 'sequential statechanges'. How do I have to implement this in the else cases of the onClicked events (Lines 38, 58, 78)?

    In this approach the first thing I do is set the state to initial state. Now the application should 'wait' till the animation is finished and then set the texts and start the animation for the transition to the 'active' state.

    @
    // main.qml
    import QtQuick 2.0
    import QtQuick.Controls 1.0
    import QtQuick.Layouts 1.0
    import QtQuick.Window 2.0

    ApplicationWindow {
    width: 360
    height: 360

    SubMenubar {
    id: subMenuBar;
    y: mainbar.y
    }

    Rectangle {
    id: mainbar;
    height: 50
    width: parent.width
    color: "#bb5555"
    anchors.bottom: parent.bottom

    RowLayout {
    anchors.margins: 8
    anchors.fill: parent

    Button {
    text: "File"
    anchors.centerIn: parent.Center
    onClicked: {
    if(subMenuBar.state == "") {
    subMenuBar.text1 = "Open..."
    subMenuBar.text2 = "Close"
    subMenuBar.text3 = ""
    subMenuBar.state = "active"
    }
    else {
    subMenuBar.state = ""
    subMenuBar.text1 = "Open..."
    subMenuBar.text2 = "Close"
    subMenuBar.text3 = ""
    subMenuBar.state = "active"
    }
    }
    }

    Button {
    text: "Edit"
    anchors.centerIn: parent.Center
    onClicked: {
    if(subMenuBar.state == "") {
    subMenuBar.text1 = "Cut"
    subMenuBar.text2 = "Copy"
    subMenuBar.text3 = "Paste"
    subMenuBar.state = "active"
    }
    else {
    subMenuBar.state = ""
    subMenuBar.text1 = "Cut"
    subMenuBar.text2 = "Copy"
    subMenuBar.text3 = "Paste"
    subMenuBar.state = "active"
    }
    }
    }

    Button {
    text: "?"
    anchors.centerIn: parent.Center
    onClicked: {
    if(subMenuBar.state == "") {
    subMenuBar.text1 = "Help"
    subMenuBar.text2 = "About"
    subMenuBar.text3 = ""
    subMenuBar.state = "active"
    }
    else {
    subMenuBar.state = ""
    subMenuBar.text1 = "Help"
    subMenuBar.text2 = "About"
    subMenuBar.text3 = ""
    subMenuBar.state = "active"
    }
    }
    }

    Item { Layout.fillWidth: true }
    }
    }
    }

    // SubMenuBar.qml
    import QtQuick 2.0
    import QtQuick.Controls 1.0
    import QtQuick.Layouts 1.0

    Rectangle {
    id: self
    height: 50
    width: parent.width
    color: "#55bb55"

    property alias text1: first.text;
    property alias text2: second.text;
    property alias text3: third.text;

    RowLayout {
    anchors.margins: 8
    anchors.fill: parent

    Button {
    id: first
    anchors.centerIn: parent.Center
    visible: text != ""
    }

    Button {
    id: second
    anchors.centerIn: parent.Center
    visible: text != ""
    }

    Button {
    id: third
    anchors.centerIn: parent.Center
    visible: text != ""
    }

    Item { Layout.fillWidth: true }
    }

    states: [
    State {
    name: "active"
    PropertyChanges {
    target: self
    explicit: true
    y: y - height
    }
    }
    ]

    transitions: [
    Transition {
    NumberAnimation { properties: "y"; easing.type: Easing.OutCubic; duration: 200 }
    }
    ]
    }
    @

    Thanx in advance.



  • I know this isn't exactly what you're looking for, but why not just make three submenubars and then just hide/show them as needed? You're going to need to give each button of the submenubar a separate implementation for its action (opening, closing etc.) anyway so I'm not sure why you'd do it this way.



  • What do you mean by 'You’re going to need to give each button of the submenubar a separate implementation for its action (opening, closing etc.'

    If I do it this way:

    @ Button {
    text: "File"
    anchors.centerIn: parent.Center
    onClicked: {
    if(subMenuBarEdit.state == "active")
    subMenuBarEdit.state = ""

     if(subMenuBarHelp.state == "active")
      subMenuBarHelp.state = "" 
     
     // should wait here...
     
     subMenuBarFile.state = "active"
     }
    }
    

    }@

    the problem remains the same: The second statechange should wait till the first animation/transition is finished...



  • Perhaps you could use a SequentialAnimation and PropertyAction inside it after the pop-up animation. Then for PropertyAction you can enable/disable the Submenubars as needed. This way you could prevent the user from clicking any other buttons until the animation finishes. So just set enable to false with PropertyAction, then do a NumberAnimation (or whatever you're using), then use PropertyAction again to enable the Submenubar again.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.