我在主QML表格上有5:5的图像元素矩阵和Grid

Question

我想要实现的是,如果用户点击其中一个图像,它应该带我到另一个QML页面,并且在按ESC时,它应该返回到主QML文件.

此外,如果用户重新调整窗口大小,则图像应根据窗口的大小自行排列.

即窗口缩小时的小图像和窗口拉伸时的较大图像.

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

几天以来一直在使用QML,真的无法获得太多信息......谢谢!

Answer 1

以下是如何使用QML/Qt5执行此类行为的示例.它使用多个组件来完成所有这些:

1. 网格以网格状位置显示所有项目
2. Delegate和Component表示网格中的每个项目,而不是重复代码
3. 键检测/处理键盘事件
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;
      }
    }
}