Dynamic scaling of the game grid

qml/components/Tabs.qml

@@ -7,7 +7,7 @@ import "../constants/tabs.js" as TabConstants
 
 Rectangle {
     // PROPERTIES
-    property string currentTab: TabConstants.systemManagementTab
+    property string currentTab: TabConstants.gamesTab
 
     // FIELDS
     id: tabs
@@ -53,25 +53,29 @@ Rectangle {
         anchors.topMargin: 60
         clip : true
 
+
         GridLayout {
             id: gamesGrid
-            readonly property int elementWidth: 256 + gamesGrid.rowSpacing*2
+            readonly property int elementWidth: 228 + 15// + gamesGrid.rowSpacing*2
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
 
+            //Layout.alignment: AlignCenter
+
             // columns: Math.max(Math.floor(parent.width / elementWidth), 1)
             // rows: Math.max(Math.ceil(children.length / columns), 1)
 
-            columns: Math.max(Math.floor(gamesScroller.width / elementWidth), 1)
+            //columns: Math.max(Math.min(Math.floor(gamesScroller.width / elementWidth),6), 1)
+            columns: 5
             rows: Math.max(Math.ceil(children.length / columns), 1)
 
             anchors.rightMargin: 8
             anchors.leftMargin: 8
             anchors.bottomMargin: 8
             anchors.topMargin: 8
-            rowSpacing: 8
+            rowSpacing: 15
             columnSpacing: rowSpacing
 
             Repeater {
@@ -84,8 +88,12 @@ Rectangle {
                     gameExec: model.exec
                     gameIcon: model.icon
 
-                    width: 256
-                    height: 256
+                    // Layout.fillWidth: true
+                    // Layout.preferredWidth: 1000
+
+                    //width: parent.width / 4
+                    Layout.preferredWidth: (gamesScroller.width) / gamesGrid.columns - gamesGrid.rowSpacing
+                    Layout.preferredHeight: Layout.preferredWidth / 2 * 3
                     // icon: core_app.games.icon
                     // exec: core_app.games.exec
                 }

qml/delegates/Game.qml

 import QtQuick
 import "../constants/scene.js" as SceneConstants
-import "../components/" as C
+//import "../components/" as C
+
+import QtQuick.Controls as C
+
 
 C.Button {
     property string gameTitle: "Generic title"
@@ -8,11 +11,8 @@ C.Button {
     property string gameExec: ""
 
     id: game
-    width: 256
-    height: 256
-    implicitWidth: 256
-    implicitHeight: 256
     text: ""
+
     // color: "#efefef"
     //radius: 5
     // border.width: 1
@@ -33,27 +33,28 @@ C.Button {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         source: game.gameIcon
-        anchors.rightMargin: 8
-        anchors.bottomMargin: 47
-        anchors.leftMargin: 8
-        anchors.topMargin: 8
+        // anchors.rightMargin: 8
+        // anchors.bottomMargin: 47
+        // anchors.leftMargin: 8
+        // anchors.topMargin: 8
         fillMode: Image.PreserveAspectFit
     }
 
-    Text {
-        id: title
-        y: 439
-        height: 33
-        text: game.gameTitle
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        font.pixelSize: 22
-        horizontalAlignment: Text.AlignHCenter
-        anchors.rightMargin: 8
-        anchors.leftMargin: 8
-        anchors.bottomMargin: 8
-    }
+    // Text {
+    //     id: title
+    //     y: 439
+    //     height: 33
+    //     color: "#e23f3f"
+    //     text: game.gameTitle
+    //     anchors.left: parent.left
+    //     anchors.right: parent.right
+    //     anchors.bottom: parent.bottom
+    //     font.pixelSize: 22
+    //     horizontalAlignment: Text.AlignHCenter
+    //     anchors.rightMargin: 8
+    //     anchors.leftMargin: 8
+    //     anchors.bottomMargin: 8
+    // }
 
     
 }

src/models/App.py

@@ -66,6 +66,8 @@ class App(QtCore.QObject):
                 icon = (os.path.isfile(icon) and icon
                         or os.path.realpath(f"{Path(__file__).resolve().parent}../../../qml/images/game_icon.png"))
 
+                # Тест карточек
+                icon = os.path.realpath(f"{Path(__file__).resolve().parent}../../../qml/images/PUBG.png")
                 self.games_model.add_game(Game(name=name, icon=icon, exec=exec))
 
         except FileNotFoundError: