swift - 缩短 swiftUI 代码 : compiler is unable to type-check this expression in reasonable time

Question

我正在尝试在 SwiftUI 中创建一个带有两组十个按钮的 UI(想象一场杯乒乓球比赛)。每当我尝试构建或预览代码时，我都会收到以下错误消息:“编译器无法在合理的时间内对该表达式进行类型检查；尝试将表达式分解为不同的子表达式'。我想知道如何解决这个问题。

我知道它很长。有什么办法可以修复它以便代码可以工作。

//  ContentView.swift
//  Text Pong
//
//  Created by Thomas Braun on 8/21/19.
//  Copyright © 2019 Thomas Braun. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 250.0) {//Contains both the triangles
            VStack {//User Triangle
                HStack(spacing: 15.0) {
                Button(action: {}) {
                        Text("7")
                            .font(.largeTitle)
                    }
                Button(action: {}) {
                        Text("8")
                            .font(.largeTitle)
                    }
                Button(action: {}) {
                        Text("9")
                            .font(.largeTitle)
                    }
                Button(action: {}) {
                        Text("10")
                            .font(.largeTitle)
                    }
                }
                HStack(spacing: 15.0) {
                Button(action: {}) {
                        Text("6")
                            .font(.largeTitle)
                    }
                Button(action: {}) {
                        Text("5")
                            .font(.largeTitle)
                    }
                Button(action: {}) {
                        Text("4")
                            .font(.largeTitle)
                    }
                }
                HStack(spacing: 15.0) {
                Button(action: {}) {
                        Text("3")
                            .font(.largeTitle)
                    }
                Button(action: {}) {
                        Text("2")
                            .font(.largeTitle)
                    }
                }
                HStack(spacing: 15.0) {
                Button(action: {}) {
                        Text("1")
                            .font(.largeTitle)
                    }
                }
            }

            //            Text("Game On")

            VStack {//Opponent Triangle
                HStack {
                    VStack {
                Button(action: {}) {
                            Text("1")
                                .font(.largeTitle)
                        }
                        HStack {
                Button(action: {}) {
                                Text("2")
                                    .font(.largeTitle)
                            }
                Button(action: {}) {
                                Text("3")
                                    .font(.largeTitle)
                            }
                        }
                        HStack {
                            Button(action: {}) {
                                Text("4")
                                    .font(.largeTitle)
                            }
                            Button(action: {}) {
                                Text("5")
                                    .font(.largeTitle)
                            }
                            Button(action: {}) {
                                Text("6")
                                    .font(.largeTitle)
                            }
                        }
                        HStack {
                            Button(action: {}) {
                                Text("7")
                                    .font(.largeTitle)
                            }
                            Button(action: {}) {
                                Text("8")
                                    .font(.largeTitle)
                            }
                            Button(action: {}) {
                                Text("9")
                                    .font(.largeTitle)
                            }
                            Button(action: {}) {
                                Text("10")
                                    .font(.largeTitle)
                            }
                        }
                    }
                }


            }// Ending Opponent Triangle verticle Stack
        }
    }
}

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

Answer 1

把它分成更小的部分。例如按每一行，然后按这样的每个玩家:

struct OpponentTriangleView: View {
    var body: some View {
        VStack {//Opponent Triangle
            HStack {
                VStack {
                    Part1View()
                    Part2View()
                    Part3View()
                    Part4View()
                }
            }
        }// Ending Opponent Triangle vertical Stack
    }
}

并像这样定义每个部分:

extension OpponentTriangleView {
    struct Part1View: View {
        var body: some View {
            HStack {
                Button(action: {}) { Text("1") .font(.largeTitle) }
            }
        }
    }

    struct Part2View: View {
        var body: some View {
            HStack {
                Button(action: {}) { Text("2").font(.largeTitle) }
                Button(action: {}) { Text("3").font(.largeTitle) }
            }
        }
    }

    struct Part3View: View {
        var body: some View {
            HStack {
                Button(action: {}) { Text("4").font(.largeTitle) }
                Button(action: {}) { Text("5").font(.largeTitle) }
                Button(action: {}) { Text("6").font(.largeTitle) }
            }
        }
    }

    struct Part4View: View {
        var body: some View {
            HStack {
                Button(action: {}) { Text("7").font(.largeTitle) }
                Button(action: {}) { Text("8").font(.largeTitle) }
                Button(action: {}) { Text("9").font(.largeTitle) }
                Button(action: {}) { Text("10").font(.largeTitle) }
            }
        }
    }
}

并类似地定义 UsertTriangleView .然后像这样使用它们:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 250.0) {//Contains both the triangles
            UserTriangleView()
            //            Text("Game On")
            OpponentTriangleView()
        }
    }
}

你很高兴去


- 注意事项:

不仅在 SwiftUI 中，还有 总是 将巨大的代码分解成较小的有意义的部分。

不要重复自己 .尝试创建一些构建器函数或使用循环来实现重复任务，而无需一次又一次地实际编写。