image - 我有 5 :5 matrix of image elements on main QML form with Grid

Question

我想要实现的是，如果用户点击其中一张图片，它应该将我带到另一个 QML 页面，然后在按下 ESC 时，它应该返回到主 QML 文件。

此外，如果用户调整窗口大小，图像应根据窗口大小自行排列。

即如果窗口缩小则图像较小，如果窗口拉伸(stretch)则图像较大。

这可能吗？如果是，我如何确保图标会在更改窗口大小时更改其大小，并在单击它时将用户带到另一个页面？

几天以来一直在使用 QML，但确实无法获得太多信息...谢谢!!

Answer 1

这是一个关于如何使用 QML/Qt5 执行此类行为的示例。它使用多个组件来完成这一切:

1. Grid在网格状位置显示所有项目
2. Delegate和 Component表示网格中的每个项目而不是重复代码
3. Keys检测/处理键盘事件
4. MouseArea处理鼠标事件

给你:

import QtQuick 2.1
import QtQuick.Controls 1.0

ApplicationWindow {
    title: qsTr("Hello World")
    width: 400
    height: 400

    // Use the Grid component to display your images
    Grid {
      id: grid;
      // You want the grid to be as big a the window so that
      // it follows the resizing
      anchors.fill: parent

      // Add spacing between images
      rowSpacing: 5
      columnSpacing: 5

      columns: 3
      rows: 3

      // Use a Repeater to repeat your images
      Repeater {
        // 5 * 5 elements here
        model: grid.columns * grid.rows;
        // Component to use to represent each image you want
        delegate: delegateGridImage
      }
    }

    // Component that will represent each Image you want in your grid.
    // Right now I use Rectangle because it is easier for an example
    Component {
      id: delegateGridImage

      Item {
        // For each Item we remember on which row and column it is
        // index is a property of each delegate in a Repeater
        // corresponding to the current index of the element
        property int currentColumn: index % grid.columns
        property int currentRow: Math.floor(index / grid.rows);

        // We want the Item to grow with the grid
        width: grid.width / grid.columns
        height: grid.height / grid.rows
        Rectangle {
          anchors.fill: parent
          color: index % 2 == 0 ? "red" : "blue"

          // Add a text to show how each Item can be different
          Text {
            anchors.centerIn: parent
            text: "Col " + currentColumn + " - Row " + currentRow
          }
        }

        // Add a MouseArea in each element that hide the grid when clicked
        MouseArea {
          anchors.fill: parent
          cursorShape: Qt.PointingHandCursor
          onClicked: {
            fakeViewText.text = "The element clicked was" +
                                "[" + currentRow + "," + currentColumn + "]"
            grid.visible = false;
          }
        }
      }
    }

    // Add a Text element in the middle to fake a new "view"
    // Will display which element was clicked and be hidden
    // as soon as we hit escape
    Text {
      id: fakeViewText
      // The text is visible only when the grid is not
      visible: !grid.visible
      anchors.centerIn: parent
      text: ""

      // Enable keyboard detection only if the fakeView is visible
      Keys.enabled: visible

      // Give focus to the element when visible to have keys detection
      focus: visible

      // Bring back the grid when escape is pressed
      Keys.onEscapePressed: {
        grid.visible = true;
      }
    }
}