Shortening swiftUI code: compiler is unable to type-check this expression in reasonable time

Question

I am trying to create a UI in SwiftUI with two sets of ten buttons (Imaging a game of Cup Pong). Whenever I try to build or preview the code I get the following error message: 'The compiler is unable to type-check this expression in reasonable time; try breaking up the expression into distinct sub-expressions'. I was wondering how I could fix this.

I know that it is very long. Is there any way to fix it so that the code would work.

//  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

Break it into smaller parts. For example by each row and then by each player like this:

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

And define each part like this:

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) }
            }
        }
    }
}

And similarly define UsertTriangleView. Then use them like this:

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

And you are good to go

- Notes:

1. Not only in SwiftUI, but always break huge codes into the smaller meaningful pieces.
2. Don`t Repeat Yourself. Try to create some builder function or use loops to achieve repeating tasks without actually writing it again and again.

Answer 2

I've seen Xcode (12.5.1) show this when I had a build error in my view. Try commenting out portions of your view and rebuilding, it will eventually show you what the real error is. In my case I was missing a constructor argument for one of my child views. After you find the real problem and fix it, you can uncomment everything and it should build fine now.