CODEWITHSUNDEEP
qtqmlqt-quick
Alex
Alex

Reputation: 21

QML zoom from a clicked rectangle to another UI element

I have 9:9 matrix of Rectangle elements on the main QML form with Repeater. What I want to implement is if user clicks on one of rectangles, it zooms to TextEdit widget which on Esc press zooms back.

  1. Is it possible with QML?
  2. If yes, how am I supposed to turn Rectangle to TextEdit and zoom this TextEdit to fill the parent?

Just starting to work with QML and can't quite get an answer from http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeanimation.html yet.

Thank you.

Upvotes: 2

Views: 1941

Answers (2)

TheHuge_
TheHuge_

Reputation: 1039

1) Sure thing! This is more or less what QML is made for.

2) This is an example of how you can do what you want (not the only way to do it):

Rectangle {
  id: parentRect
  width: 500; height: 500

  // Every item in the grid should look like this
  Rectangle {
    id: singleItem
    color: "red"
    state: "closed"


    // Hidden text input, shown when user clicks
    TextInput {
      id: textInput
      anchors.fill: parent
      text: "Input here"
      cursorVisible: true
    }

    // MouseArea that will catch the user click
    MouseArea {
      anchors.fill: parent
      onClicked: singleItem.state = "open"
    }

    // Item states
    states: [
      State {
        name: "closed"
        PropertyChanges {target: singleItem; width: 25; height: 25}
        PropertyChanges {target: textInput; opacity: 0}
      },
      State {
        name: "open"
        PropertyChanges {target: singleItem; width: parentRect.width; height: parentRect.height}
        PropertyChanges {target: textInput; opacity: 1; focus: true}
      }
    ]

    // Transitions between states
    transitions: Transition {
      ParallelAnimation {
        NumberAnimation {
          target: singleItem
          properties: "width,height"
          duration: 1000
        }
        NumberAnimation {
          target: textInput
          property: "opacity"
          duration: 1000
        }
      }
    }
  }

}

Upvotes: 2

inblueswithu
inblueswithu

Reputation: 963

Even I'm new to qt-quick. I don't think it is possible to zoom unless we write our code to do such. I'm not sure though. :-)

This effect is good and it will b nice to see in coming versions. Try to give a feature request to the community <3

Upvotes: -1

Related Questions