Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. 'Sequential' statechanges
Forum Updated to NodeBB v4.3 + New Features

'Sequential' statechanges

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 1.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    rubikon
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • L Offline
      L Offline
      Lucijan
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      0
      • R Offline
        R Offline
        rubikon
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • L Offline
          L Offline
          Lucijan
          wrote on last edited by
          #4

          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.

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved