我在網格QML主格式上有5：5矩陣的圖像元素

Question

我想要實現的是，如果用戶點擊其中一個圖像，它應該帶我到另一個QML頁面並按ESC，它應該返回到主QML文件。另外，如果用戶重新調整窗口大小，圖像應根據窗口的大小自行排列。

即，如果窗口縮小，則縮小圖像，如果縮小窗口，則縮小圖像。

這可能嗎？如果是的話，我怎樣才能確保這些圖標在改變窗口大小時會改變它們的大小，並點擊它會將用戶帶到另一個頁面？

自從幾天以來一直在使用QML，真的無法獲得更多信息...謝謝！

Answer 1

這裏是一個關於如何用QML/Qt5做這種行爲的例子。它使用多個組件來做到這一切：

1. Grid顯示在一個網格狀的位置所有項目
2. Delegate和​​代表在網格中的每個項目，而不是重複代碼
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; 
     } 
    } 
}