building image interface

.gitignore

+# This file is used to ignore files which are generated
+# ----------------------------------------------------------------------------
+
+*~
+*.autosave
+*.a
+*.core
+*.moc
+*.o
+*.obj
+*.orig
+*.rej
+*.so
+*.so.*
+*_pch.h.cpp
+*_resource.rc
+*.qm
+.#*
+*.*#
+core
+!core/
+tags
+.DS_Store
+.directory
+*.debug
+Makefile*
+*.prl
+*.app
+moc_*.cpp
+ui_*.h
+qrc_*.cpp
+Thumbs.db
+*.res
+*.rc
+/.qmake.cache
+/.qmake.stash
+
+# qtcreator generated files
+*.pro.user*
+*.qbs.user*
+CMakeLists.txt.user*
+
+# xemacs temporary files
+*.flc
+
+# Vim temporary files
+.*.swp
+
+# Visual Studio generated files
+*.ib_pdb_index
+*.idb
+*.ilk
+*.pdb
+*.sln
+*.suo
+*.vcproj
+*vcproj.*.*.user
+*.ncb
+*.sdf
+*.opensdf
+*.vcxproj
+*vcxproj.*
+
+# MinGW generated files
+*.Debug
+*.Release
+
+# Python byte code
+*.pyc
+
+# Binaries
+# --------
+*.dll
+*.exe
+
+# Directories with generated files
+.moc/
+.obj/
+.pch/
+.rcc/
+.uic/
+/build*/

Main.qml

 import QtQuick
 
 Window {
-    width: 640
-    height: 480
+    width: 500
+    height: 520
     visible: true
+    property alias rectangle1Borderwidth: rectangle1.border.width
     title: qsTr("Hello World")
+
+    ListModel{
+        id:sudokuModel
+        Component.onCompleted:{
+            let board =[
+                5, 3, 0, 0, 7, 0, 0, 0, 0,
+                6, 0, 0, 1, 9, 5, 0, 0, 0,
+                0, 9, 8, 0, 0, 0, 0, 6, 0,
+                8, 0, 0, 0, 6, 0, 0, 0, 3,
+                4, 0, 0, 8, 0, 3, 0, 0, 1,
+                7, 0, 0, 0, 2, 0, 0, 0, 6,
+                0, 6, 0, 0, 0, 0, 2, 8, 0,
+                0, 0, 0, 4, 1, 9, 0, 0, 5,
+                0, 0, 0, 0, 8, 0, 0, 7, 9
+            ];
+            for (let i = 0; i < 81; i++) {
+                sudokuModel.append({ value: board[i], isFixed: board[i] !== 0 });
+            }
+        }
+    }
+
+
+    Grid {
+        id: grid
+        width: 378
+        height: 361
+        anchors.verticalCenter: row.verticalCenter
+        anchors.left: row.right
+        anchors.right: row.left
+        anchors.top: row.bottom
+        anchors.bottom: row.top
+        anchors.leftMargin: -386
+        anchors.rightMargin: -394
+        anchors.topMargin: -418
+        anchors.bottomMargin: 6
+        anchors.horizontalCenter: row.horizontalCenter
+        spacing: 2
+        rows: 3
+        columns: 3
+
+        Repeater {
+            id: repeater
+            x: 50
+            y: 60
+            width: 400
+            height: 600
+            visible: true
+            model: 9
+
+
+            Rectangle {
+                id: rectangle
+                width: 120
+                height: 120
+                color: "#ffffff"
+                border.color: "#ee040b27"
+                border.width: 2
+
+                property int blockIndex:index
+                Grid {
+                    id: grid1
+                    x: 0
+                    y: 0
+                    width: 120
+                    height: 120
+                    spacing: 0
+                    rows: 3
+                    columns: 3
+                    property int blockIndex:parent.blockIndex
+                    Repeater {
+                        id: repeater1
+                        width: 120
+                        height: 120
+                        model: 9
+
+                        Rectangle {
+                            id: rectangle2
+                            width: 40
+                            height: 40
+                            color: "#ffffff"
+                            border.width: 1
+                            property int globalIndex:
+                                1+Math.floor(parent.blockIndex / 3) * 27 + (parent.blockIndex % 3) * 3 + Math.floor(index / 3) * 9 + (index % 3)
+
+                            Text {
+                                anchors.fill:parent
+                                horizontalAlignment: Text.AlignHCenter
+                                verticalAlignment: Text.AlignVCenter
+                                id: table_key
+                                x: 0
+                                y: 0
+                                text:parent.globalIndex
+                            }
+
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+
+
+
+
+
+    Row {
+        id: row
+        x: 39
+        y: 440
+        width: 419
+        height: 40
+        spacing: 6
+
+        Repeater {
+            model: 9
+            Rectangle {
+                width: 40
+                height: 40
+                color: "lightgray"
+                border.color: "#ee040b27"
+                border.width: 2
+                anchors.margins: 5  // 让边框有空间显示
+
+                Text {
+                    anchors.fill:parent
+                    text: index+1
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+            }
+        }
+    }
+
+
 }

MyComponent.qml

 import QtQuick
 
 Item {
+    id: singleBloc
+    width: 38
+    height: 38
+    property alias _textText: _text.text
+    x: 1
+    y: 1
+    focus: false
+
+    Text {
+        id: _text
+        x: 0
+        y: 0
+        width: 40
+        height: 40
+        text: "1"
+        font.pixelSize: 12
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
 
 }