Factor out dynamic widget creation into separate custom widgets.

crossword.kv

@@ -7,57 +7,27 @@ BoxLayout:
             pos: self.pos
             size: self.size
     AnchorLayout:
-        GridLayout:
-            id: grid
-            size_hint: (None, None)
-            width: min(self.parent.width, self.parent.height)
-            height: min(self.parent.width, self.parent.height)
+        Grid:
+            rows: app.row_count
+            cells: app.cells
     ScrollView:
         BoxLayout:
             orientation: 'vertical'
             size_hint: (None, None)
             size: self.minimum_size
-            Label:
+            Heading:
                 text: 'ACROSS'
-                size_hint: (None, None)
-                font_size: sp(24)
-                padding: (sp(12), sp(12))
-                size: self.texture_size
-            BoxLayout:
-                id: across_clues
-                orientation: 'vertical'
-                size_hint: (None, None)
-                size: self.minimum_size
-            Label:
+            Clues:
+                clues: app.across_clues
+            Heading:
                 text: 'DOWN'
-                size_hint: (None, None)
-                font_size: sp(24)
-                padding: (sp(12), sp(12))
-                size: self.texture_size
-            BoxLayout:
-                id: down_clues
-                orientation: 'vertical'
-                size_hint: (None, None)
-                size: self.minimum_size
-
-<Label>:
-    color: (0.0, 0.0, 0.75, 1.0)
+            Clues:
+                clues: app.down_clues
 
-<BoxLabel>:
-    canvas.before:
-        Color:
-            rgba: (0.0, 0.0, 0.75, 1.0)
-        Rectangle:
-            pos: self.pos
-            size: self.size
-        Color:
-            rgba: (1.0, 1.0, 1.0, 1.0)
-        Rectangle:
-            pos: (self.x + 0.1 * self.width, self.y + 0.1 * self.height)
-            size: (0.8 * self.width, 0.8 * self.height)
-    text_size: self.size
-    halign: 'center'
-    valign: 'center'
+<Grid>:
+    size_hint: (None, None)
+    width: min(self.parent.width, self.parent.height)
+    height: min(self.parent.width, self.parent.height)
 
 <Box>:
     canvas.before:
@@ -79,8 +49,38 @@ BoxLayout:
         pos_hint: {'x': 0.0, 'y': 2 / 3}
         opacity: 1.0 if root.number is not None else 0.0
 
+<BoxLabel>:
+    canvas.before:
+        Color:
+            rgba: (0.0, 0.0, 0.75, 1.0)
+        Rectangle:
+            pos: self.pos
+            size: self.size
+        Color:
+            rgba: (1.0, 1.0, 1.0, 1.0)
+        Rectangle:
+            pos: (self.x + 0.1 * self.width, self.y + 0.1 * self.height)
+            size: (0.8 * self.width, 0.8 * self.height)
+    text_size: self.size
+    halign: 'center'
+    valign: 'center'
+
+<Heading>:
+    size_hint: (None, None)
+    font_size: sp(24)
+    padding: (sp(12), sp(12))
+    size: self.texture_size
+
+<Clues>:
+    orientation: 'vertical'
+    size_hint: (None, None)
+    size: self.minimum_size
+
 <Clue>:
-    text: f'{root.number}. {root.clue}'
+    text: f'{root.number}. {root.clue_text}'
     size_hint: (None, None)
     padding: (sp(6), sp(6))
     size: self.texture_size
+
+<Label>:
+    color: (0.0, 0.0, 0.75, 1.0)

main.py

 from kivy.app import App
+from kivy.uix.boxlayout import BoxLayout
 from kivy.uix.floatlayout import FloatLayout
+from kivy.uix.gridlayout import GridLayout
 from kivy.uix.label import Label
-from kivy.properties import NumericProperty, StringProperty
+from kivy.properties import NumericProperty, StringProperty, ListProperty
 from kivy.modules import inspector
 from kivy.core.window import Window
 
@@ -19,7 +21,7 @@ class Crossword:
         except IndexError:
             return None
 
-    def _get_clue(self, start_row, start_column, row_step, column_step):
+    def _get_clue_text(self, start_row, start_column, row_step, column_step):
         word = ''
         row, column = start_row, start_column
         while self[row, column] is not None:
@@ -28,11 +30,11 @@ class Crossword:
             column += column_step
         return self.clues.get(word)
 
-    def get_across_clue(self, row, column):
-        return self._get_clue(row, column, 0, 1)
+    def get_across_clue_text(self, row, column):
+        return self._get_clue_text(row, column, 0, 1)
 
-    def get_down_clue(self, row, column):
-        return self._get_clue(row, column, 1, 0)
+    def get_down_clue_text(self, row, column):
+        return self._get_clue_text(row, column, 1, 0)
 
 
 CROSSWORD = Crossword((
@@ -59,27 +61,57 @@ class Box(FloatLayout):
     character = StringProperty(None, allownone=True)
 
 
+class Grid(GridLayout):
+    cells = ListProperty([])  # elements have the shape (number, character)
+
+    def rebuild(self):
+        self.clear_widgets()
+        for number, character in self.cells:
+            self.add_widget(Box(number=number, character=character))
+
+    def on_cells(self, _, __):
+        self.rebuild()
+
+
+class Heading(Label):
+    pass
+
+
 class Clue(Label):
     number = NumericProperty(0)
-    clue = StringProperty('')
+    clue_text = StringProperty('')
+
+
+class Clues(BoxLayout):
+    clues = ListProperty([])  # elements have the shape (number, clue text)
+
+    def rebuild(self):
+        self.clear_widgets()
+        for number, clue_text in self.clues:
+            self.add_widget(Clue(number=number, clue_text=clue_text))
+
+    def on_clues(self, _, __):
+        self.rebuild()
 
 
 class CrosswordApp(App):
+    row_count = NumericProperty(0)
+    cells = ListProperty([])
+
+    across_clues = ListProperty([])
+    down_clues = ListProperty([])
+
     def build(self):
         inspector.create_inspector(Window, self)
 
-    def _display(self, crossword):
-        grid = self.root.ids.grid
-        grid.clear_widgets()
-        grid.rows = crossword.size
-        across_clues = self.root.ids.across_clues
-        across_clues.clear_widgets()
-        down_clues = self.root.ids.down_clues
-        down_clues.clear_widgets()
+    def display(self, crossword):
+        self.row_count = crossword.size
+        across_clues = []
+        down_clues = []
+        cells = []
         counter = 0
         for row in range(crossword.size):
             for column in range(crossword.size):
-                # Create a grid cell:
                 character = crossword[row, column]
                 numbered = False
                 if character is not None:
@@ -91,18 +123,19 @@ class CrosswordApp(App):
                 if numbered:
                     counter += 1
                     number = counter
-                grid.add_widget(Box(number=number, character=character))
-                # Maybe create an across clue:
-                across_clue = crossword.get_across_clue(row, column)
-                if across_clue is not None:
-                    across_clues.add_widget(Clue(number=number, clue=across_clue))
-                # Maybe create a down clue:
-                down_clue = crossword.get_down_clue(row, column)
-                if down_clue is not None:
-                    down_clues.add_widget(Clue(number=number, clue=down_clue))
+                cells.append((number, character))
+                across_clue_text = crossword.get_across_clue_text(row, column)
+                if across_clue_text is not None:
+                    across_clues.append((number, across_clue_text))
+                down_clue_text = crossword.get_down_clue_text(row, column)
+                if down_clue_text is not None:
+                    down_clues.append((number, down_clue_text))
+        self.across_clues = across_clues
+        self.down_clues = down_clues
+        self.cells = cells
 
     def on_start(self):
-        self._display(CROSSWORD)
+        self.display(CROSSWORD)
 
 
 if __name__ == '__main__':