When Xcode writes swiftui code, it is a small trap that compiles successfully but causes the preview to crash

summary

In the use of Xcode To write SwiftUI Code , A small oversight will cause the code to compile , But the preview interface crashed .

below , Let's see what's going on .

Ignored “ Smaller ”

First , Take a look at the source code ：

ZStack(alignment: .trailing){
    
	HStack {
    
       VStack {
    
           Text(Model.shortDateFt.string(from: st.date ?? Date.distantPast))
               .fontWeight(.light)
               .font(.footnote)
               .foregroundColor(.slateGray)
           
           CommonUI.hiveScoringTracesView(st, model: model)
       }.frame(minWidth: 65.0)
        
       stateView
           .foregroundColor(stateColor)
           .frame(minWidth: 30)
        
       HStack(alignment: .top) {
    
           Text("\(st.totalGainedScore)")
               .fontWeight(.heavy)
               .font(.body)
               .foregroundColor(scoreColor)
               .opacity(1.0)
           
           baseScoreView
               .underline(true, color: stateColor)
               .fontWeight(.bold)
               .font(.callout)
               .foregroundColor(stateColor)
       }.frame(minWidth: 50)
       
       HStack {
    
           
           Text("\(st.sumOfSubScore)")
               .fontWeight(.bold)
               .foregroundColor(.mediumPurple)
               .frame(minWidth: 30)
           
           Text("\(st.ibAddUp)")
               .fontWeight(.bold)
               .foregroundColor(.green)
               .frame(minWidth: 30)
           
           Text("\(st.ipSubtract)")
               .fontWeight(.bold)
               .foregroundColor(.red)
               .frame(minWidth: 30)
           
           Text("\(st.igbAddUp)")
               .fontWeight(.bold)
               .foregroundColor(.green)
               .frame(minWidth: 30)
       }
       .opacity(0.5)
       font(.callout)
       
       if st.hasRemarks{
    
           Button(action: {
    
               withAnimation {
    
                   self.isUnfoldRemarks.toggle()
               }
           }){
    
               Image(systemName: isUnfoldRemarks ? "arrowtriangle.down.square.fill" : "arrowtriangle.down.square")
                   .foregroundColor(.deepSkyBlue)
                   .font(.system(size: 13, weight: .bold))
                   .offset(x: 15)
           }
           .buttonStyle(BorderlessButtonStyle())
       }
   }
}

The above code can be compiled smoothly , But it will lead to Xcode Preview crash ：

Like to play “ Spot The Differences! ” My friends can first try to find out what the problem is …

See what the problem is ？

The problem is in one line of code font() A point is missing in front of the method ：

font(.callout)

Our intention is to be in front HStack Apply the font modifier method to the view , As a result, a dot was missed .

In this way, the default behavior will be self On the call font() Method , that self What is it? ？

self Is the root view itself ！

such as , below self It stands for MainView View itself ：

struct MainView: View {
    
    var body: some View {
    
        VStack {
    
            Text("hello world")
                font(.title)	//  Equate to  self.font(.title)
        }
        .padding()
        .frame(width: 200, height: 300)
    }
}

therefore , Grammatically speaking, it's OK to write like this , This is why compilation can pass , But the reason why the preview will crash .

summary

With the above lessons , Next time we'll be in Xcode When the preview crashes and is at a loss , Remember to remind yourself not to forget to write that little dot ？

Thanks for watching , See you later ！