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

Posted 2023-02-16

【中文标题】QML 从单击的矩形缩放到另一个 UI 元素

【英文标题】：QML zoom from a clicked rectangle to another UI element

【发布时间】：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 得到答案。

谢谢。

【参考方案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 的新手。我认为除非我们编写代码来进行缩放，否则不可能进行缩放。不过我不确定。 :-)

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