Цвет фона BoxLayout в неправильном положении

Question

Учитывая макет ниже, я ожидал, что BoxLayout станет баром в 44 пикселя в верхней части экрана с красным фоном с двумя ярлыками «Дата времени». Как показано на скриншоте, этикетки находятся там, где они ожидаются (так что расположение макета коробки правильное), а не для красного фона:

.

Уверен, что мне не хватает чего-то очевидного, так как это первый раз, когда я использую Kivy и KV. Я попытался использовать холст. {До, после} безрезультатно. Что мне не хватает? Заранее благодарим за любые ответы!

#:kivy 1.0 
# 
FloatLayout:  
    canvas: 
     Color: 
      # #263238 
      rgb: 0x26/255.0, 0x32/255.0, 0x38/255.0 

     Rectangle: 
      size: self.size 

    BoxLayout: 
     canvas: 
      Color: 
       rgb: 1, 0, 0 
      Rectangle: 
       size: self.size 

     orientation: 'horizontal' 
     padding: 10 
     spacing: 10 
     size_hint: 1, None 
     pos_hint: {'top': 1} 
     height: 44 

     Label: 
      height: 24 
      text_size: self.width, None 
      text: 'Date time' 

     Label: 
      height: 24 
      text_size: self.width, None 
      text: 'Date time 2' 

    Label: 
     text: 'testing' 

Редактировать: согласно ответу Тотем, добавив pos: self.pos в BoxLayout холст прямоугольника делает трюк.

Answer 1

Вы BoxLayout - это то место, где вы намерены это делать, как вы упомянули. Он заполнен двумя ярлыками, которые также являются местом, где они предназначены. Чтобы фон всего этого выглядел красным, вы могли бы просто сделать ярлыки яркими. Вы уже сделали BoxLayout красным, его просто не видно за ярлыками, и я не совсем уверен, как сделать их прозрачными (я уверен, что это возможно). Думаю, что изучение киви действительно связано с экспериментированием.

Чтобы наклейки имели красный фон (давали вам такой же эффект), вы, вероятно, могли бы использовать их соответствующие холсты, как вы делали с BoxLayout, за исключением использования canvas.before. Вам больше не нужно было бы делать это с плавающей или коробкой макетов.

Из комментария: установить boxlayouts Прямоугольник позицию pos: self.pos