Xcode做一个5*5的格子

Question

Xcode做一个格子，（用cell？），行列数根据不同提取数据变化，可暂定10*10。行列数多了可以滑动查看，每个格子可赋值字符。每个格子可点击，并处发一个事件。
希望用SwiftUI 和 Storyboard实现。步骤一定是我可以复现的，请实际用过xcode的大拿回答。谢谢！

Answer 1

以下是使用 SwiftUI 和 Storyboard 实现的步骤，创建一个包含可点击格子的简单界面：

步骤 1：创建新的 SwiftUI 项目

打开 Xcode，选择 "Create a new Xcode project"，然后选择 "App" 模板，并选择 "SwiftUI" 作为界面类型。点击 "Next"，为项目命名并选择保存位置，然后点击 "Create"。

步骤 2：创建 Grid 视图

在左侧的项目导航器中，找到 ContentView.swift 文件。这是默认的 SwiftUI 视图文件。在 ContentView 中，你可以创建一个包含格子的 Grid 视图，如下所示：

import SwiftUI

struct ContentView: View {
    let numRows = 10
    let numCols = 10
    
    var body: some View {
        VStack {
            ForEach(0..<numRows, id: \.self) { row in
                HStack {
                    ForEach(0..<numCols, id: \.self) { col in
                        GridCellView()
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这个代码创建了一个包含 10x10 的格子网格，每个格子都使用 GridCellView 表示。

步骤 3：创建 GridCellView 视图

创建一个名为 GridCellView.swift 的新 SwiftUI 视图文件，用于表示每个格子。在 GridCellView 中，你可以添加一个文本视图来显示字符，并使其可点击，如下所示：

import SwiftUI

struct GridCellView: View {
    @State private var cellText = ""
    
    var body: some View {
        Button(action: {
            // 处理格子点击事件
            print("Cell Clicked!")
        }) {
            Text(cellText)
                .font(.headline)
                .frame(width: 40, height: 40)
                .background(Color.blue)
                .foregroundColor(.white)
        }
    }
}

struct GridCellView_Previews: PreviewProvider {
    static var previews: some View {
        GridCellView()
    }
}

这个代码创建了一个可点击的格子，当格子被点击时，会在控制台输出一条消息。

步骤 4：在 ContentView 中使用 GridCellView

回到 ContentView.swift 文件，修改 Grid 视图的内容，使其使用 GridCellView，如下所示：

var body: some View {
    VStack {
        ForEach(0..<numRows, id: \.self) { row in
            HStack {
                ForEach(0..<numCols, id: \.self) { col in
                    GridCellView()
                }
            }
        }
    }
}

现在，你的界面应该包含一个可点击的 10x10 格子网格，每个格子都有一个蓝色的背景，并且当点击格子时会在控制台输出一条消息。

步骤 5：在 Storyboard 中预览

你可以在 Xcode 的预览窗口中查看你的界面。选择 ContentView，然后点击右上角的 "Resume" 按钮，即可在预览窗口中看到你的格子网格界面。

这些步骤可以帮助你创建一个包含可点击格子的简单界面。你可以进一步自定义格子的外观和行为，根据你的需要进行修改。