iOS应用启动时如何居中显示SwiftUI ScrollView内的10x10网格内容

解决方法 #

你需要借助ScrollViewReader来指定ScrollView的初始滚动位置，你的代码里没有设置初始偏移，所以ScrollView默认会从网格的左上角开始展示，自然看不到中间的标记单元格。

修改后的完整代码如下：

import SwiftUI

struct TableView: View {
    var body: some View {
        // 0..<10是10x10网格，如果你要11x11就保留0...10
        let rowRange = 0..<10
        let columnRange = 0..<10
        
        NavigationView {
            ScrollView([.horizontal, .vertical]) {
                ScrollViewReader { proxy in
                    VStack(alignment: .center, spacing: 0) {
                        ForEach(rowRange, id: \.self) { h in
                            HStack(alignment: .center, spacing: 0){
                                ForEach(columnRange, id: \.self) { w in
                                    Group {
                                        if h == 4 && w == 4 { // 10x10网格的中间坐标是(4,4)，11x11就改成(5,5)
                                            Image(uiImage: UIImage(named: "X.png")!)
                                                .resizable()
                                        } else {
                                            Image(uiImage: UIImage(named: "Blank.png")!)
                                                .resizable()
                                        }
                                    }
                                    .frame(width: 40, height: 40, alignment: .center)
                                    .id("\(h)-\(w)") // 给每个单元格设置唯一id
                                }
                            }
                        }
                    }
                    .onAppear {
                        // 页面加载完成后直接滚动到中间单元格，居中显示
                        proxy.scrollTo("4-4", anchor: .center)
                    }
                    // 不需要写死1200x1200的frame，内容会自动撑开
                }
            }
        }
    }
}

struct TableView_Previews: PreviewProvider {
    static var previews: some View {
        TableView()
    }
}

补充说明 #

• 如果你确实需要11x11的网格，把rowRange和columnRange改回0...10，同时把scrollTo的参数改成"5-5"即可
• 去掉了原来外层VStack写死的超大frame，网格的尺寸会根据单元格的数量和尺寸自动计算，不需要手动指定，避免后续改单元格尺寸还要同步修改外层frame的问题
• ScrollViewReader是iOS 14及以上系统自带的API，不需要引入额外依赖

内容的提问来源于stack exchange，提问作者Mike Preston