Customizing your widget’s view

At present, if you preview your widget using the .accessoryRentangular size, it will display the journal entry date and title in white text on the Lock screen. You’ll configure the widget to improve its appearance on the Lock screen. Follow these steps:

1. Click the JRNLWidget file in the Project navigator and modify the JRNLWidgetEntryView structure as follows:

   struct JRNLWidgetEntryView : View {
     var entry: Provider.Entry
     var body: some View {
       ZStack {
         AccessoryWidgetBackground()
         VStack {
           Text(entry.journalEntryDate)
             .font(.headline)
           Text(entry.journalEntryTitle)
             .font(.body)
         }
       }
     }
   }
   

   Let’s break this down:

   Zstack {
      AccessoryWidgetBackground()
   

   A Zstack view overlays and aligns all its child views. The AccessoryWidgetBackground() child view gives the widget a background.

   Text(entry.journalEntryDate)
     .font(.headline)
   

   The...