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

【问题标题】：QML zoom from a clicked rectangle to another UI elementQML 从单击的矩形缩放到另一个 UI 元素
【发布时间】：2012-06-08 16:33:09
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： qt qml qt-quick

【解决方案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
        }
      }
    }
  }

}

【讨论】：

【解决方案2】：

即使我是 qt-quick 的新手。我认为除非我们编写代码来进行缩放，否则不可能进行缩放。不过我不确定。 :-)

这个效果很好，很高兴在未来的版本中看到。尝试向社区提出功能请求

【讨论】：