qt - QML 从单击的矩形缩放到另一个 UI 元素

Question

我在带有Repeater的主QML表单上有9：9的矩形元素矩阵。我想要实现的是，如果用户单击其中一个矩形，它会缩放到 TextEdit 小部件，该小部件在 Esc 按下时会缩小。

1. QML可以吗？
2. 如果是，我应该如何将 Rectangle 转换为 TextEdit 并缩放此 TextEdit 以填充父级？

刚开始使用 QML，还不能从http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeanimation.html得到答案。

谢谢你。

Answer 1

1）当然！这或多或少是 QML 的用途。

2）这是一个例子，你可以做你想做的事（不是唯一的方法）：

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

}

Answer 2

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