How to select multiple GridLayout cells with mouse

  • Hi,
    I've search all over Google and forums but I haven't found any solution that works for my problem. I'm trying to create an application for Computer use like Ruzzle and I need to figure out how to select a word, using the mouse click to "gather" the letters of the grid. How can I write my code?

  • Hi,

    you can create a custom QML item for each cell, capable of displaying a letter and handling clicks with a MouseArea.

    For example:

    import QtQuick 2.5
    Rectangle {
      id: cell
      width: 50
      height: 50
      property signal clicked
      property alias text: textItem.text
      Text {
        id: textItem
        anchors.centerIn: parent
      MouseArea {
        anchors.fill: parent
        onClicked: cell.clicked()

    When having multiple cells in your grid then, use the text property and clicked signal to implement your game logic:

    Item { // just some dummy item, use GridLayout or position cells however you like
      id: cells
      CellItem {
        id: cell1
        text: "H"
        onClicked: cells.handleClick(cell1.text)
      CellItem {
        id: cell2
        text: "I"
        onClicked: cells.handleClick(cell2.text)
      function handleClick(letter) {
         // handle clicks on letters of grid, the line below prints the clicked letter
        console.log("Letter Clicked: "+letter)

    For creating QML-based games, you can also have a look at V-Play Engine. It offers components to make mobile game development easier as well as game network/multiplayer services or plugins for e.g. advertisements or push notifications.

    To learn more about game development with V-Play, please see the available the open-source game examples and tutorials. Especially the 2048 puzzle game or Juicy Squash match-3 game are a good fit for the type of game you want to make.


Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.